GAS button or input[submit] keeps refreshing page? why?

Question

I've just started a new Google app script and created a simple form with some jQuery behind it to handle the validation, shown below.

But whenever I click on the <button> I created, it just refreshes the page. The same thing happens with a <input type='submit'> button.

Any ideas why this is doing his and how to prevent it?

<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

You've made a simple HTML / jQuery mistake. Your button has a class, but no unique id:

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

...yet you attempt to bind a click() handler to a specific element by id:

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

As a result, InsertIntoCal() never gets called.

You want that class for styling, so keep it but add an id like so:

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

Then modify the binding to use the new id:

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

You can try it out in the snippet below.

WRT <input type='submit'> - that will not work in Google Apps Script, there's no POST handler waiting for form submissions. Instead, you need to keep extending your InsertIntoCal() handler to use google.script.run to send the form contents to a server-side handler.

<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

For the refresh, try to get the button outside of the form tags.