谷歌应用脚本：html - 表单提交，获取输入值答案

【问题标题】：google apps script: html - form submit, get input values谷歌应用脚本：html - 表单提交，获取输入值
【发布时间】：2018-08-17 08:30:17
【问题描述】：

我正在尝试使用带有表单的侧边栏来获取用户输入。该代码已绑定到 Google 表格文件。

代码.gs：

function onOpen() {
  SpreadsheetApp.getUi()
      .createMenu('Custom Menu')
      .addItem('Show sidebar', 'showSidebar')
      .addToUi();
}

function showSidebar() {
  var html = HtmlService.createHtmlOutputFromFile('Page')
      .setTitle('My custom sidebar')
      .setWidth(300);
  SpreadsheetApp.getUi()
      .showSidebar(html);
}

function processForm(formObject) {
  var ui = SpreadsheetApp.getUi();
  ui.alert("This should show the values submitted.");
}

页面.html：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Please fill in the form below.<br><br>
    <form id="myForm" onsubmit="google.script.run.processForm(this)">
      First name:
      <input type="text" name="firstname"><br><br>
      Last name:
      <input type="text" name="lastname"><br><br>
      Gender:<br>
      <input type="radio" name="gender" value="male" checked> Male<br>
      <input type="radio" name="gender" value="female"> Female<br>
      <input type="radio" name="gender" value="other"> Other<br>
      <br>
      <input type="submit" value="Submit">
    </form><br>
    <input type="button" value="Cancel" onclick="google.script.host.close()" />
  </body>
</html>

当我按下“提交”时，警报会打开并显示给定的消息，并且我的浏览器会打开一个显示空白页面的 url (https://n-ms22tssp5ubsirhhfqrplmp6jt3yg2zmob5vdaq-0lu-script.googleusercontent.com/userCodeAppPanel?firstname=&lastname=&gender=male)。我希望警报显示提交的值，并且我不希望打开额外的页面。

非常简单的问题，但我读到的所有内容似乎都过于复杂。我只想知道获取用户输入的最简单方法。

【问题讨论】：

使用formObject? Logger.log(formObject) in processForm应该让你开始。

标签： javascript forms google-apps-script submit user-input

【解决方案1】：

Html 表单具有导航到提交链接的默认行为。为了防止这种默认行为，您可以在 HTML 中使用 event.preventDefault() 函数，如下所示：

 <form id="myForm" onsubmit="event.preventDefault(); google.script.run.processForm(this)">

注意：您可以找到更详细的解释here

表单元素在参数中作为对象发送到 processForm 函数，要查看它们，您可以使用JSON.stringfy()。了解更多关于对象here

您的 processForm 函数将被修改如下：

function processForm(formObject) {
  var ui = SpreadsheetApp.getUi();
  ui.alert(JSON.stringify(formObject))
  // To access individual values, you would do the following
  var firstName = formObject.firstname 
  //based on name ="firstname" in <input type="text" name="firstname">
  // Similarly
  var lastName = formObject.lastname
  var gender = formObject.gender
  ui.alert (firstName+";"+lastName+";"+gender)
}

【讨论】：

【解决方案2】：

我认为对于html表单，默认的提交方式是GET，提交的表单数据会在页面地址字段中可见。

您可以尝试将方法更改为POST：

  <form id="myForm" onsubmit="event.preventDefault(); google.script.run.processForm(this) method="post"">

参考此链接https://www.w3schools.com/html/html_forms.asp#method

编辑：我试过这个并意识到我们仍然需要添加 event.preventDefault();

【讨论】：