html - 使用应用程序脚本提交表单
问题描述
我遇到了Google Script - Sidebar button 中描述的问题,不断打开一个新选项卡。我最初使用的是:
<input type="submit" value="Submit" />
但是当提交创建一个新选项卡时遇到了问题,如该问题中所述。我试图改变帖子中讨论的方法:
<button type='button'>
但这会导致一个不可点击的按钮:
现在我把它改回了:
<input type="submit" value="Submit" />
现在我可以在单击时关闭表单,但是当我检查日志时,表单似乎没有向服务器端提交任何内容,但在服务器端没有看到任何提交的内容。
我怎样才能让它工作并提交表格?整个模板如下,应该是独立的:
<!DOCTYPE html>
<html>
<head>
<base target="_top" />
<script>
// Prevent forms from submitting.
function preventFormSubmit() {
var forms = document.querySelectorAll('forms');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
window.addEventListener('load', preventFormSubmit);
function handleFormSubmit(formObject) {
google.script.run
.withSuccessHandler(google.script.host.close())
.processRowPopupHTML(formObject);
}
function updateUrl(url) {
var div = document.getElementById('output');
div.innerHTML = '<a href="' + url + '">Sent!</a>';
}
</script>
</head>
<body>
<form id="myForm" onsubmit="handleFormSubmit(this)">
<div id="texts"></div>
<div>
<label for="optionList">Click me</label>
<select
id="optionList"
ondblclick="addText(event)"
name="optionList"
size="5"
>
</select>
</div>
<br />
<br />
<div>
<textarea id="message" name="message" rows="10" cols="30"></textarea>
</div>
<div id="textboxes"></div>
<div id="insert"></div>
<input type="submit" value="Submit" />
</form>
<div id="output"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>
<link
href="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css"
rel="stylesheet"
/>
<script>
// var canned = <?= canned ?>; //PASSED IN JSON
var mycannedObj = ['hi', 'hi', 'hi', 'hi', 'hi'];
function addText(event) {
var targ = event.target || event.srcElement;
document.getElementById('message').value +=
' ' + targ.textContent || targ.innerText + ' ';
}
function buildOptionList(options, elementId) {
var list = $('#' + elementId);
list.empty();
for (var i = 0; i < options.length; i++) {
console.log(options[i]);
list.append(
'<option value="' +
options[i].toLowerCase() +
'">' +
options[i] +
'</option>'
);
}
}
(function() {
buildOptionList(mycannedObj, 'optionList');
})();
</script>
</body>
</html>
编辑:
将代码更改为:
google.script.run.withSuccessHandler(google.script.host.close).processRowPopupHTML(formObject);
并单击按钮,我再次打开了一个新选项卡:
https://n-g6b................tas763ea-0lu-script.googleusercontent.com/userCodeAppPanel?optionList=hi&message=+hi
控制台显示:
我确实看到了:
[19-02-25 17:05:06:900 PST] {optionList=hi, message= hi}
正如预期的那样,在日志中,这很好。但是如何阻止标签打开?
解决方案
问题:
forms
不是有效的 CSS 选择器或节点名称。因此,preventDefault()
永远不会附加form
到load
.
解决方案:
代替
document.querySelectorAll('forms');
和
document.querySelectorAll('form');
参考:
推荐阅读
- python - Python 文件管理
- sql-server - 根据时间戳查询 CosmosDB
- python - 仅从一列中删除重复项,同时保持行的其余部分完整数据框熊猫
- python - 如何在 python 套接字模块中接收 sendall
- html - 如何利用网络上的 CSS 按钮?
- python-3.x - 等效于 bash 中的 python base32 编码
- c# - 实例化预制件时出现 NullReferenceException
- android - 为什么将 gdbserver 附加到本机 android 应用程序失败?
- javascript - 如何通过单击带有 alpine js 的元素来访问受模块保护的功能?
- java - 原因:io.lettuce.core.RedisCommandExecutionException: CLUSTERDOWN Hash slot not serving