Storing an HTML selection into a variable / using that data in Google Sheets-ThrowExceptions

Exception or error:

I am almost there with an HTML form selector, which creates an array based on data from a google sheets column (done), populates that data into a dropdown box (done).

What I have been trying all weekend to figure out is how to capture the selection of the dropdown option and then lump that into a variable.

Here is my google script code that launches the HTML popup:

function ClientDropDownHTML() {
  var template = HtmlService.createTemplateFromFile('index');  
  var htmlDlg = template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME)
  //  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
//   var lastRow = sheet.getLastRow();
 //  var myArray = sheet.getRange('A2:A' + lastRow).getValues();
  .showModalDialog(htmlDlg, 'Select An Existing Client');

The HTML dropdown runs. This is the code of my HTML form, which runs the array on Google sheets data and populates it as a selector:

<!DOCTYPE html>

<form id="myForm">
  <select id="selectClient">
    <option>Choose an Existing Client</option>

    <?  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet(); ?>
   <?   var clientindex = sheet.getRange('T2').getValue(); ?>
   <?   var myArray = sheet.getRange('V2:V' + clientindex).getValues(); ?>

    <? for (var i = 0; i < myArray.length; ++i) { ?>
     <option> <?=myArray[i]?> </option>
     <? } ?>



This is where I am stuck. To behin with I need to ensure I can capture the selection so I tried to log it – I have tried something like seen here:

I end up with something like the following to my HTML:

<? var select = document.getElementById('selectClient'); ?>

<? console.log(select.selectedIndex); ?>
<? console.log(select.options[select.selectedIndex].value)  ?>

However, if I do this I just get a “document is not defined” error.

I have read different issues on this website and none of the solutions seem to work for me.

In short, I need a way to:

Reference the user’s selection from the HTML
Store it in a variable
Be able to move that variable back to Google Sheets.

Thank you so much clever coders 🙂

How to solve:

Make a selection from Select tag


function getClientList() {
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getSheetByName('Sheet15');
  var vA=sh.getRange(2,1,sh.getLastRow()-1,1).getValues();
  return vA;

function selectClient(client) { 
  SpreadsheetApp.getUi().alert('Client is ' + client);

function runTwo() {
  var ui=HtmlService.createHtmlOutputFromFile('ah2');
  SpreadsheetApp.getUi().showModelessDialog(ui, 'Select Client')


<!DOCTYPE html>
   <script src=""></script>
  <link rel="stylesheet" href="//">
  <script src=""></script>
<form id="myForm">
  <select id="sel1" onchange="selClient()"></select>
  function updateSelect(vA,id){
      var id=id || 'sel1';
      var select = document.getElementById(id);
      select.options.length = 0; 
      for(var i=0;i<vA.length;i++)
        select.options[i] = new Option(vA[i],vA[i]);

  function selClient() {$('#sel1').val());



enter image description here

Leave a Reply

Your email address will not be published. Required fields are marked *