How to get data from html form using Google App Script

Question

How I can pass/get data from the html form in Google apps script? I was trying many times but still can't get the right code. I hope someone can help me here with this problem.

Code.gs

function doGet(e) {
    return HtmlService.createHtmlOutputFromFile('Index');
}

function getValuesFromForm(form) {
    var firstname = form.lastname,
        lastname = form.firstname,
        ss = SpreadsheetApp.openById('1XvrQFzVTlCqtB6HGggeGKraaLrd_8wdw6rAGVNVxYC0');
    var sheet = ss.getSheets()[0];
    sheet.appendRow([firstname, lastname]);
}

Index.html

<form>
  First name: <input id="firstname" name="firstName" type="text" />

  Last name: <input id="lastname" name="lastName" type="text" />

  <input onclick="google.script.run.getValuesFromForm(this.form)" type="button" value="Add Row" />
</form>

What's the issue with the code you have posted in question ? — Umair Mohammad
– Umair Mohammad, Commented Mar 1, 2018 at 12:00
It saying undefined value when i execute it. I cant get the value of those textbox from the form to the function — MOO
– MOO, Commented Mar 1, 2018 at 12:02
when i click the button in the form. the getValuesFromForm will call it. but not getting value from it — MOO
– MOO, Commented Mar 1, 2018 at 12:04
Ok, I have posted the answer. Let me know if you face any issue. — Umair Mohammad
– Umair Mohammad, Commented Mar 1, 2018 at 12:07

Umair Mohammad · Accepted Answer · 2018-03-01 12:17:22Z

1

Two things :

We have to pass parent , so that we can access it's children. this.form will send nothing[I guess] because this[input button] doesn't have form child. Rather you should send form[using parentNode or getElement()]
We have to use field name and not id [currently you are using id, cross check it, see capitalization]

So you have two options :

Change name of fields to match that in script

<form id='myForm'>
    First name: <input id="firstname" name="firstname" type="text" /> Last name: <input id="lastname" name="lastname" type="text" />
    <input onclick="google.script.run.getValuesFromForm(document.getElementById('myForm'))" type="button" value="Add Row" />
</form>

OR

Change name used in script to match that in form

use form.firstName and form.lastName in script in code.gs [instead of form.firstname and form.lastname]

edited Mar 1, 2018 at 12:17

answered Mar 1, 2018 at 12:05

Umair Mohammad

4,6432 gold badges22 silver badges35 bronze badges

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

3 Comments

MOO Over a year ago

still getting undefined value

Umair Mohammad Over a year ago

Cool. I have updated the answer to help understanding the issue instead of only getting it solved.

MOO Over a year ago

ohhh. I see. thats why its getting null because of the name of the textboxes. my bad XD

Trashman · Accepted Answer · 2022-03-08 17:34:22Z

0

Another way is to change your form to use a "submit" type form and put the action in the main form field, as shown below:

<form action="javascript:void(0)" onsubmit="google.script.run.getValuesFromForm(this)">
  First name: <input id="firstname" name="firstName" type="text" />

  Last name: <input id="lastname" name="lastName" type="text" />

  <input type="submit" value="Add Row" />
</form>

I believe the .gs code in your original question will work unmodified with this form.

answered Mar 8, 2022 at 17:34

Trashman

1,6652 gold badges21 silver badges33 bronze badges

Collectives™ on Stack Overflow

How to get data from html form using Google App Script

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related