在 Google HtmlService 中使用 ToggleButton 的值答案

【问题标题】：Making use of ToggleButton's value in Google HtmlService在 Google HtmlService 中使用 ToggleButton 的值
【发布时间】：2021-04-30 00:53:52
【问题描述】：

跟进ToggleButton for Google HtmlService，最后说：

在我提供的HTML demo code 中，我能够使用form.myButton.value，但问题是当我尝试使用它从Google App Code 函数中更新我的标签时，就像@987654323 一样@ 正在做，它总是失败，我不知道为什么。

以下是详细信息：

HTML

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h2>Feedback Form</h2>
    <div id="message" style="color:green"></div>
    <form id="myForm">
      <br /><input id="name" type="text" name="name" placeholder="Your Name">
      <br /><input id="email" type="email" name="email" placeholder="Your Email">
      <br /><input type="button" name="myButton" value="OFF" style="color:blue"
       onclick="toggle(this);">
      <br /><textarea id="comment" rows="10" cols="40" name="comment"></textarea>
      <br /><input type="button" value="Submit" onclick="submitForm(this.parentNode);" />  
    </form>  
    <script>
      var state = false;

      // Toggles the passed button from OFF to ON and vice-versa.
      function toggle(button) {
        state = !state;
        if (state) {
          button.value = "ON";
        } else {
          button.value = "OFF";
        }
      }

      function submitForm(form) {
        google.script.run
        .withSuccessHandler(function(value){
          document.getElementById('message').innerHTML = value;
          document.getElementById("myForm").reset();
        }) 
        .submitData(form);
      }
    </script>
  </body>
</html>

气体

// https://stackoverflow.com/questions/59583876/google-apps-script-html-form/

//It works as a dialog
function showTheDialog() {
  var userInterface=HtmlService.createHtmlOutputFromFile('Index');
  SpreadsheetApp.getUi().showModelessDialog(userInterface, "Form")
}

// Test at
// https://jsbin.com/vodamekuxu/edit?html,js,console,output

function submitData(form) {
  Logger.log('name: %s <br />Email: %s<br />Comment: %s', form.name,form.email,form.comment);
  return Utilities.formatString('name: %s <br />Email: %s<br />Comment: %s', form.name,form.email,form.comment);
  //return Utilities.formatString('name: %s <br />Email: %s<br />Toggle: %s<br />Comment: %s', form.name,form.email,form.myButton,form.comment);
}

同样，问题是当我尝试从 Google App Code 函数中更新我的标签时，就像 HTML 演示代码所做的那样，它总是失败，我不知道为什么。

上面的代码有效，但是如果切换到使用第二个返回，它会失败（我相信是因为form.myButton 部分）。

【问题讨论】：

表格上的所有内容似乎都对我有用。我不知道你说的是什么标签我在你的表格上没有看到任何标签。您改为使用占位符。消息从 submitData() 函数返回并显示 div。所以我看不到你所说的问题。无论如何，引用非现场资源对我没有用，因为我不关注大多数链接。
@MetaMan，我的 HTML 和 GAS 包含您需要的一切。请重新打开它。如果一切都为你工作，那是我的意图，表明一切都在工作。然后你需要注释掉第一个返回并取消注释第二个返回，当你会注意到事情不再工作时。

标签： javascript google-apps-script

【解决方案1】：

我认为当使用google.scrit.run 将表单对象发送到 Google Apps 脚本端时，解析对象时可能无法包含按钮。当我对此进行测试时，我确认了同样的情况。那么在这种情况下，作为一种解决方法，在Javascript端解析表单对象怎么样？

当你的脚本被修改后，变成如下。

修改脚本：

请修改你的Javascript函数submitForm()如下。

从：

.submitData(form);

到：

.submitData([...form].reduce((o, e) => Object.assign(o, {[e.name]: e.value}), {}));

通过以上修改，按钮的值可以发送到 Google Apps Script 端。
form 在 Google Apps 脚本端的值类似于 {"email":"###","comment":"###","name":"###","":"Submit","myButton":"ON"}。如果您不想发送"":"Submit"，请过滤该值。
在这种情况下，我认为可以使用您在 Google Apps Script 中的return Utilities.formatString('name: %s <br />Email: %s<br />Toggle: %s<br />Comment: %s', form.name,form.email,form.myButton,form.comment);。

注意：

当表单包含文件类型的输入选项卡时，脚本有点复杂。到时候，使用 Javascript 库为 Google Apps Script 解析表单对象怎么样？ Ref
当您修改 Google Apps 脚本时，请将部署修改为新版本。这样，修改后的脚本就会反映到 Web Apps。请注意这一点。
您可以在“Redeploying Web Apps without Changing URL of Web Apps for new IDE”的报告中查看详细信息。

参考资料：

【讨论】：