CODEWITHSUNDEEP
htmlgoogle-apps-script
Brandon Pillay
Brandon Pillay

Reputation: 1166

How to get the value of a html select form in Google App Script?

I have a HTML form in Google App Script

HTML:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body onload="myFunction()">

    <form id="myForm" >
     <select id="mySelection" name="establishment" style="width:300px">
     </select>
     <br>
     <input type="button" class="button" value="Submit" name="button" onclick="getEstValues()">
    </form>
    <br>

    <script>
     //Redundant success function:\
     function success(msg) {
     };
     //Triggered onload gets parameter as callback function from opOpen.gs updateEstselect().
     function myFunction(array) {
      //Loops through the array of est. 
      for(var i = 0 ;i < array.length; i++){
      //Create an element. 
      var element = document.createElement("option");
      //Insert Test into the element tags created above. 
      var textnode = document.createTextNode(array[i]);
      //Append the text node to the element tags.
      element.appendChild(textnode);
      //appends the <option> to <select> as a child.  
      document.getElementById("mySelection").appendChild(element);
      };
     };


     //Triggers the above function onload then uses the value returned from updateEstSelect as a callback param for myFunction()
     google.script.run
     .withSuccessHandler(myFunction)
     .updateEstSelect();


     function getEstValues(){
     //Gets the form
     var form = document.getElementById("myForm").elements;
     //Creates an object with the form names and values.
     var obj ={};
       for(var i = 0 ; i < form.length ; i++){
       var item = form.item(i);
       obj[item.name] = item.value;
       }
      //Triggers GAS side getEstValues(obj) function. 
      google.script.run
      .withSuccessHandler(function(e) { 
      success(e);
      google.script.host.close();
      })
      .getEstValues(obj);
      //Closes HTML box. 
      google.script.host.close();
     };
    </script>
  </body>
</html>

JS:

function getEstValues(obj){
  Logger.log(obj);
  return obj;
}

The HTML box loads perfectly when requested but when I check the log, there's nothing to view. When I click on the submit button onclick="getEstValues()" runs this getEstValues() which then gets the form with myForm , then iterates through the array, creates an object using name as the key and value as the value which then runs .getEstValues(obj); with success handler then closes the HTML box with google.script.host.close();

The problem:

It doesn't log but when I click submit the HTML box closes. Log:

No logs found. Use Logger API to add logs to your project.

enter image description here

Upvotes: 1

Views: 1223

Answers (1)

Tanaike
Tanaike

Reputation: 201713

  • When you clicked the submit button, you want to see the log at Logger.log(obj) of getEstValues(obj).

If my understanding is correct, how about this modification?

Modification points:

  • When there is google.script.host.close() of the bottom in the function getEstValues(), google.script.host.close()'' is run before the work ofgoogle.script.runis finished completely. Becausegoogle.script.run`` works by the asynchronous processing.
  • I thought that google.script.host.close() of the bottom might be not required because google.script.host.close() in withSuccessHandler is run.

Modified script

Please modify getEstValues() in HTML.

function getEstValues(){
  //Gets the form
  var form = document.getElementById("myForm").elements;
  //Creates an object with the form names and values.
  var obj = {};
  for (var i = 0 ; i < form.length ; i++) {
    var item = form.item(i);
    obj[item.name] = item.value;
  }
  //Triggers GAS side getEstValues(obj) function. 
  google.script.run
  .withSuccessHandler(function(e) {
    success(e);
    google.script.host.close();
  })
  .getEstValues(obj);
  //Closes HTML box.
  // google.script.host.close(); // <----- Modified
}

If I misunderstand your issue, please tell me. I would like to modify it.

Upvotes: 1

Related Questions