HtmlService Spreadsheet form refresh

Question

I have a form ModalForm on a Google Sheet that inserts rows into the sheet. It's been working fine for months. Starting last week after submitting the form the form disappears and doesn't re-display. I'm not sure why. It executes the insert into the spreadsheet fine. I just never get the form back to insert the next record.

In my Index file, the form code:

<form id="myReceiveForm" name="receive" onsubmit="writeLine()">
  Scanner Name : <input id="user" name="user" type="text" required  /> <br> <br>
  Reference Number: <input id="reference" name="reference" type="text" required  /> <br> <br>
  Location:         <input id="location" name="location" type="text" pattern="[A-Z]{1,3}\-[A-Z]{1,2}\-\d{1,3}\-\d{1,2}" title="Location not in correct format." required/> 
  <button type="button" value="change" onclick="changeLocation()" >Change Location</button><br> <br>
  Product SKU:      <input id="sku" name="sku" type="text" value="" autofocus /> <br> <br> 
                    <input type="submit" value="Submit" >
</form>

<script type="text/javascript">


function onSuccess() {

    document.getElementById("sku").value = '';
    document.getElementById("sku").focus();
    return false;

}

function onFailureM(error) {

     alert("Invalid Sku");
    //alert("SKU" + document.getElementById("sku ").value +" doesn't exist.");
     document.getElementById("sku").value = '';
    document.getElementById("sku").focus();

}


window.writeLine = function () {


 google.script.run
   .withSuccessHandler(onSuccess)
   .withFailureHandler(onFailureM)
   .appendRowstoSheet(document.forms[0]);
} 

</script>

In My .gs file:

function openReceiving() {
  var html = HtmlService.createHtmlOutputFromFile('index');
           SpreadsheetApp.getUi().showModalDialog(html, '3PL RECEIVING');

Alan Wells Alan Wells · Accepted Answer · 2015-12-03T01:06:43

Remove onsubmit="writeLine()" from the upper form tag. Change the submit button:

<input type="submit" value="Submit" >

to a regular button with an event:

<input type="button" value="Submit" onmouseup="writeLine()">

This should fix the problem. On Nov. 12th, 2015 Google migrated to IFRAME mode.

All new scripts will default to IFRAME sandbox mode unless NATIVE mode is explicitly specified.

Google Apps Script Sunset Scedule

This is what probably caused your problem. The form submit causes a form tag to disappear. This is expected behavior that has been in place for a long time in regular HTML. But for a long time, HTML Service overrode that behavior. Now, IFRAME mode is more like regular HTML behavior.

In the SKU input field, try adding an onchange attribute if you need the form to submit after the last field is updated:

<input id="sku" name="sku" type="text" value="" autofocus onchange="writeLine()"/>

onchange Event - Reference information

List of all the events

HtmlService Spreadsheet form refresh

1 Answers