onClick on Google Script not working for HTML Form-ThrowExceptions

Exception or error:

I’m trying to create a html pop up that will then populate a gsheet. I’ve basically used the same solution found here. For some strange reason though, it isn’t working. When I click the submit button on the HTML pop up box after filling out all the data, it doesn’t respond. I click, it doesn’t close, append the data, or do anything.

The html pop up is created, but the Submit button doesn’t work. I am almost sure that it is has something to do with the onClick method I am using.

Here is the code I am working with:

gs file

function registerCustomer() {
  var html = HtmlService.createHtmlOutputFromFile('customerMenu.html').setSandboxMode(HtmlService.SandboxMode.IFRAME);
  SpreadsheetApp.getUi()
       .showModalDialog(html, 'Add Customer');
}

function customerAdd(customerForm) {
  var ss = SpreadsheetApp.getActiveSpreadsheet;
  var cus_db = ss.getSheetByName("customer_db");

  cus_db.appendRow(["  ", customerForm.name_1, customerForm.name_2, customerForm.phone, customerForm.age, customerForm.channel]);
  return true;
}  

html file

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
  </head>
  <br>
  <customerForm>
    First Name:<br>
    <input type="text" name="name_1">
    <br>
    Second Name:<br>
    <input type="text" name="name_2">
    <br>
    Phone Number:<br>
    <input type="text" name="phone">
    <br>
    Age:<br>
    <input type="number" name="age">
    <br>
    How did they hear about us?:<br>
    <input type="text" name="channel">
    <br><br>
     <input type="submit" value="Add Customer" class ="submit" 
           onclick="google.script.run
           .withSuccessHandler(google.script.host.close)
           .customerAdd(this.parentNode)" />
    </customerForm>
</html>

I’ve scoured stackoverflow for almost every solution:

  1. I am running two pop ups so I changed the function names based on the advice here

  2. I tried to use the ”’document.forms[0]”’ method found here also didn’t work

What am I missing?

How to solve:

onClick on Google Script working for HTML Form

GS:

function registerCustomer() {
  var html = HtmlService.createHtmlOutputFromFile('ah2')
  SpreadsheetApp.getUi().showModelessDialog(html, 'Add Customer');
}

function customerAdd(obj) {
  var ss = SpreadsheetApp.getActive();
  var sh=ss.getSheetByName('Sheet15');
  sh.appendRow(["", obj.name_1, obj.name_2, obj.phone, obj.age, obj.channel]);
  return true;
}  

html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
  </head>
  <body>
  <form>
    First Name:<br>
    <input type="text" name="name_1" />
    <br>
    Second Name:<br>
    <input type="text" name="name_2"/>
    <br>
    Phone Number:<br>
    <input type="text" name="phone"/>
    <br>
    Age:<br>
    <input type="number" name="age"/>
    <br>
    How did they hear about us?:<br>
    <input type="text" name="channel"/>
    <br><br>
     <input type="button" value="Add Customer" onClick="addCust(this.parentNode);" />
    </form>
    <script>
      function addCust(obj) {
        google.script.run
        .withSuccessHandler(function(){google.script.host.close();})
        .customerAdd(obj);
      }
    </script>
    </body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *