Question

I’ve read several SO posts on this issue and the one I found with a possible explanation was this one.
A response in that post says “Browsers do not call the onSubmit event on the form if you call submit() programmatically.”

I’m not sure if this is the operative thing affecting my form.

My code onsubmit=”return onNewUserRegistrationCheck(this);” is 100% working
— the call to onNewUserRegistrationCheck(this) is 100% occurring.

Here’s that code:

      function onNewUserRegistrationCheck(theForm)
      {

          alert("In onNewUserRegistrationCheck()");

          if(theForm.loginname.value == "<?php echo Labels::$DEFAULTLOGINEMAILLABEL ?>" 
              || theForm.password.value == "<?php echo Labels::$DEFAULTPASSWORDLABEL ?>" )
          {  
              alert("returning false now, so -- HOPEFULLY the form doesn't submit");
              return false;
          }
     }

Here’s the form:

    <form enctype="multipart/form-data" onsubmit="return onNewUserRegistrationCheck(this);"
                 class="registerFormStyles" name="registerForm" id="regform"
                 action="regTheNewUser.php" method="post">
         <input type="text" id="loginname" name="<?php  echo Labels::$USERNAMELABEL ?>"
               style="width:260px" value="<?php echo Labels::$DEFAULTLOGINEMAILLABEL ?>" />

         <input type="password" placeholder="<?php echo Labels::$DEFAULTPASSWORDLABEL ?>" 
                  id="password" name="<?php echo Labels::$PASSWORD ?>"
            style="width:220px" class="inactive" />

         <input type="hidden" name="newUserRegister" id="newUserRegisterId">

         <input type="image" name="registerButton" value="Register" class="login-button-landing" 
                    onclick="document.registerForm.submit();">
    </form>

Notice I use a type=”image” and do a programmatic submit(). According to some SO posts, the result of
a programmatic submit() like I’m doing is this: ‘Browsers do not call the onSubmit event on the form if you call submit() programmatically’

However I’m seeing 2 alert boxes when I click on my name=”registerButton” pseudo-submit button:

  alert box #1 pops up and says:  "In onNewUserRegistrationCheck()"

then….

  alert box #2 pops up and says:  "returning false now, so -- HOPEFULLY the form doesn't submit"

Those 2 alert boxes appear when I click my name=”registerButton” button on the form.
So I must (?) misunderstand what is meant in the posts I’ve read that say
‘calling submit() doesn’t fire the onsubmit event’.

The bottom line is the form is still submitted to the file “regTheNewUser.php”
even though you can see that ‘return false’ occurred because of the alert message
being seen “returning false now, so — HOPEFULLY the form doesn’t submit”

How can I stop the form being submitted without using a type=”submit” button?
I’ve proved to myself that my onsubmit=”return onNewUserRegistrationCheck(this);”
is 100% being called. I return false but the form is submitted anyway.

How can I stop the form being submitted when I find invalid form text entry
and why doesn’t ‘return false’ above STOP my form submission?

Answer 1

Remove

onclick=”document.registerForm.submit();”

!!!

type=image IS a submit and
document.registerForm.submit() does not trigger the onsubmit event handler!

So the click first triggers the submission regardless, then the event handler kicks in because it is a submit button and then the form is sent to the server from the first submt