Form input fails to submit when in a div - forms

Question

I replicated the Developer's example code with success. When i insert a div into the form it fails. How can i submit 'form div input' to a server side function?
* i believe divs and spans are allowed inside forms from here.
* uncommenting the divs causes the div 'output' not to update.
html:
<form id="myForm">
<!--><div>-->
<input name="myEmail" type="text" />
<input type="submit" value="Submit"
onclick="google.script.run.withSuccessHandler(updateEmail)
.processForm(this.parentNode)" />
<!--></div>-->
</form>
<div id="output">
</div>
<script>
function updateEmail(response) {
var div = document.getElementById("output");
div.innerHTML = "<p>" + response + "</p>";
}
</script>
code.gs
function doGet() {
var html = HtmlService.createTemplateFromFile('index').evaluate()
.setTitle('Web App').setSandboxMode(HtmlService
.SandboxMode.NATIVE);
return html;
}
function processForm(formObject) {
var response = "";
response = formObject.myEmail;
return response;
};
Edit:
changed:
<input type="button" value="Submit"
to:
<input type="submit" value="Submit"

Answer 1

I changed the HTML file to this:
<form id="myForm">
<div>
<input name="myEmail" type="text" />
<input type="button" value="Submit"
onclick="processFormJs(this.parentNode)" />
</div>
</form>
<div id="output"></div>
<script>
window.processFormJs = function(argDivParent) {
console.log('argDivParent: ' + argDivParent);
google.script.run.withSuccessHandler(updateEmail)
.processForm(argDivParent)
};
function updateEmail(response) {
var div = document.getElementById("output");
div.innerHTML = "<p>" + response + "</p>";
}
</script>
And added a console.log('argDivParent: ' + argDivParent); statement. Then in developer tools, show the console. I get this error:
argDivParent: [domado object HTMLDivElement DIV]
Failed due to illegal value in property: 0
this.ParentNode is referring to the DIV and not the FORM. If I take out the DIV, the object returned is:
argDivParent: [domado object HTMLFormElement FORM]
Not:
argDivParent: [domado object HTMLDivElement DIV]
A DIV probably doesn't automatically put INPUT values into it's parent object.
This code does work with a DIV:
<form id="myForm" onsubmit="processFormJs(this)">
<div>
<input name="myEmail" type="text" />
<input type="button" value="Submit"/>
</div>
</form>
<div id="output"></div>
<script>
window.processFormJs = function(argDivParent) {
console.log('argDivParent: ' + argDivParent);
google.script.run.withSuccessHandler(updateEmail)
.processForm(argDivParent)
};
function updateEmail(response) {
var div = document.getElementById("output");
div.innerHTML = "<p>" + response + "</p>";
}
</script>
For debugging, you can use Logger.log("your text here"); then view the Logs.
function processForm(formObject) {
Logger.log('processForm ran: ' + formObject);
var response = "";
response = formObject.myEmail;
Logger.log('response: ' + response);
return response;
};