Passing multiple parameters from client HTML to server

Question

I have a HTML form allowing users to fill out questionnaires, I would like to send the filled form as well as some variables (accessible within the HTML).

I've successfully sent filled form on it's own with...

HTML...

<button onclick="google.script.run.processForm(this.form)">Submit</button>

Javascript...

function processForm(formData) {...}

But when trying to send this.form along with extra variables / parameters, either via two parameters method...

<button onclick="google.script.run.processForm(this.form, var1)">Submit</button>
function processForm(formData, var1) {...}

or wrapped inside an array (below), both fails...

<button onclick="google.script.run.processForm([this.form, var1])">Submit</button>
function processForm(array) {...}

I've also tried declaring the array separately but same result...

HTML...

<? var arr = [this.form, var1] ?>
<button onclick="google.script.run.processForm(arr)">Submit</button>

JavaScript...

function processForm(arr) {...}

What am I doing wrong?

Answer 1

When the form object is sent to the Google Apps Script side using google.script.run, the form object is parsed on the internal server side and the value can be retrieved as an argument of the function at the Google Apps Script side. In this case, it seems that the 2nd argument cannot be used. I'm not sure whether this is the current specification or a bug.

If you want to include a value except for the form object, as a simple modification, how about the following sample script?

Sample script:

HTML & Javascript side:

<form>
<input type="text" name="input1">
<button onclick="sample(this.form);return false;">Submit</button>
</form>
<script>
function sample(e) {
  const addValue = "sample"; // This is a value you want to add.

  const input = document.createElement('input');
  input.setAttribute('name', "addValue")
  input.setAttribute('value', addValue);
  e.appendChild(input);
  google.script.run.processForm(e);
}
</script>

• In this modification, a value you want to add is added to the form object. By this, the form object can be parsed by including the added value.

• When this HTML is opened and put a sampe value of "test" into the input tag and the button is clicked, formData of function processForm(formData) {...} is {"addValue":"sample","input1":"test"}. So, you can retrieve your added value with formData.addValue.

Note:

• As another direction, I think that the method that the form object is parsed and the value is included in the parsed value in the Javascript side can be also used. In this case, how about the following modification? In this case, in order to parse the form object, I used HtmlFormObjectParserForGoogleAppsScript_js.

  • HTML & Javascript side:

      <script src="https://cdn.jsdelivr.net/gh/tanaikech/HtmlFormObjectParserForGoogleAppsScript_js/htmlFormObjectParserForGoogleAppsScript_js.min.js"></script>
      <form>
      <input type="text" name="input1">
      <button onclick="sample(this);return false;">Submit</button>
      </form>
      <script>
      async function sample(e) {
        const addValue = "sample"; // This is a value you want to add.
    
        const obj = await ParseFormObjectForGAS(e.parentNode); // Heare, this library is used.
        obj.addValue = addValue;
        google.script.run.processForm(obj);
      }
      </script>