javascript - 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>
        ^^^^^^^^^^^^^^

...但您尝试绑定(bind) click()通过 id 处理特定元素:

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

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

你想要那个class为了样式，所以保留它但添加一个 id像这样:

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

然后修改绑定(bind)以使用新的 id :

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

您可以在下面的代码片段中尝试一下。

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>