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

i've started new google app script , created simple form jquery behind handle validation, shown below.

but whenever click on <button> created, refreshes page. same thing happens <input type='submit'> button.

any ideas why doing , how 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">  <!-- css package jquery datepicker  -->    <div>    <h1>use form below enter new entry 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>

you've made simple html / jquery mistake. button has class, no unique id:

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

...yet attempt bind click() handler specific element id:

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

as result, insertintocal() never gets called.

you want class styling, keep add id so:

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

then modify binding use new id:

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

you can try out in snippet below.

wrt <input type='submit'> - not work in google apps script, there's no post handler waiting form submissions. instead, need keep extending insertintocal() handler use google.script.run send form contents 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">  <!-- css package jquery datepicker  -->    <div>    <h1>use form below enter new entry 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>