get value from a ModalDialog in Google Sheet using getElementById returns null. What can I do?

user_14359837 0
Viewed 63

I am trying to get a selection from a Modal Dialog in order to paste the selected value in Google Sheets, but I get a null

First of all, I execute the ModalDialog with a buttom from GoogleSheets, then I select one option from the drop-down-list. Finally, I just get an empty cell.

I have the following .gs code:

//Showing the ModalDialog in Sheets
    var html = HtmlService.createHtmlOutputFromFile('Netsuite_menu')
          .setWidth(300)
          .setHeight(50);
      SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
          .showModalDialog(html, 'Select a pay method');
selection();

Then in a separated .gs file

//Getting value from html selection
function selection(sel){
   var ss = SpreadsheetApp.getActiveSpreadsheet();
   var mainSheet = ss.getSheetByName("selection_");
mainSheet.appendRow([sel,1]); //It just paste the '1'
}

And this is the Netsuite_menu.html file

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <style>
     .button {
       background-color: indigo;
       color: white;
       padding: 2px;
       border: none;
       border-radius: 3px;
     }
   </style>
   <script>
        function runIt(){
        var sel = document.getElementById("tipo").value;
        google.script.run.selection(sel);
      }
  </script>
  <body>
    <form id="form">
    <select id="tipo" name="selection" onchange="runIt()">
      <option value="default" disabled selected>-- Select a pay method--</option>
      <option value="driversA">Op. 1</option>
      <option value="driversB">Op. 2</option>
      <option value="business">Op. 3</option>
      <option value="pay">Op. 3</option>
      <option value="pex">Op. 4</option>
    </select>

    <button
    id="btn"
    class="button" 
    value="Accept" 
    name="LoginButton"
    onclick="google.script.host.close();">
    Accept
    </button>
    </form>
  </body>
</html>

Maybe this error shown in Chrome Console helps to understand the specific(s) error(s): enter image description here

google-apps-script google-sheets html
1 Answers

I believe your goal as follows.

  • You want to append the value of the selected option of the dropdown list when the accept button is clicked.

In this case, how about the following modification?

Modified script:

In this modification, your HTML side is modified.

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <style>
     .button {
       background-color: indigo;
       color: white;
       padding: 2px;
       border: none;
       border-radius: 3px;
     }
   </style>
   <script>
      function runIt(){
        var sel = document.getElementById("tipo").value;
        console.log(sel)
        google.script.run.withSuccessHandler(_ => google.script.host.close()).selection(sel);
      }
  </script>
  <body>
    <form id="form">
    <select id="tipo" name="selection">
      <option value="default" disabled selected>-- Select a pay method--</option>
      <option value="driversA">Op. 1</option>
      <option value="driversB">Op. 2</option>
      <option value="business">Op. 3</option>
      <option value="pay">Op. 3</option>
      <option value="pex">Op. 4</option>
    </select>

    <button
    id="btn"
    class="button" 
    value="Accept" 
    name="LoginButton"
    onclick="runIt()">
    Accept
    </button>
    </form>
  </body>
</html>
  • If you don't want to close the dialog when the accept button is clicked, please modify google.script.run.withSuccessHandler(_ => google.script.host.close()).selection(sel); to google.script.run.selection(sel);.

Reference:

user_71086530
Related