GAS按钮或输入[提交]不断刷新页面？为什么？

Question

我刚刚启动了一个新的 Google 应用程序脚本并创建了一个简单的表单，它背后有一些 jQuery 来处理验证，如下所示。

但是每当我点击我创建的<button> 时，它只会刷新页面。 <input type='submit'> 按钮也会发生同样的事情。

任何想法为什么会这样做以及如何防止它？

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<!-- https://developers.google.com/apps-script/add-ons/css -->

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<!-- this CSS package is for the jquery datepicker  -->

<div>
  <h1>Use the form below to enter a new entry into the calendar</h1>
  
  <table>
  <form>
  
    <tr>
      <td>
          Title: <input type='input' id='title' />
      </td>
      <td>
          Description:<input type='input' id='description' />
      </td>
     </tr>
     
     
    <tr>
      <td>
          Date: <input type='text' id='date_choice' value="" />
      </td>
      <td>
          <label for="select">Time of day</label>
          <select id="select">
            <option value='before' >Before School Starts</option>
            <option value='morning' selected>Morning</option>
            <option value='lunchtime'>Lunchtime / Afternoon</option>
            <option value='afterschool'>After School has ended</option>
          </select>
       </td>
   </tr>
   
   
   
   <tr>
     <td colspan='2' style='text-align: center;'>
        <button class="create">Insert</button>
      </td>
   </tr>
</form>
</table>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script>
$(document).ready(function(){
  $( "#date_choice" ).datepicker({
    dateFormat: "dd/mm/yy"
  });
  
  $("#create").click(InsertIntoCal);
});

function InsertIntoCal(){
  
  var title = document.getElementById("title").value; 
  var descr = document.getElementById("description").value; 
  var date = document.getElementById("date_choice").value; 
  var time = document.getElementById("select").value; 
  
  alert(title); alert(descr); alert(date); alert(time);
}
</script>

Answer 1

您犯了一个简单的 HTML / jQuery 错误。你的按钮有一个class，但没有唯一的id：

<button class="create">Insert</button>
        ^^^^^^^^^^^^^^

...但是您尝试通过id 将click() 处理程序绑定到特定元素：

$("#create").click(InsertIntoCal);
   ^^^^^^^

因此，InsertIntoCal() 永远不会被调用。

您希望 class 用于样式，所以保留它，但添加一个 id，如下所示：

<button class="create" id="insert-entry">Insert</button>

然后修改绑定以使用新的id：

$("#insert-entry").click(InsertIntoCal);

您可以在下面的 sn-p 中尝试一下。

WRT <input type='submit'> - 这在 Google Apps 脚本中不起作用，没有等待表单提交的 POST 处理程序。相反，您需要继续扩展您的 InsertIntoCal() 处理程序以使用 google.script.run 将表单内容发送到服务器端处理程序。

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<!-- https://developers.google.com/apps-script/add-ons/css -->

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<!-- this CSS package is for the jquery datepicker  -->

<div>
  <h1>Use the form below to enter a new entry into the calendar</h1>
  
  <table>
  <form>
  
    <tr>
      <td>
          Title: <input type='input' id='title' />
      </td>
      <td>
          Description:<input type='input' id='description' />
      </td>
     </tr>
     
     
    <tr>
      <td>
          Date: <input type='text' id='date_choice' value="" />
      </td>
      <td>
          <label for="select">Time of day</label>
          <select id="select">
            <option value='before' >Before School Starts</option>
            <option value='morning' selected>Morning</option>
            <option value='lunchtime'>Lunchtime / Afternoon</option>
            <option value='afterschool'>After School has ended</option>
          </select>
       </td>
   </tr>
   
   
   
   <tr>
     <td colspan='2' style='text-align: center;'>
        <button class="create" id="insert-entry">Insert</button>
      </td>
   </tr>
</form>
</table>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script>
$(document).ready(function(){
  $( "#date_choice" ).datepicker({
    dateFormat: "dd/mm/yy"
  });
  
  $("#insert-entry").click(InsertIntoCal);
});

function InsertIntoCal(){
  
  var title = document.getElementById("title").value; 
  var descr = document.getElementById("description").value; 
  var date = document.getElementById("date_choice").value; 
  var time = document.getElementById("select").value; 
  
  alert(title); alert(descr); alert(date); alert(time);
}
</script>

Answer 2

对于刷新，请尝试在表单标签之外获取按钮。