onClick on Google Script not working for HTML Form

Question

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:

I am running two pop ups so I changed the function names based on the advice here
I tried to use the '''document.forms[0]''' method found here also didn't work

What am I missing?

It summed be <form> not <customerForm>... not sure where you got that — TheMaster
– TheMaster, Commented Feb 23, 2020 at 19:07

Cooper · Accepted Answer · 2020-02-23 18:07:11Z

3

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>

answered Feb 23, 2020 at 18:07

Cooper

64.2k7 gold badges29 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Sam Over a year ago

thanks for the speedy response. Still not working. The response is a dud. I am now suspecting there is a settings issue at this rate. Your code is doing exactly the same thing as mine was.

Cooper Over a year ago

Did you get the HTML file name correct and I think I’m using a sheet name rather than active shee

Cooper Over a year ago

Also this is not a templates file

Sam Over a year ago

Yes I am using the correct file name, but let me check again. I don't understand though what you mean by templates file, could you explain a bit more?

Sam Over a year ago

I've accepted and upvoted your answer because it works. Please note though it does not work in the new App Script runtime powered by Chrome V8, which seemed to be the problem. As soon as I disabled it, the script ran.

|

Collectives™ on Stack Overflow

onClick on Google Script not working for HTML Form

gs file

html file

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

gs file

html file

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related