无法通过javascript向php提交表单

Question

I have a form in html which I want to run verification in Javascript first before POST ing to PHP. However the link up to the PHP section does not seem to be working despite the fact that I have assigned names to each input tag and specified an action attribute in the form tag.

Here is the HTML code for the form:

<form id="signupform" action="signupform.php" method="post">
  <input type="text" name="Email" placeholder="Email Address" class="signupinput" id="email" />
  <br />
  <input type="password" name="Password" placeholder="Password" class="signupinput" id="passwordone" />
  <br />
  <input type="password" placeholder="Repeat Password" class="signupinput" id="passwordtwo" />
  <br />
  <input type="button" value="Sign Up" class="signupinput" onClick="verifypass()" id="submit" />
</form>

The button calls the javascript function which I use to verify the values of my form before sending to php:

function verifypass() {
  var form = document.getElementById("signupform");
  var email = document.getElementById("email").value;
  var password1 = document.getElementById("passwordone").value;
  var password2 = document.getElementById("passwordtwo").value;
  var emailcode = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

      if (emailcode.test(email)) {
        if (password1.length > 6) {
          if (password1 == password2) {
            form.submit(); //this statement does not execute
          } else {
            $("#passwordone").notify("Passwords do not match!", {
              position: "right"
            })
          }
        } else {
          $("#passwordone").notify("Password is too short!", {
            position: "right"
          })
        }
      } else {
        $("#email").notify("The email address you have entered is invalid.", {
          position: "right"
        })
      }
    }

Answer 1

For some reason, some JavaScript implementations mix up HTML element IDs and code. If you use a different ID for your submit button it will work (id="somethingelse" instead of id="submit"):

<input type="button" value="Sign Up" class="signupinput" onClick="verifypass()" id="somethingelse" />

(I think id="submit" has the effect that the submit method is overwritten on the form node, using the button node. I never figured out why, perhaps to allow shortcuts like form.buttonid.value etc. I just avoid using possible method names as IDs.)