How does one save an HTML dropdown value in a Google Script context?

Question

I have a dropdown menu in an html page. What I do not know how to code is how to save the menu option the user chooses, so that it can be moved into the gs file.

I have looked through the SO site for the code, but all I seem to find are answers involving javascript, php, etc. (Change Link with HTML Dropdown and Fill HTML dropdown box with external JSON file data for instance).

The test code I am trying to build is below:

html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
<select id="Instrument">
       <option>1</option>
       <option>2</option>
       <option>3</option>
    </select>

<!--Need code here to save the option chosen above and code that 
allows for the option chosen to be moved to the gs side of this.-->

  </body>
</html>

I expect to be able to "save" the option and pass it to the Google script so it can be further manipulated there.

For instance, were I dealing simply with input fields, rather than data from a dropdown, I would write something like this:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>

    <input id="idNewSongTitle" type="text" placeholder="Song Title"><br><br>
    <input id="idNewSongWriters" type="text" placeholder="Song Writers">*<br><br>
    <button onclick="saveUserInput()">Create New Lyric Doc</button></center><br><br>
    <script>
      window.saveUserInput = function() {
        var docName = document.getElementById('idNewSongTitle').value;
        var songTitle = document.getElementById('idNewSongTitle').value;
        var songWriters = document.getElementById('idNewSongWriters').value;
        console.log('songTitle: ' + songTitle)
        google.script.run       
          .withSuccessHandler(openNewDoc)
          .createNewLandscapeLyric({docName:docName,songTitle:songTitle, songWriters: songWriters})
      }
       function openNewDoc(results){
           window.open(results.url, '_blank').focus();
       }
    </script>
  </body>
</html>

Update

OK. Thank you @TheMaster. Now we're cookin'!

I used your 2nd suggestion and put it into a real world version I am working with as follows:

html

<!DOCTYPE html>
<html>
  <head>
<base target="_top" />
  </head>
  <body>
<select id="InstrNum" name="Instrument Number">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select><br><br>
<button onclick="saveUserInput()">Continue</button><br><br>
    
<script>
   window.saveUserInput = function() {
   var instrNum = document.getElementById('InstrNum').value;
   console.log('instrNum: ' + instrNum)
        google.script.run       
           .withSuccessHandler(openCatalog)
           .insertInfo({instrNum:instrNum})
          
   function openCatalog(results){
           window.open(results.url, '_blank').focus();
       }
}
</script>
  </body>
</html>

gs

function onCheck(e) {
    var ss = SpreadsheetApp.getActiveSpreadsheet();
    var sheet = ss.getActiveSheet();
    var cell= sheet.getActiveCell().getColumn();
    var col = ss.getRange('Perform').getColumn(); 
        if (cell == col){
    var html = HtmlService.createHtmlOutputFromFile('index')
      .setWidth(400)
      .setHeight(300);
    SpreadsheetApp.getUi()
      .showModalDialog(html, 'Performance Information');
}
   }
function insertInfo(objArgs){
    var instrNum = objArgs.instrNum;
    var ss = SpreadsheetApp.getActiveSpreadsheet();
    var sheet = ss.getActiveSheet();
    var cell= sheet.getActiveCell();
    var oneCellRight = cell.offset(0, 1)
    oneCellRight.setValue(instrNum);

}

It does exactly what I expected, except for two issues. (I.e., when I look at the SS, the value from the dropdown menu choice has been entered into the target cell.)

The two things not happening which I need to happen are:

The dialog box does not close when I click the "Continue" button.
The Catalog SS is not opened.

Any ideas on that?

Update 2

As @TheMaster notes, my questions immediately above are unrelated. I took a look at some similar code I have and realized I forgot the return statement. So, I added it as below and it solved one issue: opened up a new Catalog SS. However, it did not (and apparently one cannot) close the dialog, nor the original open Catalog SS page.

Revised gs

function insertInfo(objArgs){
    var instrNum = objArgs.instrNum;
    var ss = SpreadsheetApp.getActiveSpreadsheet();
    var url = ss.getUrl()
    Logger.log(url)
    var sheet = ss.getActiveSheet();
    var cell= sheet.getActiveCell();
    var oneCellRight = cell.offset(0, 1)
    oneCellRight.setValue(instrNum);
    return {
        url: url
  };

That concludes this broadcast.

Your update and the new questions isn't even related to the original question. It'll be better to ask a new question. — TheMaster
– TheMaster, Commented Jun 27, 2019 at 13:45

Community · Accepted Answer · 2020-06-20 09:12:55Z

Script Logic:

change event is fired every time the option is changed and committed in select. You can use that to send data to server.
Alternatively, You can use your saveUserInput function to get the select's value. If you want to enforce some sort of data validation, use <form> instead.

Snippet:

<!DOCTYPE html>
<html>
  <head>
<base target="_top" />
  </head>
  <body>
<select id="Instrument" name="InstrumentSelect">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

<!--Code to save the option chosen above and code that 
allows for the option chosen to be moved to the gs side of this.-->
<script>
  handleOptionChange = function(e) {
    console.info(e.target.value);
    google.script.run.optionChanged(e.target.value);
  };
  document
    .getElementById('Instrument')
    .addEventListener('change', handleOptionChange);
</script>
  </body>
</html>

OR

var instrument = document.getElementById('Instrument').value;

Collectives™ on Stack Overflow

How does one save an HTML dropdown value in a Google Script context?

html

Update

html

gs

Update 2

Revised gs

1 Answer 1

Script Logic:

Snippet:

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

html

Update

html

gs

Update 2

Revised gs

1 Answer 1

Script Logic:

Snippet:

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related