Google HTML Service: write values from multiple selects in form to spreadsheet

Question

I've been banging my head against this for the past several days and have finally broken down and admitted defeat. This is my first project utilizing Google HTML Service, and what I'm trying to do seems simple, but I can't get it to work. Here is what I want to happen...

1. User interacts with spreadsheet and needs to add additional rows with data
2. User selects an option from a custom menu item (got this working)
3. This selection launches an HTML service form (got this working)
4. User selects the values from two drop down lists and clicks submit
5. The selected options read read (working kind of...) and passed to the .js ( this is where I'm stuck ), which will create the rows and place the data.

Below is my code:

Function that launches the HTML Service

    function AddAdditionalApplicant() {
  var ss = SpreadsheetApp.getActiveSpreadsheet(),
      html = HtmlService.createHtmlOutputFromFile('index');
  ss.show(html);
}

index.html

<form name="AddApplicant" onsubmit="formSubmit()">

<p><b>What Type?</b></p>
    <select name="NumOfApp" id="NumOfApp">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="Cosigner">Cosigner</option>
    </select>

<p><b>How Many?</b></p>
    <select name="TypeOfApp" id="TypeOfApp">
      <option value="Roommate">Roommate</option>
      <option value="Cosigner">Cosigner</option>
    </select>

<p></p>
<div>
  <!--<input type="submit" class="button redButton" value="Submit" onclick="formSubmit()">-->
  <input type="submit" class="button redButton" value="Submit">
</div>

</form>

<script type="text/javascript">
function formSubmit() {

//var a=document.getElementById('NumOfApp').selectedIndex;
//var b=document.getElementById('NumOfApp').options;
//alert("Index: " + b[a].index + " is " + b[a].text);

//var x=document.getElementById('TypeOfApp').selectedIndex;
//var y=document.getElementById('TypeOfApp').options;
//alert("Index: " + y[x].index + " is " + y[x].text);

    google.script.run.getValuesFromForm(document.forms[0]);
}
</script>

If you uncomment the lines that are commented out you will see that the values are read correctly. Now, here is where it fails... I attempt to pass the form as an object to the function "getValuesFromFrom" using

google.script.run.getValuesFromForm(document.forms[0]);

Function getValuesFromFrom

function getValuesFromForm(AppForm){

Browser.msgbox("success")  /attempt to test and see if the execution gets this far...no go
//var a=AppForm['NumOfApp'].selectedIndex;
//var b=AppForm['NumOfApp'].options;
//Logger.log(b[a])
//
//var x=AppForm.TypeOfApp.selectedIndex;
var type = AppForm.TypeOfApp.options[AppForm.TypeOfApp.selectedIndex].value;
Logger.log(type)

}

Nothing happens... the browser msgBox does not pop up. What am I missing? Also, how can I get the form to close automatically when the "Submit" button is pressed. Any help is greatly appreciated.

EDIT: After going back and forth with @Sandy Good I realized the "AppForm" variable in the getValuesFromForm function was undefined, which means that the form object was not being passed to the function from the html. I tried another approach, and just attempted to pass a string variable to the function by altering the script portion of the html code like this

var x=document.getElementById('TypeOfApp').selectedIndex;
var y=document.getElementById('TypeOfApp').options;
//alert("Index: " + y[x].index + " is " + y[x].text);
var type=y[x].value
//    google.script.run.getValuesFromForm(y[x], b[a]);
  google.script.run.withFailureHandler(google.script.host.close)
    .getValuesFromForm(type);

This was successful, while this...

var x=document.getElementById('TypeOfApp').selectedIndex;
var y=document.getElementById('TypeOfApp').options;
//alert("Index: " + y[x].index + " is " + y[x].text);
var type=y[x]
//    google.script.run.getValuesFromForm(y[x], b[a]);
  google.script.run.withFailureHandler(google.script.host.close)
    .getValuesFromForm(type);

was not!

So the question remains, what was I doing wrong previously?

EDIT: July 10th...Working code

Function that launches the HTML Service

    function AddAdditionalApplicant() {
  var ss = SpreadsheetApp.getActiveSpreadsheet(),
      html = HtmlService.createHtmlOutputFromFile('index');
  ss.show(html);
}

index.html

<form name="AddApplicant" onsubmit="formSubmit(this)">

<p><b>How Many?</b></p>
    <select name="NumOfApp" id="NumOfApp">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>

<p><b>What Type?</b></p>
    <select name="TypeOfApp" id="TypeOfApp">
      <option value="Roommate">Roommate</option>
      <option value="Cosigner">Cosigner</option>
    </select>

<p></p>
<div>
  <!--<input type="submit" class="button redButton" value="Submit" onclick="formSubmit()">-->
  <input type="submit" class="button redButton" value="Submit">
</div>

</form>

<script type="text/javascript">
function formSubmit(argTheFormElement) {

  google.script.run
    .withFailureHandler(myFailureFunction)
    .withSuccessHandler(google.script.host.close)
    .getValuesFromForm(argTheFormElement);

}
function myFailureFunction(argError) {
  alert("There was an error: " + argError.message);
  google.script.host.close();
  }

</script>

Function that receives the Form element

function getValuesFromForm(AppFormElement){
var ss = SpreadsheetApp.getActive();
var s = ss.getActiveSheet();
var sname = s.getName();

var num = AppFormElement.NumOfApp
var type =  AppFormElement.TypeOfApp

var activeRow = s.getActiveCell().getRow();
var addCell = s.getRange(activeRow,2);

  if (type == "Roommate") {
  for(var i = 0; i < num; ++i){
    AddRoommate(activeRow,addCell,sname,s);
    }
  }else if (type == "Cosigner"){
  for(var i = 0; i < num; ++i){
    AddCosigner(activeRow,addCell,sname,s);
    }
  }
  s.setActiveRange(addCell.offset(1,1));
}

Hope this helps someone out!!!

Answer 1

Change your form tag, and add this to the function:

onsubmit="formSubmit(this)"

Then modify your function:

function formSubmit(argTheFormElement) {

Then put the variable argTheFormElement into the google.script.run.function(parameter);

google.script.run.getValuesFromForm(argTheFormElement);

That will pass all input values to the server. The get the values out, you must use the name of the name tag.

var type = AppForm.NumOfApp; //Get NumOfApp value

To make the dialog close, use:

google.script.host.close;

google.script.host.close