Question 336232 in Html Question posted in
Some basic documentation can be found here.

Html – form submit button in floating div stopps working

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>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I was able to fix after some help from the comments- I added it in its own seperate div and it appears to be working now:

       <div id="button" style="position: fixed; top: 80px; padding: 3px; width: 80px; color:white"><button type="submit">Submit</button></div>

  2. 0 
     <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>

<script> 
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)
  }
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search