在 Google Apps Script 网络应用程序中获取任意表单元素的值答案

【问题标题】：Getting value of arbitrary form element in Google Apps Script web app在 Google Apps Script 网络应用程序中获取任意表单元素的值
【发布时间】：2019-02-21 17:51:33
【问题描述】：

我有一个附有表单的 Google Apps Script 网络应用，例如：

<form id="form">
    <input type="range" min="0" max="3" name="mb1" value="0">
    <input type="range" min="0" max="3" name="mb2" value="0">
    <input type="range" min="0" max="3" name="mb3" value="0">
    etc...
    <input id="submit" type="submit" style="display: none" onclick="this.value='Submitting ...'; google.script.run.withSuccessHandler(formSubmitted) .writeForm(this.parentNode); return false;">
</form>

Code.gs 文件有一个 writeForm(form) 函数，它可以像这样访问表单输入值：

var mb1 = form.mb1;
var mb2 = form.mb2;
etc...

但是，这种方法在处理许多此类输入时效率低下（我有大约 80 个）。更好的是在循环处理它们时获取值，如下所示：

for(var i = 0; i <= 80; i++) {
    var formItemID = "mb"+i;
    console.log(form.formItemID);
}

但是，这当然行不通，因为它会查找 id 为“formItemID”的表单输入。我查看了应该发送的 HTMLFormElements 类的一些功能，但 Apps 脚本似乎没有完全实现这一点，而且我找不到 form.ItemName 属性的文档。有没有办法在不单独调用每个表单输入的情况下实现此功能？

【问题讨论】：

标签： forms google-apps-script web-applications

【解决方案1】：

您总是可以遍历表单元素并获取输入值。这将向服务器发送一个数组。

<!DOCTYPE html>
  <html>
    <head>
    <base target="_top">
  </head>
  <body>
    <form id="form" name="form">
      <input class="range" type="range" min="0" max="3" value="0">
      <input class="range" type="range" min="0" max="3" value="0">
      <input class="range" type="range" min="0" max="3" value="0">
      <br>
      <input id="button" type="button" onclick="onClick()">
    </form>
    <script>
      function onClick() {
        var form = document.getElementById("form");
        var vals = [];
        for( var i=0; i<form.elements.length; i++ ) {
          if( form.elements[i].className === "range" ) {
            vals.push(form.elements[i].value);
          }
        }
        google.script.run.getForm(vals);
      }
    </script>
  </body>
</html>

【讨论】：

【解决方案2】：

服务器端，您的表单以object 的形式发送，其中键作为输入名称，值作为输入值。你的form 看起来像：

{
 mb1:0,
 mb2:1,
 mb3:0
}

要访问这些值，您可以使用 form.mb1 或 form['mb1']。要将变量用作键，请始终使用方括号 [] 表示法

for(var i = 0; i <= 80; i++) {
    var formItemID = "mb"+i;
    console.log(form[formItemID]);//Note bracket notation 
}

或者没有for循环，

var valuesArr = Object.keys(form).map(function(key){return form[key];})

【讨论】：

完美！这无需我重新构建任何其他代码即可工作。