I'm having the problem described in Google Script - Sidebar button keeps opening a new tab. I initially was using:
<input type="submit" value="Submit" />
But ran into a problem when the submit was creating a new tab as described in that question. I tried to change to the approach discussed in the post:
<button type='button'>
but this results in an unclickable button:
Now I've changed it back to :
<input type="submit" value="Submit" />
Now I can close the form on clicking but the form does not seem to submit anything to the server side when I check the logs I don't see anything submitted on the server side.
How can I get this working and submit the form? The Entire template is below and should be freestanding:
<!DOCTYPE html>
<html>
<head>
<base target="_top" />
<script>
// Prevent forms from submitting.
function preventFormSubmit() {
var forms = document.querySelectorAll('forms');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
window.addEventListener('load', preventFormSubmit);
function handleFormSubmit(formObject) {
google.script.run
.withSuccessHandler(google.script.host.close())
.processRowPopupHTML(formObject);
}
function updateUrl(url) {
var div = document.getElementById('output');
div.innerHTML = '<a href="' + url + '">Sent!</a>';
}
</script>
</head>
<body>
<form id="myForm" onsubmit="handleFormSubmit(this)">
<div id="texts"></div>
<div>
<label for="optionList">Click me</label>
<select
id="optionList"
ondblclick="addText(event)"
name="optionList"
size="5"
>
</select>
</div>
<br />
<br />
<div>
<textarea id="message" name="message" rows="10" cols="30"></textarea>
</div>
<div id="textboxes"></div>
<div id="insert"></div>
<input type="submit" value="Submit" />
</form>
<div id="output"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>
<link
href="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css"
rel="stylesheet"
/>
<script>
// var canned = <?= canned ?>; //PASSED IN JSON
var mycannedObj = ['hi', 'hi', 'hi', 'hi', 'hi'];
function addText(event) {
var targ = event.target || event.srcElement;
document.getElementById('message').value +=
' ' + targ.textContent || targ.innerText + ' ';
}
function buildOptionList(options, elementId) {
var list = $('#' + elementId);
list.empty();
for (var i = 0; i < options.length; i++) {
console.log(options[i]);
list.append(
'<option value="' +
options[i].toLowerCase() +
'">' +
options[i] +
'</option>'
);
}
}
(function() {
buildOptionList(mycannedObj, 'optionList');
})();
</script>
</body>
</html>
EDIT:
After changing code to :
google.script.run.withSuccessHandler(google.script.host.close).processRowPopupHTML(formObject);
and clicking the button I again got a new tab opened with:
https://n-g6b................tas763ea-0lu-script.googleusercontent.com/userCodeAppPanel?optionList=hi&message=+hi
The console shows:
I do see:
[19-02-25 17:05:06:900 PST] {optionList=hi, message= hi}
In the logs, as expected, so that is good. But how do I stop the tab from opening up?
See Question&Answers more detail:os
