如何在Google App脚本中获取html select表单的值?

时间:2018-11-28 15:26:56

标签: html google-apps-script

我在Google App脚本中有一个HTML表单

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;
}

在请求时,HTML框可以完美加载,但是当我检查日志时,没有任何内容可查看。当我单击提交按钮onclick="getEstValues()"运行此getEstValues()时,它将使用myForm获取表单,然后遍历数组,使用name作为键创建对象,然后value作为值,然后使用成功处理程序运行.getEstValues(obj);,然后使用google.script.host.close();

关闭HTML框

问题:

它不会记录日志,但是当我单击“提交”时,HTML框关闭。 日志:

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

enter image description here

1 个答案:

答案 0 :(得分:1)

  • 单击“提交”按钮时,您想要查看Logger.log(obj)getEstValues(obj)处的日志。

如果我的理解是正确的,那么该修改如何?

修改点:

  • 当函数google.script.host.close()的底部有getEstValues()时,google.script.host.close()'' is run before the work of google.script.run is finished completely. Because google.script.run``通过异步处理工作。
  • 我认为可能不需要底部的google.script.host.close(),因为google.script.host.close()中的withSuccessHandler已运行。

修改后的脚本

请修改HTML中的getEstValues()

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
}

如果我误解了您的问题,请告诉我。我想修改它。