Form input fails to submit when in a div

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;
};