Html Question posted in
Some basic documentation can be found here.

Html – Submit button closes the dialog but then it reopens

I have function that asks users to select a name from a dropdown list. When I click the submit button, the form closes, writes the name to the selected cell, but then immediately reopens. What am I doing wrong?

function selectName(name) {

  //Select a name from the list 
  var html = HtmlService.createHtmlOutputFromFile('nameSelector')
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .setWidth(400)
    .setHeight(200);
  SpreadsheetApp.getUi().showModalDialog(html, 'Select Name:');
  if(name ==null)return; //skip the process while value is null
 
  //Set the selected value to cell A1
  var ss = SpreadsheetApp.getActiveSpreadsheet();
    ss.getRange("A1").setValue(name);
};

HTML code:

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

  <label for="name">Select a name:</label> <br/>

  <select title="Selection list" id="name" standart>
    <option value="no_choice">Click here to select</option>
    <option value='Name 1'>Name 1</option>
    <option value='Name 2'>Name 2</option>
    <option value='Name 3'>Name 3</option>
    <option value='Name 4'>Name 4</option>
    <option value='Name 5'>Name 5</option>
  </select>

  <input type="button" value="Submit" class="action" onclick="form_data()" >
  <input type="button" value="Close" onclick="google.script.host.close()" />

  <script>
  function form_data() { 
    var choice=document.getElementById('name').value;
    google.script.run.selectName(choice);
    google.script.host.close();
  }
  </script> 
  </body>
</html>

I tried putting the host.close() in a SuccessHandler in the script

  <script>
  function form_data() { 
    var choice=document.getElementById('name').value;
    google.script.run.withSuccessHandler(google.script.host.close()).selectName(choice);
  }
  </script>

and putting the host.close() in a separate function as described here:

  <script>
  function form_data() { 
    var choice=document.getElementById('name').value;
    google.script.run.withSuccessHandler(closeHelp()).selectName(choice);
  }

  function closeHelp(){
    google.script.host.close();
  } 
  </script>

Neither approach worked. The dialog continues to reopen after I click the Submit button.

I also tried the approach described here and added the SuccessHandler to the button command. It closed the dialog box, BUT the data was not written to the worksheet

  <input type="button" value="Submit" onclick="google.script.run.withSuccessHandler(google.script.host.close()).form_data(this.parentNode);google.script.host.editor.focus();" /> 
  <input type="button" value="Close" onclick="google.script.host.close()" />

  <script>
  function form_data() { 
    var choice=document.getElementById('name').value;
    google.script.run.selectName(choice);
  }
  </script>
Tags:

2

Answers


  1. 0

    The dialog is opened again because there is a logic loop.

    • The selectName opens dialog. It’s unclear how this function is run for first time.
    • The client-side code run the function selectName. This causes that a second dialog be opened.

    The solution is to use two functions, one to open the dialog and another to be run from the client-side code. Please ensure that the second function doesn’t open the same dialog again.

    Login or Signup to reply.
  2. 0

    Submit button closes the dialog

    I agree with @wicket; similarly, this is how you would debug your code.

    Here’s the code:

    I revised the code you have been given, I separated it into two functions.

    Code.gs

    function selectName() {
    //Select a name from the list 
    var html = HtmlService.createHtmlOutputFromFile('nameSelector')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setWidth(400)
      .setHeight(200);
    SpreadsheetApp.getUi().showModalDialog(html, 'Select Name:');
};

function updateCell(name){
    //Set the selected value to cell A1
    var ss = SpreadsheetApp.getActiveSpreadsheet();
    ss.getRange("A1").setValue(name);
}

    nameSelector.html

     <script>
  function form_data() { 
    var choice = document.getElementById('name').value;
    google.script.run.updateCell(choice);
    google.script.host.close();
  }
  </script>

    For your reference you can see this sample code screenshot:

    Code.gs

    nameSelector.html

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search