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?

Could you explain all the **didn't/doesn't work** in your question? See [mcve] — TheMaster, Feb 23 '20 at 19:47
I've edited the question to include the didn't work: basically the button is supposed to trigger an action, either append or close. It doesn't do anything and the box just stays there un-moved by my clicking :( — Sam, Feb 23 '20 at 20:17
@TheMaster could you explain a bit more? do you mean adding in a line for browser console to check the logs? — Sam, Feb 25 '20 at 04:47
When you click submit, browser will throw a error in the console. You can access the console in your browser through menu>web dev tools — TheMaster, Feb 25 '20 at 06:10

score 3 · Accepted Answer · answered Feb 23 '20 at 18:07

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 '20 at 18:07

Cooper

59,616
6
23
54

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. – Sam Feb 23 '20 at 19:18
Did you get the HTML file name correct and I think I’m using a sheet name rather than active shee – Cooper Feb 23 '20 at 20:28
Also this is not a templates file – Cooper Feb 23 '20 at 20:30
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 Feb 25 '20 at 04:46
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. – Sam Feb 25 '20 at 04:56
Well I believe I saw an evaluate in your HtmlService command. But perhaps I was wrong. But you do have `google.script.host.close` and should be `google.script.host.close();` – Cooper Feb 25 '20 at 04:57
In looking at your code it looked to me like you were running the old version. Perhaps that's some we should all add to our questions these days. – Cooper Feb 25 '20 at 05:00
I just tested it with the new runtime and in the new editor and it works just fine so who ever is having a problem I suspect you are doing something wrong. Like maybe you hmtl file name or your sheet name is incorrectt – Cooper Feb 22 '22 at 02:19
Maybe they've made them backward compatible now. – Sam Mar 07 '22 at 10:38

onClick on Google Script not working for HTML Form

gs file

html file

1 Answers1

Linked