form submit button in floating div stopps working

35 viewscsshtmljavascript
0

When I have the submit button in the form and not in the div it works fine, it submits the data. When I put the submit button in the floating div and close the form after the div the button no longer submits the data.

document.body.addEventListener("click", doStuff);

document.getElementById("name").required = true
document.getElementById("email").required = true

var loginForm = document.getElementById("mainform");

loginForm.addEventListener("submit", (e) => {
  e.preventDefault();

  var name = document.getElementById("name");
  var email = document.getElementById("email");

  var errors = []
  if (name == "" || email == "") {  
    errors.push("Error:")
    if (name == "") {
      errors.push(" Name is Blank.")
    }
    if (email == "") {
      errors.push(" Email is Blank.")
    }
    alert(errors);    
  } else {  
    // perform operation with form input
    alert("This form has been successfully submitted!");
    console.log(`This form has a username of ${name.value} and password of ${email.value}`);
    doStuff(2)
  }
});

function doStuff(send) {
  var name = document.getElementById("name").value
  var email = document.getElementById("email").value
  if (send == 2) {
    console.log("Send2 iniatiated" + name + " " + email + " ")
    google.script.run.addOrder(name, email, )
    google.script.run.withSuccessHandler(changePage).success('success')
  }
}
<form action="" id="mainform">
  <!-- User Information -->
  <h3>Your Information:</h3>
  <label>Name:</label><input type="text" id="name">
  <label>Email Address:</label><input type="email" id="email">
  <div id="results" style="position: fixed; top: 100px; right: 100px; padding: 3px; background:radial-gradient(green, green); border: 2px double white; width: 220px; color:white">
    <button type="submit">Submit</button>
  </div>
</form>