【发布时间】：2021-07-14 12:07:12
【问题描述】：
我正在将用 GoogleApps 脚本编写的表单导入到使用 Squarespace 构建的页面上的 iframe 中，但我终生无法阻止表单提交。我正在使用：
window.addEventListener( 'load', preventFormSubmit );
按照 GAS 文档中的建议，但这似乎不会触发 preventFormSubmit 函数。相反，当单击提交按钮时，表单提交并转到一个空白的谷歌页面。此外，preventFormSubmit 函数中的警报（现在已被注释掉）永远不会显示，这表明该表单从未被调用。
我在这上面花了几天时间，在任何地方都找不到答案，也不再只见树木不见森林。关于我做错了什么的任何线索？
Squarespace 是一种网站构建器，可以嵌入代码，在本例中为 iframe。
我的代码： js.html：
<script>
function preventFormSubmit() {
//alert( "prevent form submit triggered" );
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
//alert( "forms prevented from submitting: " = forms.length );
}
window.addEventListener( "ready", preventFormSubmit );
function handleFormSubmit(formObject) {
google.script.run
.withSuccessHandler( showSuccess )
.withFailureHandler( showError )
.processForm_1( formObject );
}
</script>
html:
<!DOCTYPE html >
<head>
<base target="_top" >
<?!= include('css'); ?>
<?!= include('js'); ?>
</head>
<body>
<div id="formDiv" class="card" >
<h2 id="title" >Alternative Booking form</h2>
<form id="alternative-booking-form-1" onsubmit="handleFormSubmit(this)" >
<fieldset>
<legend>About You</legend>
<p>Please tell us a bit about yourself.
</p>
<input type="text" id="firstName" name="firstName" form="alternative-booking-form-1"
placeholder="your first name" value="" required
/><br />
<input type="text" id="lastName" name="lastName" form="alternative-booking-form-1"
placeholder="your last name" value="" required
/><br />
<input type="text" id="title" name="title" form="alternative-booking-form-1"
placeholder="your title, eg: mr, mrs, ms etc" value="" /><br>
</fieldset>
<fieldset>
<legend>Your Contact Details</legend>
<p>We will only use your contact details in case we need to contact you with regard to
this booking, unless you consent
to further communications, as offered later in this booking process.</p>
<input type="email" id="email" name="email" form="alternative-booking-form-1"
placeholder="your email address" value=""
required /><br />
<input type="tel" id="phone" name="phone" form="alternative-booking-form-1"
placeholder="phone" value="" required /><br />
</fieldset>
<fieldset>
<input type="hidden" id="form" name="form" form="alternative-booking-form-1" value="1" />
<br />
<input type="submit" id="submit" name="submit" form="alternative-booking-form-1"
class="red" value="Next →" />
<br />
<br />
</fieldset>
</form>
</div>
<div id="output" name="output" ></div>
</body>
【问题讨论】：
标签： forms google-apps-script iframe