Javascript Google应用程序脚本：函数从运行两次。showModalDialog表单提交
这是我的第一篇帖子，我已经搜索了好几天，但都找不到解决这个问题的方法 我有一个自定义菜单，在表单中弹出一个.showModalDialog html。用户填写信息并单击提交。这在后端运行一个函数，创建文件夹/文件，并将用户数据添加到各种工作表等 所有这些都在工作，我有一个Ui.alert，用来检查输入的数据是否正确，由于某种原因，该函数被触发两次，结果Ui.alert再次弹出。我有一个故障保险箱，检查其中一个字段是否存在，这样它就不会再次写入，但弹出窗口的用户体验非常糟糕 任何帮助都将不胜感激。 创建自定义菜单的函数：Javascript Google应用程序脚本：函数从运行两次。showModalDialog表单提交,javascript,html,google-apps-script,google-sheets,Javascript,Html,Google Apps Script,Google Sheets,这是我的第一篇帖子，我已经搜索了好几天，但都找不到解决这个问题的方法 我有一个自定义菜单，在表单中弹出一个.showModalDialog html。用户填写信息并单击提交。这在后端运行一个函数，创建文件夹/文件，并将用户数据添加到各种工作表等 所有这些都在工作，我有一个Ui.alert，用来检查输入的数据是否正确，由于某种原因，该函数被触发两次，结果Ui.alert再次弹出。我有一个故障保险箱，检查其中一个字段是否存在，这样它就不会再次写入，但弹出窗口的用户体验非常糟糕 任何帮助都将不胜感激。
function onOpen() {
SpreadsheetApp.getUi()
.createMenu('TOA - Menu')
.addItem('Add New Account', 'addAccount')
.addItem('Update Brand', 'updateBrand')
.addItem('Go Live', 'goLive')
.addToUi();
}
function addAccount() {
const html = HtmlService.createHtmlOutputFromFile('newAccount')
.setTitle('Add New Account')
.setWidth(1000)
.setHeight(800);;
SpreadsheetApp.getUi()
.showModalDialog(html, 'Add New Account');
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
#itemDisplay {
display: none;
}
#modDisplay {
display: none;
}
#priceDisplay {
display: none;
}
#businessTypeDisplay {
display: none;
}
</style>
</head>
<body>
<h1>
Add New Account
</h1>
<form id="myForm" onsubmit="handleNewAccountFormSubmit(this);">
<div>
<label for="newBrand">Brand:</label>
<input name="newBrand" type="text" placeholder="Brand Name" required>
</div>
<div>
<p>Location</p>
<label for="country">Country:</label>
<select name="country" id="" onchange="" required>
<option value="" disabled selected>Select Country</option>
<option value="US">US</option>
</select>
<label for="state">State/Province:</label>
<input name="state" type="text" placeholder="State or province" required>
<label for="city">City:</label>
<input name="city" type="text" placeholder="City" required>
<div>
<label for="businessType">Business Type:</label>
<select name="businessType" id="businessTypeSelect" onchange="businessOtherDisplay(this.value);" required>
<option value="" disabled selected>Select Request Reason</option>
<option value="americanDiner">American Diner</option>
<option value="pizzaParlor">Pizza Parlor</option>
<option value="coffeeShop">Coffee Shop</option>
<option value="candyShop">Candy Store</option>
<option value="iceCreamParlor">Ice Cream Parlor</option>
<option value="burgerShop">Burger Shop</option>
<option value="otherNon_AmericanDiner">Other non-American Diner (Foreign servings)</option>
<option value="other">Other (not listed above)</option>
</select>
</div>
<div id="businessTypeDisplay">
<label for="businessTypeOther">Business Type Other:</label>
<input name="businessTypeOther" type="text" placeholder="Business type if not listed above">
</div>
<div>
<label for="integration">Integration:</label>
<select name="integration" required>
<option value="" disabled selected>Select Request Reason</option>
<option value="square">Square</option>
<option value="clover">Clover</option>
<option value="cloverPilot">Clover Pilot</option>
<option value="stripe">Stripe</option>
<option value="gPay">GPAY</option>
<option value="others" >Others</option>
</select>
</div>
<label for="menuSource">File Attachment/Source:</label>
<input name="menuSource" type="text" placeholder="Path to menu" required url>
<div>
<p>Do you need an item hidden/disabled?</p>
<label for="yes">Yes</label>
<input name="disableItemOption" type="radio" value="yes" onclick="showItem()">
<label for="no">No</label>
<input name="disableItemOption" type="radio" value="no" checked onclick="hideItem()">
</div>
<div id="itemDisplay">
<label for="itemDisable">Which item(s) should be disabled?</label>
<textarea id="disabledItem" name="itemDisable" cols="40" rows="5"></textarea>
</div>
<div>
<p>Do you need a modifier hidden/disabled?</p>
<label for="yes">Yes</label>
<input name="disableModOption" type="radio" value="yes" onclick="showMod()">
<label for="no">No</label>
<input name="disableModOption" type="radio" value="no" checked onclick="hideMod()">
</div>
<div id="modDisplay">
<label for="modDisable">Which modifier(s) should be disbaled?</label>
<textarea id="disabledMod" name="modDisable" cols="40" rows="5"></textarea>
</div>
<div>
<p>Do you need to update a price?</p>
<label for="yes">Yes</label>
<input name="updatePrice" type="radio" value="yes" onclick="showPrice()">
<label for="no">No</label>
<input name="updatePrice" type="radio" value="no" checked onclick="hidePrice()">
</div>
<div id="priceDisplay">
<label for="priceUpdate">Which item/modifier needs a price update?</label>
<textarea id="updatedPrice" name="priceUpdate" cols="40" rows="5" priceUpdate></textarea>
</div>
<div>
<label for="otherUpdates">Any other information needed on the menu?</label>
<input name="otherUpdates" type="text" placeholder="List other instructions here">
</div>
<div>
<label for="specialInstructions">Are there special instructions/notes for this brand?</label>
<input name="specialInstructions" type="text" placeholder="List special instructions here">
</div>
<input id="submitButton" type="submit" value="Submit">
<input type="button" value="Cancel" onclick="google.script.host.close()">
</div>
</form>
<script>
function handleNewAccountFormSubmit(formObject) {
document.getElementById('submitButton').disabled=true;
google.script.run.withSuccessHandler().processNewAccountForm(formObject);
}
function disableSubmit() {
document.getElementById('submitButton').disabled=true;
document.getElementById('submitButton').value='Sending...';
}
function showItem(){
document.getElementById('itemDisplay').style.display ='block';
document.getElementById('disabledItem').required = true;
};
function hideItem(){
document.getElementById('itemDisplay').style.display = 'none';
document.getElementById('disabledItem').required = false;
};
function showMod(){
document.getElementById('modDisplay').style.display ='block';
document.getElementById('disabledMod').required = true;
};
function hideMod(){
document.getElementById('modDisplay').style.display = 'none';
document.getElementById('disabledMod').required = false;
};
function showPrice(){
document.getElementById('priceDisplay').style.display ='block';
document.getElementById('updatedPrice').required = true;
};
function hidePrice(){
document.getElementById('priceDisplay').style.display = 'none';
document.getElementById('updatedPrice').required = false;
};
function businessOtherDisplay(value) {
if(value === "other") {
document.getElementById('businessTypeDisplay').style.display = 'block';
} else {
document.getElementById('businessTypeDisplay').style.display = 'none';
};
};
</script>
</body>
</html>
#项目显示{
显示：无；
}
#modDisplay{
显示：无；
}
#价格显示{
显示：无；
}
#业务类型显示{
显示：无；
}
添加新帐户
品牌：
位置
国家：
选择国家
美国
州/省：
城市：
业务类型：
选择请求原因
美国餐车
必胜客
咖啡厅
糖果店
冰淇淋店
汉堡店
其他非美国食客（外国餐）
其他（以上未列出）
业务类型其他：
整合：
选择请求原因
广场
三叶草
三叶草飞行员
条纹
GPAY
其他
文件附件/来源：
是否需要隐藏/禁用项目
对
不
应禁用哪些项目？
是否需要隐藏/禁用修改器
对
不
应该取消哪些修饰语？
您需要更新价格吗
对
不
哪个项目/修改器需要更新价格？
菜单上还需要其他信息吗？
该品牌是否有特殊说明/说明？
函数handleNewAccountFormSubmit（formObject）{
document.getElementById（'submitButton'）。disabled=true；
google.script.run.withSuccessHandler（）.processNewAccountForm（formObject）；
}
函数disableSubmit（）{
document.getElementById（'submitButton'）。disabled=true；
document.getElementById（'submitButton'）。value='Sending…'；
}
函数showItem（）{
document.getElementById（'itemDisplay'）.style.display='block'；
document.getElementById（'disabledItem'）。required=true；
};
函数hideItem（）{
document.getElementById（'itemDisplay'）.style.display='none'；
document.getElementById（'disabledItem'）。required=false；
};
函数showMod（）{
document.getElementById（'modDisplay'）.style.display='block'；
document.getElementById（'disabledMod'）。required=true；
};
函数hideMod（）{
document.getElementById（'modDisplay'）.style.display='none'；
document.getElementById（'disabledMod'）。required=false；
};
函数showPrice（）{
document.getElementById（'priceDisplay'）.style.display='block'；
document.getElementById（'updatedPrice'）。required=true；
};
函数hidePrice（）{
document.getElementById（'priceDisplay'）.style.display='none'；
document.getElementById（'updatedPrice'）。required=false；
};
功能显示（值）{
如果（值=“其他”）{
document.getElementById（'businessTypeDisplay'）。style.display='block'；
}否则{
document.getElementById（'businessTypeDisplay'）.style.display='none'；
};
};
function processNewAccountForm(formObject) {
const ui = SpreadsheetApp.getUi();
const ass = SpreadsheetApp.getActiveSpreadsheet();
const ss = ass.getActiveSheet();
const timestamp = Utilities.formatDate(new Date(), "GMT+8", "MM/dd/yyyy HH:mm:ss");
const userEmail = Session.getActiveUser().getEmail();
const brandName = formObject.newBrand;
// Add alert to check data entered is correct
const response = ui.alert('Please confirm the following information is correct:',
'These are the changes I'd make to the dialog:
<input id="btn1" type="button" value="Submit" onClick="handleNewAccountFormSubmit(this.parentNode);" />
<input type="button" value="Cancel" onclick="google.script.host.close()">
</div>
</form>
<script>
function handleNewAccountFormSubmit(formObject) {
document.getElementById('btn1').disabled=true;
google.script.run.processNewAccountForm(formObject);
}
函数processNewAccountForm（formObject）{
const ui=SpreadsheetApp.getUi（）；
const ass=SpreadsheetApp.getActiveSpreadsheet（）；
const ss=ass.getActiveSheet（）；
const timestamp=Utilities.formatDate（新日期（），“GMT+8”，“MM/dd/yyyy HH:MM:ss”）；
const userEmail=Session.getActiveUser（）.getEmail（）；
const brandName=formObject.newBrand；
//添加警报以检查输入的数据是否正确
const response=ui.alert（'请确认以下信息正确：'，
“以下是我对对话框所做的更改：
函数handleNewAccountFormSubmit（formObject）{
document.getElementById（'btn1'）。disabled=true；
google.script.run.processNewAccountForm（formObject）；
}
我并不是说你的方式是错误的。这只是我尝试的方式。但实际上，这是一个相当大的对话框，你必须深入研究并解决它。如果我在做，我有很多问题，我可能会从一个更简单的版本开始，让它工作，然后慢慢添加更多的功能
<>这实际上是一个相当困难的时间，两个写代码在两个运行时之间的过渡过程中。我注意到我在ES5的一些区域丢失了我的内容帮助，但是它们现在在ES6中工作，所以事情很难处理。这不是一个已知的问题。你链接的问题是由于谷歌表单提交而不是明确的。由于一个webapp表单提交。可能是用户按了两次提交按钮？@TheMaster哦，好的。很抱歉，我认为这是类似的。很抱歉，我对应用程序脚本和编程非常陌生。也许我可以添加一个函数来禁用按钮？想法？我尝试了submit=“handleNewAccountFormSubmit（this）；disableSubmit（）”调用