Getting value of arbitrary form element in Google Apps Script web app

Question

I have a Google Apps Script web app which has a form attached, for example:

<form id="form">
    <input type="range" min="0" max="3" name="mb1" value="0">
    <input type="range" min="0" max="3" name="mb2" value="0">
    <input type="range" min="0" max="3" name="mb3" value="0">
    etc...
    <input id="submit" type="submit" style="display: none" onclick="this.value='Submitting ...'; google.script.run.withSuccessHandler(formSubmitted) .writeForm(this.parentNode); return false;">
</form>

The Code.gs file has a writeForm(form) function, which can access the form input values like so:

var mb1 = form.mb1;
var mb2 = form.mb2;
etc...

However, this approach is inefficient with many such inputs (I have around 80). Much better would just be to get the values when they're being processed in a loop, like so:

for(var i = 0; i <= 80; i++) {
    var formItemID = "mb"+i;
    console.log(form.formItemID);
}

However, this of course does not work, as it looks for form inputs with the id "formItemID". I've taken a look at some functionality of the HTMLFormElements class which should be being sent, but Apps Script doesn't seem to implement this fully, and I can't find documentation of the form.ItemName property. Is there a way to achieve this functionality without calling for each form input separately?

TheWizEd · Accepted Answer · 2019-02-21 18:24:12Z

You could always just loop through the form elements and get the input values. This will send an array to the server.

<!DOCTYPE html>
  <html>
    <head>
    <base target="_top">
  </head>
  <body>
    <form id="form" name="form">
      <input class="range" type="range" min="0" max="3" value="0">
      <input class="range" type="range" min="0" max="3" value="0">
      <input class="range" type="range" min="0" max="3" value="0">
      <br>
      <input id="button" type="button" onclick="onClick()">
    </form>
    <script>
      function onClick() {
        var form = document.getElementById("form");
        var vals = [];
        for( var i=0; i<form.elements.length; i++ ) {
          if( form.elements[i].className === "range" ) {
            vals.push(form.elements[i].value);
          }
        }
        google.script.run.getForm(vals);
      }
    </script>
  </body>
</html>

TheMaster · Accepted Answer · 2019-02-21 19:05:39Z

0

Server side, Your form is sent as a object with key as input name and value as input values. Your form will look like:

{
 mb1:0,
 mb2:1,
 mb3:0
}

To access the values, You can use form.mb1 as you've used or form['mb1']. To use variables as keys, always use the bracket [] notation

for(var i = 0; i <= 80; i++) {
    var formItemID = "mb"+i;
    console.log(form[formItemID]);//Note bracket notation 
}

Or without a for loop,

var valuesArr = Object.keys(form).map(function(key){return form[key];})

answered Feb 21, 2019 at 19:05

TheMaster

51.6k7 gold badges76 silver badges102 bronze badges

1 Comment

Ethan Chapman Over a year ago

Perfect! This works without me having to restructure any other code.

Collectives™ on Stack Overflow

Getting value of arbitrary form element in Google Apps Script web app

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related