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>
I agree with @wicket; similarly, this is how you would debug your code.
I revised the code you have 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: