时间戳

首页 > 解决方案 > 如何在 Google App Script 中获取 html 选择表单的值？

html - 如何在 Google App Script 中获取 html 选择表单的值？

问题描述

我在 Google App Script 中有一个 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);使用成功处理程序运行，然后关闭 HTML 框google.script.host.close();

问题：

它不会记录，但是当我单击提交时，HTML 框会关闭。日志：

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

在此处输入图像描述

标签： htmlgoogle-apps-script

解决方案

  • 当您单击提交按钮时，您希望在 中查看Logger.log(obj)日志getEstValues(obj)。

如果我的理解是正确的，那么这个修改呢？

修改点：

  • 当google.script.host.close()函数中有底部时getEstValues()，google.script.host.close()'' is run before the work ofgoogle.script.run is finished completely. Becausegoogle.script.run``以异步处理方式工作。
  • 我认为google.script.host.close()可能不需要底部的，因为google.script.host.close()inwithSuccessHandler已运行。

修改后的脚本

请getEstValues()在 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
}

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

推荐阅读