时间戳

首页 > 解决方案 > 如何防止在谷歌应用脚​​本中提交表单

forms - 如何防止在谷歌应用脚​​本中提交表单

问题描述

我正在将用 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 &rarr;"  /> 
        <br /> 
        <br />
      </fieldset>
    </form>
  </div>
  <div id="output" name="output" ></div>
  
    </body>

标签： formsgoogle-apps-scriptiframe

解决方案

<!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" >
      <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="button" id="submit" name="submit" form="alternative-booking-form-1" 
     class="red" value="Next &rarr;"  /> 
        <br /> 
        <br />
      </fieldset>
    </form>
  </div>
  <div id="output" name="output" ></div>
  <script>
  window.onload = function() {
    document.getElementById("alternative-booking-form-1").addEventListener( "ready", handleFormSubmit );
  }
   
  function handleFormSubmit(formObject) {
    google.script.run
      .withSuccessHandler( showSuccess )
      .withFailureHandler( showError )
      .processForm_1( formObject );
  }
   </script>    
    </body>

推荐阅读