我有一个典型的Google App Html表单，该表单记录了在电子表格中输入的数据。这是文件。
HTML表单：
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include("css");?>
</head>
<body>
<h2>Feedback Form</h2>
<div id="message"></div>
<!--- BUTTON New registration --->
<br /><input id="button-responder" type ="button" value = "New registration"
onclick="submitResponder('button-responder'),
submitTransition('message');" style="display:none;" />
<!--- FORM --->
<form id="my-form">
<br /><input id="name" type="text" name="name" placeholder="Your Name">
<br /><input id="email" type="email" name="email" placeholder="Your Email">
<br /><textarea id="comment" rows="10" cols="40" name="comment"></textarea>
<!--- BUTTON submitForm --->
<br /><input id="btn" type="button" value="Submit"
onclick="submitForm(this.parentNode),
document.getElementById('my-form').style.display='none',
submitResponder('button-responder'),submitTransition('message');" />
</form>
<?!= include("test-js");?>
</body>
</html>Google脚本：
function doGet(request) {
return HtmlService.createTemplateFromFile('index')
.evaluate();//not all caps but it has to match the name of the file and it doesn't - Change to PAGE
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
function submitData(form) {
var subject='New Feedback';
var body=Utilities.formatString('name: %s <br />Email: %s<br />Comment: %s', form.name,form.email,form.comment);
var folderId = "my-folder-ID"; // Please set the folder ID. // Added
var blob = Utilities.newBlob(body, MimeType.HTML, form.name).getAs(MimeType.PDF); // Added
var file = DriveApp.getFolderById(folderId).createFile(blob); // Added
return Utilities.formatString('name: %s <br />Email: %s<br />Comment: %s<br />
PDF: <a target="_blank" href="%s">see your PDF file</a>',
form.name,form.email,form.comment,file.getUrl());
function userClicked(userInfo){
var url = "https://docs.google.com/spreadsheets/d/my-spreadsheet-ID";
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("Data");
ws.appendRow([userInfo.name, userInfo.email, userInfo.comment]);
}测试js
<script>
function submitForm(form) {
google.script.run
.withSuccessHandler(function(value){
document.getElementById('message').innerHTML = value;
document.getElementById('name').value = '';
document.getElementById('email').value = '';
document.getElementById('comment').value = '';
})
.submitData(form);
}
function submitResponder() {
var x = document.getElementById("button-responder");
var xx = document.getElementById("my-form");
var xxx = document.getElementById("message");
if (x.style.display === "none") {
x.style.display = "block";
xx.style.display = "none";
xxx.style.display = "block";
} else {
x.style.display = "none";
xx.style.display = "block";
xxx.style.display = "none";
}
}
function submitTransition() {
setTimeout(function() {
document.getElementById('message').style.color = 'blue';}, 2500);
}
document.getElementById("btn").addEventListener("click",doStuff);
function doStuff(){
var userInfo = {}
userInfo.name = document.getElementById("name").value;
userInfo.email = document.getElementById("email").value;
userInfo.comment = document.getElementById("comment").value;
google.script.run.userClicked(userInfo);
document.getElementById("name").value= "";
document.getElementById("email").value= "";
document.getElementById("comment").value= "";
}
</script>CSS：
<style>
#message {
color: transparent;
}
</style>题
现在在Google脚本文件功能
函数submitData（窗体）
并在test-js文件中
函数doStuff（）
他们做得很好，但延迟约为2.5秒，然后Google Script提交了该功能
返回Utilities.formatString
可以显示结果（名称-电子邮件-评论-PDF网址），其结论必须等待2.5秒。
变量中的函数。
在test-js文件中的功能
函数SubmitResponder（）
通过变量使链接到ID（消息）的字段可见
name: example-name email: example-email comment: example-comment PDF: see your example-PDF file
和链接到ID（按钮响应者）
“新注册”按钮的字段
然后，在加载index.html页面时，将显示该表单和“提交”按钮，通过单击“提交”来编辑字段，该表单被隐藏，“新注册”按钮将出现，并在大约2.5秒钟后编辑字段（名称-电子邮件....）也会出现。
单击表单下方的“新注册”按钮会重新出现，显然不是在重新加载页面上，而是在
- 显示=“无”
- 显示=“块”
现在这是我无法解决的问题：
通过重新编辑字段并再次单击提交表单，先前编辑的字段立即再次出现
name: example-name email: example-email comment: example-comment PDF: see your example-PDF file
大约2.5秒后，它们会使用新编辑的字段进行更新
name: new-name email: new-email comment: new-comment PDF: see your new-PDF file
现在有了功能
function commitTransition（）{setTimeout（function（）{document.getElementById（'message'）。style.color ='blue';}，2500）; }
和风格
#message {颜色：透明；}
我试图找到一种解决方案来延迟（隐藏）旧字段的显示，直到新字段更新为止。
当然，这不是正确的方法。
希望我的解释很清楚，您的帮助将非常有帮助。
提前致谢。
submitData完成的脚本后，要显示“新注册”的文本和按钮。如果我的理解是正确的，那么该修改如何？
您出现此问题的原因google.script.run是与异步进程一起运行。由此，之前的剧本submitData完成后，document.getElementById('my-form').style.display='none'，submitResponder('button-responder')和submitTransition('message')正在运行。
请按如下所示修改脚本。
<br /><input id="btn" type="button" value="Submit"
onclick="submitForm(this.parentNode),
document.getElementById('my-form').style.display='none',
submitResponder('button-responder'),submitTransition('message');" />
<br /><input id="btn" type="button" value="Submit" onclick="submitForm(this.parentNode)" />
和
function submitForm(form) {
google.script.run
.withSuccessHandler(function(value){
document.getElementById('message').innerHTML = value;
document.getElementById('name').value = '';
document.getElementById('email').value = '';
document.getElementById('comment').value = '';
})
.submitData(form);
}
function submitForm(form) {
google.script.run
.withSuccessHandler(function(value){
document.getElementById('message').innerHTML = value;
document.getElementById('name').value = '';
document.getElementById('email').value = '';
document.getElementById('comment').value = '';
document.getElementById('my-form').style.display='none'; // Added
submitResponder('button-responder'); // Added
submitTransition('message'); // Added
})
.submitData(form);
}
并且，通过以上修改，您还可以setTimeout按以下步骤删除。
function submitTransition() {
setTimeout(function() {
document.getElementById('message').style.color = 'blue';}, 2500);
}
function submitTransition() {
document.getElementById('message').style.color = 'blue';
}
google.script.run是HTML服务页面中可用的异步客户端JavaScript API ，可以调用服务器端Apps脚本函数。
如果我误解了您的问题，而这不是您想要的结果，我深表歉意。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句