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, Jun 27 '19 at 13:45

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

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;

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

html

Update

html

gs

Update 2

Revised gs

1 Answers1

Script Logic:

Snippet: