Submit form with alternative to preventDefault

Question

I'm struggling to get my website's sign-in functionality to work across all browsers - the closest I can get being an "ReferenceError: event is not defined" error in Firefox.

I know there's a bunch of existing posts on preventDefault being handled differently in Firefox particularly, but none of the options I've found seem to work on all browsers. Here's my basic setup...

<button id="signinbutton" name="signin" type="submit" onclick="signInSubmit(this.form, this.form.signInPassword);">Sign In</button>

function signInSubmit(theForm, theHashPassword) {
  event.preventDefault(); //disables submit action so I can add custom code
  //rest of sign in...
  //e.g. theForm.appendChild(p);
}

The reason firefox gives the error, is that I haven't explictly passed "event" from my click/submit handler (which I don't think I can do with my existing setup since I'm directly calling "signInSubmit" with other arguments). From other posts I experimented with...

• removing event.preventDefault() and changing the button type from "submit" to "button" (but this just prevents the login working at all on all browsers because I'm passing data using this.form)

• removing event.preventDefault() and adding "return false" at the bottom of signInSubmit() - this has the same problem to the above also

• the most promising suggestion was to remove the onclick attribute from my button and implement something like...

  $('#signInForm').submit(function(e) { if(!ready){ e.preventDefault(); signInSubmit(this.form, this.form.signInPassword, false); } });

But of course from the context of a jquery selection .submit(), I can't use "this.form" to refer to my original form, and neither can have I been able to return the form in the format expected by signInSubmit with $('#signInForm')" or "$('#signInForm').serialize() .

Apologies if that's all a rather messy collection of thoughts on this issue, but I'm really hoping someone notices something in my setup that could be re-worked to get around this - thanks for any thoughts at all!

Answer 1

the most promising suggestion was to remove the onclick attribute from my button and implement something like

Yes. Do that.

I can't use "this.form" to refer to my original form

That is because the event is firing in the context of the form instead of the submit button. Use this instead of this.form .

  $('#signInForm')" or "$('#signInForm').serialize() 

The original function expects a DOM object representing the form. The first of those is a jQuery wrapper around such an object, the second of those is a string of URL encoded data from the form.

If you were going to use that approach (which you shouldn't since this is more elegant) then you would use $('#signInForm')[0] to extract the DOM object from the jQuery object.