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

Question

I'm trying to use a sidebar with a form to get user input.我正在尝试使用带有表单的边栏来获取用户输入。 The code is bound to a Google Sheets file.该代码绑定到 Google 表格文件。

Code.gs:代码.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.");
}

Page.html:页面.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>

When I press "Submit", the alert opens with the given message and my browser opens to a url which shows a blank page ( https://n-ms22tssp5ubsirhhfqrplmp6jt3yg2zmob5vdaq-0lu-script.googleusercontent.com/userCodeAppPanel?firstname=&lastname=&gender=male ).当我按下“提交”时，警报会打开并显示给定的消息，我的浏览器会打开一个显示空白页面的网址（ https://n-ms22tssp5ubsirhhfqrplmp6jt3yg2zmob5vdaq-0lu-script.googleusercontent.com/userCodeAppPanel?firstname=&lastname=&gender =男性）。 I'd like the alert to display the values submitted, and I don't want the extra page to open.我希望警报显示提交的值，但我不想打开额外的页面。

Pretty simple problem, but everything I read seems really over complicated.很简单的问题，但我读到的一切似乎都太复杂了。 I just want to know the simplest way to get user input.我只想知道获取用户输入的最简单方法。

Answer 1

Html form has a default behavior of navigating to the submission link. Html 表单具有导航到提交链接的默认行为。 To prevent that default behavior you can use event.preventDefault() function in HTML like so:为了防止这种默认行为，您可以在 HTML 中使用event.preventDefault()函数，如下所示：

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

Note : You can find more detailed explanation here注意：您可以在此处找到更详细的说明

The form elements are sent as an object in the argument to the processForm function, to view them you can use JSON.stringfy() .表单元素作为对象发送到 processForm 函数的参数中，要查看它们，您可以使用JSON.stringfy() 。 Learn more about objects here在此处了解有关对象的更多信息

Your processForm function would be modified like so:您的 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)
}

Answer 2

I think for html form, the default submit method is GET, and the submitted form data will be visible in the page address field.我觉得对于html表单，默认的提交方式是GET，提交的表单数据会在页面地址栏可见。

You can try changing the method to POST:您可以尝试将方法更改为 POST：

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

Refer to this link https://www.w3schools.com/html/html_forms.asp#method参考这个链接https://www.w3schools.com/html/html_forms.asp#method

Edit: I tried this and realised we still need to add event.preventDefault();编辑：我试过了，意识到我们仍然需要添加 event.preventDefault();

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

问题描述

2 个解决方案

解决方案1
16 已采纳 2018-03-08 22:32:24

解决方案2
0 2020-02-09 03:39:45

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

问题描述

2 个解决方案

解决方案1 16 已采纳 2018-03-08 22:32:24

解决方案2 0 2020-02-09 03:39:45

解决方案1
16 已采纳 2018-03-08 22:32:24

解决方案2
0 2020-02-09 03:39:45