Google Scripts HtmlService returns undefined form data

Question

I am trying to create a web app whereby a user fills out a form and the data gets populated into a google sheet. My problem is after I fill out the form the sheet gets populated with undefined data.

How do I define this data and append to a new row each time I fill out the form.

Example was taken from here.

Code.gs

function doGet(e){
  return handleResponse(e);
}

var SHEET_NAME = "Sheet1";

var SCRIPT_PROP = PropertiesService.getScriptProperties(); // new property service

function handleResponse(e) {

  var lock = LockService.getPublicLock();
  lock.waitLock(30000);  // wait 30 seconds before conceding defeat.

  try {

    var doc = SpreadsheetApp.openById(SCRIPT_PROP.getProperty("key"));
    var sheet = doc.getSheetByName(SHEET_NAME);


    var headRow = e.parameter.header_row || 1;
    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
    var nextRow = sheet.getLastRow()+1; // get next row
    var row = []; 

    // loop through the header columns
    for (i in headers){
      if (headers[i] == "Timestamp"){ // special case if you include a 'Timestamp' column
        row.push(new Date());
      } else { // else use header name to get data
        row.push(e.parameter[headers[i]]);
      }
    }
    // more efficient to set values as [][] array than individually
    sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
    // return json success results
    return HtmlService.createHtmlOutputFromFile('index');
  } catch(e){
    // if error return this
    return ContentService
          .createTextOutput(JSON.stringify({"result":"error", "error": e}))
          .setMimeType(ContentService.MimeType.JSON);
  } finally { //release lock
    lock.releaseLock();
  }
}

function setup() {
    var doc = SpreadsheetApp.getActiveSpreadsheet();
    SCRIPT_PROP.setProperty("key", doc.getId());
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">

    <script>
    var $form = $('form#test'),
    url = 'https://...';

    $('#submit-form').on('click', function(e) {
     e.preventDefault();
     var jqxhr = $.ajax({
      url: url,
      method: "GET",
      dataType: "json",
      data: $form.serializeObject()
     }).success(
      // do something
     );
    })
    </script>
  </head>
  <body>

    <form id="test">
     <p><label>ID</label>
     <input type="number" name="ID"/></p>

     <p><label>Part Number</label>
     <input type="text" name="Part Number"/></p>

     <p><label>Description</label>
     <input type="text" name="Description"/></p>

     <p><label>Item Link</label>
     <input type="url" name="Item Link"/></p>

     <p><label>Supplier</label>
     <input type="text" name="Supplier"/></p>

     <p><label>Manufacturer</label>
     <input type="text" name="Manufacturer"/></p>

     <p><label>Pins</label>
     <input type="number" name="Pins"/></p>

     <p><label>Size</label>
     <input type="text" name="Size"/></p>

     <p><label>Order Number</label>
     <input type="number" name="Order Number"/></p>

     <p><label>Location</label>
     <input type="text" name="Location"/></p>

     <p><input type="submit" value="submit-form"/></p>

    </form>

  </body>
</html>

TheWizEd TheWizEd · Accepted Answer · 2018-08-22T14:40:47

Since you've borrowed code from another site it seems overly complicated for my taste. Here is a simpler solution IMHO. I don't see parameter e used anywhere so i removed. Also the use of html form is not needed but I left it as is

Code.gs

function doGet(){
  try {
    return HtmlService.createHtmlOutputFromFile("HTML_Test");
  }
  catch(err) {
    return ContentService
      .createTextOutput(JSON.stringify({"result":"error", "error": err}))
      .setMimeType(ContentService.MimeType.JSON);
  }
}

function submitData(data) {
  var shid = "your spreadsheet id here";
  var ss = SpreadsheetApp.openById(shid);
  var sh = ss.getSheetByName("Sheet1");
  try {
    sh.getRange(sh.getLastRow()+1,1,1,data.length).setValues([data]);
    return "success"
  }
  catch(err) {
    sh.getRange(sh.getLastRow()+1,1).setValue(err);
    return err;
  }
}

HTML_Test.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>

    <form id="test">
     <p><label>ID</label>
     <input type="number" id="ID"/></p>

     <p><label>Part Number</label>
     <input type="text" id="Part Number"/></p>

     <p><label>Description</label>
     <input type="text" id="Description"/></p>

     <p><label>Item Link</label>
     <input type="url" id="Item Link"/></p>

     <p><label>Supplier</label>
     <input type="text" id="Supplier"/></p>

     <p><label>Manufacturer</label>
     <input type="text" id="Manufacturer"/></p>

     <p><label>Pins</label>
     <input type="number" id="Pins"/></p>

     <p><label>Size</label>
     <input type="text" id="Size"/></p>

     <p><label>Order Number</label>
     <input type="number" id="Order Number"/></p>

     <p><label>Location</label>
     <input type="text" id="Location"/></p>

     <p><input type="button" value="Submit" onclick="submitForm()"/></p>

    </form>
    <script>
      function submitForm() {
        try {
          var data = [];
          data.push(document.getElementById("ID").value);
          data.push(document.getElementById("Part Number").value);
          data.push(document.getElementById("Description").value);
          data.push(document.getElementById("Item Link").value);
          data.push(document.getElementById("Supplier").value);
          data.push(document.getElementById("Manufacturer").value);
          data.push(document.getElementById("Pins").value);
          data.push(document.getElementById("Size").value);
          data.push(document.getElementById("Order Number").value);
          data.push(document.getElementById("Location").value);
          google.script.run.withSuccessHandler(success).submitData(data);
        }
        catch(err) {
          alert(err);
        }
      }
      function success(msg) {
        alert(msg);
      }
    </script>
  </body>
</html>

Google Scripts HtmlService returns undefined form data

1 Answers