Question

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

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

为什么这样做以及如何预防呢？

＆＃13;

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

＆＃13;

Answer 1

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

id

...但您试图通过<button class="create">Insert</button> ^^^^^^^^^^^^^^将click()处理程序绑定到特定元素：

id

因此，$("#create").click(InsertIntoCal); ^^^^^^^永远不会被调用。

您希望InsertIntoCal()用于样式设置，所以请保留它，但添加class，如下所示：

id

然后修改绑定以使用新的<button class="create" id="insert-entry">Insert</button>：

id

您可以在下面的代码段中试用。

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

InsertIntoCal()

Answer 2

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

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

2 个答案: