CODEWITHSUNDEEP
htmlgoogle-apps-script
JForgie
JForgie

Reputation: 193

Pull value from HTML combo box and pass to a function

I am using google apps script to build a custom ui in a google DOC.

The UI is built with HTMl. I am trying to pass the value of an html combobox to a server side function.

What am I missing to grab the value of the combobox and pass it along?

.html

<form id="cboPhase">
  <select id="cboPhase">
    <option>Sales</option>
    <option>Operation(Quote/ROM/BOM)</option>
    <option>Design Engineering</option>
    <option>Construction</option>
    <option>System Performance</option>
    <option>Maintenance</option>
  </select>
  <br>
  <br>
  <div>
    <input type="submit" class="button redButton" value="Submit" 
    onclick="google.script.run
   .withSuccessHandler(buttonClicker)
   .phaseName(document.getElementById('cboPhase').value )">
  </div>
</form>

.gs

function phaseName(formObject){
  showAlert();
  var cboName = formObject;
  var sheetToWriteTo = ss.getSheetByName('Project');
  var rowData = [docId,activeUser,cboName, new Date()];
  docBody.appendParagraph(cboName);
  sheetToWriteTo.appendRow(rowData);
  Logger.log(cboName);
}

I know that the server function is being called correctly because the showAlert function is running. This same method of document.getElementByID() is working correctly in another part of the html file with a text box. Should the combobox be any different?

Upvotes: 1

Views: 1369

Answers (1)

Alan Wells
Alan Wells

Reputation: 31300

If you want to avoid using a script tag, you can put an onsubmit attribute into the FORM tag:

<form id="cboPhase" onsubmit="google.script.run
 .phaseName(this)">

Note the "this" keyword as the parameter. Remove the onclick attribute from the INPUT tag:

<input type="submit" class="button redButton" value="Submit">

In your case, you only have a SELECT box in the form. If there were more input elements in the form, you would have multiple values inside of an array. What I'm getting returned in the server is this: (assuming that I selected the "Construction" choice):

{=Construction}

With an input field added, you would get this:

{=[Construction, test input]}

I don't think that you can use document.getElementById('cboPhase').value as a parameter in google.script.run.funcName(). It's returning NULL.

Your not passing an object, you are passing a value:

document.getElementById('cboPhase').value

If you don't have a <script> tag with a function named buttonClicker() in it, then the HTML will have an error when it is served to the browser.

Uncaught ReferenceError: buttonClicker is not defined

So, if you want a withSuccessHandler, you need a <script> tag. If you are going to have a <script>, you might as well put the google.script.run into the script tag instead of the onClick attribute of the Input tag.

<script>
  function fncCallServerCode() {
    var valueToPass = document.getElementById('cboPhase').value;

    google.script.run
     .withSuccessHandler(buttonClicker)
     .phaseName(valueToPass);
  };

  function buttonClicker(argReturnValue) {
    alert('The code ran: ' + argReturnValue);
  }
</script>

Your input would need to look like this:

<div>
  <input type="submit" class="button redButton" value="Submit" onclick="fncCallServerCode()">
</div>

Upvotes: 1

Related Questions