How to send data from a HTML form to a Google Apps Script

Question

I am really new to google script and HTML and I am trying to create a program that accepts multiple inputs from a user using a HTML form, and when the user clicks submit, the data is stored inside a variable and can be used inside a .gs file from a .html . I have gotten the form to work but whenever I clicked "Submit" nothing occurs. After some troubleshooting, I think the problem is at my form_data() function. What I would like to know is how to compile the data inputs from the form and send it to my runsies() fucntion. Thank you in advance! Here is my HTML code below:

const ui = SpreadsheetApp.getUi();

function onOpen() {
  ui.createAddonMenu()
      .addItem('New Entry', 'newEntry')
      .addToUi();
};

function newEntry() {
   var html = HtmlService.createHtmlOutputFromFile("input")
    .setWidth(750)
    .setHeight(550);
  
  //Display the dialog
  var dialog = ui.showModalDialog(html, "External Organisations");
};

function runsies(info){
  //Display the values submitted from the dialog box in the Logger.
  Logger.log(info);
};

<html>
  <head>
    <!--Set the font of the form-->
    <style>
      body {font-family:Courier;}
    </style>
  </head>

  <!--Main body design of the form-->
  <body>

    <!--Create text boxes for user input-->
    <form action="" method="get" class="form-example">
      </script>
      <div class="form-example">
        <label for="name"><b>Organisation: </b></label><br>
        <input type="text" name="name" id= "txt1" style="border-radius:3px" required><br><br>
      </div>
      <div class="form-example">
        <label for="email"><b>Email: </b></label><br>
        <input type="text" name="email" id="txt2" style="border-radius:3px" required><br><br>
      </div>
      <div class="form-example">
        <label for="phone"><b>Phone: </b></label><br>
        <input type="text" name="phone" id="txt3" style="border-radius:3px" required><br><br>
      </div>
      <div class="form-example">
        <label for="poc"><b>Point of Contact: </b></label><br>
        <input type="text" name="poc" id="txt4" style="border-radius:3px" required><br><br>
      </div>
      <div class="form-example">
        <label for="susmi"><b>SUSMI Contact: <b></label><br>
        <input type="text" name="susmi" id="txt5" style="border-radius:3px" required><br><br>
      </div>
      <div class="form-example">
        <label for="stats"><b>Status: <b></label><br>
        <input type="text" name="stats" id="txt6" style="border-radius:3px" required><br><br>
      </div>
      <div class="form-example">
        <label for="note"><b>Notes: </b><br><textarea rows="5" cols="50" id="multiLineInput" style="border:2px solid black;border-radius:3px">
        </textarea></label><br><br>
      </div>
      <input type="button" value="Submit" onclick="form_data()">
      <input type="button" value="Close" onclick="google.script.host.close()" />

      <!--Once user clicks submit, compile info and send it to main .gs code-->

      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
      <script>
        function form_data(){
          var info = [txt1,txt2,txt3,txt4,txt5,txt6,multiLineInput];
          google.script.run.withSuccessHandler().runsies(info);
          closeIt()
        };
        function closeIt(){
          google.script.host.close()
        };

    </form>
  </body>
</html>```

stackoverflow.com/a/59585277/7215091

Cooper
– Cooper

2021-09-18 17:34:42 +00:00
Commented Sep 18, 2021 at 17:34 — Cooper
– Cooper, Commented Sep 18, 2021 at 17:34

Cooper · Accepted Answer · 2021-08-06 03:08:48Z

0

var info = [txt1,txt2,txt3,txt4,txt5,txt6,multiLineInput];

Your array is just a bunch of element id's if you want the data use `document.getElementById().value for the text boxes

Read about client to server communication google.script.run

javascript reference

answered Aug 6, 2021 at 3:08

Cooper

64.2k7 gold badges29 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shahrul Akmal Over a year ago

so instead, should I be replacing that line with a 'document.getElementById('txt1')' and so on to store all of the inputs into the variable 'info'?

Cooper Over a year ago

That's how you get the values of a text element. If you submitted the form as an object then you could use object.name where name is the name attribute for each element .

Shahrul Akmal Over a year ago

Is there a difference between the object.name method and the document.getElementById() metohd?

Collectives™ on Stack Overflow

How to send data from a HTML form to a Google Apps Script

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related