google apps脚本:html-表单提交，获取输入值 [英] google apps script: html - form submit, get input values
问题描述
我正在尝试使用带有表单的边栏来获取用户输入.该代码已绑定到Google表格文件.
代码gs:
I'm trying to use a sidebar with a form to get user input. The code is bound to a Google Sheets file.
Code.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:
Page.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-ms22tssp5ubsirhhf1r 0lu-script.googleusercontent.com/userCodeAppPanel?firstname=&lastname=&gender=male ).
我希望警报显示提交的值，并且我不想打开多余的页面.
这个问题很简单，但是我阅读的所有内容似乎都过于复杂.我只想知道获取用户输入的最简单方法.
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).
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.
推荐答案
HTML表单具有导航到提交链接的默认行为.为了防止这种默认行为，您可以在HTML中使用event.preventDefault()函数，如下所示:
Html form has a default behavior of navigating to the submission link. To prevent that default behavior you can use event.preventDefault() function in HTML like so:
<form id="myForm" onsubmit="event.preventDefault(); google.script.run.processForm(this)">
注意:您可以在此处
表单元素在processForm函数的参数中作为对象发送，要查看它们，您可以使用 JSON.stringfy() .在此处
The form elements are sent as an object in the argument to the processForm function, to view them you can use JSON.stringfy(). Learn more about objects here
您的processForm函数将被如下修改:
Your processForm function would be modified like so:
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)
}
这篇关于google apps脚本:html-表单提交，获取输入值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
