title: Google script web app goes blank page after submit
body: <p>I have a google script web app with input fields. I would like all of those fields is input required if user want to submit data. Therefore, I used "required" attribute and call submit event to transfer data to google sheet. Unfortunately, using form tag and submit event direct the page to a blank page but if I remove <code>&lt;form&gt;</code> tag I cannot use required attribute. I have tried a callback of doGet function to refresh the page but nothing happen. So, is there any solution for this?</p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;style&gt;
          html {
              touch-action: manipulation;
          }
      &lt;/style&gt;
      &lt;!-- &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"&gt;--&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"&gt;
      &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
  
      &lt;!-- jQuery library --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;!-- Latest compiled JavaScript --&gt;
      &lt;!-- &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"&gt;&lt;/script&gt;--&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"&gt;&lt;/script&gt;
      &lt;title&gt;Resin Reminder Form&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width"&gt;
  
      &lt;body&gt;
          &lt;div class="container"&gt;
              &lt;form id="resinSubmit"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="input-field col s6 m6"&gt;
                          &lt;input placeholder="Nhập tên người cấp nhựa" id="first_name" type="text" required class="validate"&gt;
                          &lt;label for="first_name"&gt;Tên người cấp&lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="input-field col s6 m6"&gt;
                          &lt;select id="cellName" required&gt;
                              &lt;option value="" disabled selected&gt;Chọn cell cần cấp nhựa&lt;/option&gt;
                              &lt;option value="Cell 1"&gt;Cell 1&lt;/option&gt;
                              &lt;option value="Cell 2"&gt;Cell 2&lt;/option&gt;
                              &lt;option value="Cell 3"&gt;Cell 3&lt;/option&gt;
                              &lt;option value="Cell 4"&gt;Cell 4&lt;/option&gt;
                              &lt;option value="Cell 5"&gt;Cell 5&lt;/option&gt;
                              &lt;option value="Cell 6"&gt;Cell 6&lt;/option&gt;
                              &lt;option value="Cell 7"&gt;Cell 7&lt;/option&gt;
                              &lt;option value="Cell 8"&gt;Cell 8&lt;/option&gt;
                              &lt;option value="Cell 9"&gt;Cell 9&lt;/option&gt;
                              &lt;option value="Cell 10"&gt;Cell 10&lt;/option&gt;
                              &lt;option value="Cell 11"&gt;Cell 11&lt;/option&gt;
                              &lt;option value="Cell 12"&gt;Cell 12&lt;/option&gt;
                              &lt;option value="Cell 13"&gt;Cell 13&lt;/option&gt;
                              &lt;option value="Cell 14"&gt;Cell 14&lt;/option&gt;
                              &lt;option value="Cell 15"&gt;Cell 15&lt;/option&gt;
                              &lt;option value="Cell 16"&gt;Cell 16&lt;/option&gt;
                              &lt;option value="Cell 17"&gt;Cell 17&lt;/option&gt;
                              &lt;option value="Cell 18"&gt;Cell 18&lt;/option&gt;
                              &lt;option value="Cell 19"&gt;Cell 19&lt;/option&gt;
                              &lt;option value="Cell 20"&gt;Cell 20&lt;/option&gt;
                          &lt;/select&gt;
                          &lt;label&gt;Chọn cell cấp nhựa&lt;/label&gt;
                      &lt;/div&gt;
                      &lt;div class="input-field col s6 m6"&gt;
                          &lt;select placeholder="Chọn tên máy cần cấp nhựa" id="machineName" required&gt;&lt;/select&gt;
                          &lt;label&gt;Chọn máy cấp nhựa&lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="input-field col s6 m6"&gt;
                          &lt;input placeholder="nhập batch nhựa ở đây" type="text" id="batch" required class="validate"&gt;
                          &lt;label for="batch"&gt;Nhập batch nhựa&lt;/label&gt;
                      &lt;/div&gt;
                      &lt;div class="input-field col s4 m4"&gt;
                          &lt;input placeholder="nhấn vào đây để chọn" name="time" type="text" required class="timepicker" id="hora"&gt;
                          &lt;label for="timepicker"&gt;Chọn thời gian hết nhựa&lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col s4 m4"&gt;
                          &lt;button data-target="modal1" class="btn waves-effect waves-light modal-trigger" type="submit" name="action" id="btnSubmit"&gt;Xác nhận
                              &lt;i class="material-icons right "&gt;send&lt;/i&gt;&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
          &lt;script&gt;
              $(document).ready(function() {
                  $('#cellName').formSelect();
                  $('#hora').timepicker({
                      defaultTime: 'now',
                      twelveHour: false
                  });
              });
  
              function callEvent() {
                  var cellSelectedValue = $('#cellName').val();
                  google.script.run.withSuccessHandler(machineOption).machineNameByCell(cellSelectedValue);
                  var machineNameDropBoxhtml = '';
  
                  function machineOption(data) {
                      try {
                          for (var i = 0; i &lt; data.machineNameArray.length; i++) {
                              machineNameDropBoxhtml += '&lt;option value=' + data.machineNameArray[i] + '&gt;' + data.machineNameArray[i] + '&lt;/option&gt;';
                          }
                          $('#machineName').html(machineNameDropBoxhtml);
                          $('#machineName').formSelect();
                      } catch (error) {
                          alert(error);
                      }
                  }
              }
              $('#cellName').change(function(e) {
                  e.preventDefault();
                  callEvent();
              });
              $('#cellName').on('touchstart', function(e) {
                  e.preventDefault();
                  callEvent();
              });
  
              $('#resinSubmit').submit(function(e) {
                  e.preventDefault;
                  var helperName = $('#first_name').val();
                  var cellSelectedValue = $('#cellName').val();
                  var machineSelected = $('#machineName').val();
                  var resinBatch = $('#batch').val();
                  var outOfResinTime = $('#hora').val();
                  google.script.run.getData(helperName, cellSelectedValue, machineSelected, resinBatch, outOfResinTime);
              });
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>GS code:</p>
  
  <pre><code>function doGet(request) {
  var htmlTemplate = HtmlService.createTemplateFromFile('formSubmitPage');
  return htmlTemplate.evaluate();
  }
  
  function machineNameByCell(cellName) {
      var resinFormSubmitSheet = SpreadsheetApp.openById('1EmJMwV7AloL-Npb5Kz-d7WstEF0z-eqDzc5Bpk39x1o');
      var machineNameDataSheet = resinFormSubmitSheet.getSheetByName('machineName');
      var machineNameArray = [];
      for (var i = 1; i &lt; 20; i++) {
          if (cellName == machineNameDataSheet.getRange(1, i).getValue()) {
              var j = 2;
              while (machineNameDataSheet.getRange(j, i).getValue() != "") {
                  machineNameArray.push(machineNameDataSheet.getRange(j, i).getValue());
                  j++;
              }
              break;
          }
      }
      this.machineNameArray = machineNameArray;
      return this;
  }
  
  function getData(helperName, cell, machine, batch, outOfResinTime) {
      var resinFormSubmitSheet = SpreadsheetApp.openById('1EmJMwV7AloL-Npb5Kz-d7WstEF0z-eqDzc5Bpk39x1o');
      var submitDataSheet = resinFormSubmitSheet.getSheetByName('resinReminderData');
      var lastUpdatedRow = submitDataSheet.getRange('A1:A').getLastRow();
      console.log(helperName);
      console.log(cell);
      console.log(machine);
      console.log(batch);
      console.log(outOfResinTime);
      submitDataSheet.getRange(lastUpdatedRow + 1, 1).setValue(helperName);
      submitDataSheet.getRange(lastUpdatedRow + 1, 2).setValue(cell);
      submitDataSheet.getRange(lastUpdatedRow + 1, 3).setValue(machine);
      submitDataSheet.getRange(lastUpdatedRow + 1, 4).setValue(batch);
      submitDataSheet.getRange(lastUpdatedRow + 1, 5).setValue(outOfResinTime);
  }
  </code></pre>