Intercept a form submit with jQuery and prevent or allow submission

Goal: Intercept a form submit, find out what submit button was clicked/invoked and decide to prevent the submission or continue to submit.

Solution:

$(document).ready(function() {
    $("form").submit(function(e) {
        if (e.originalEvent.explicitOriginalTarget.id == "myButton") {
            if (some status is true continue to submit the form)
                return true;
                //If the status above is false continue to prompt the user if they want to submit or not
            var ok = confirm('Do you really want to save your data?');
            if (ok) {               
                return true;
            }
            else {
                //Prevent the submit event and remain on the screen
                e.preventDefault();
                return false;
            }
        }
    });

    return;
});
  • Share This Post:
  • Share on Twitter
  • Share on Facebook
  • Share on Technorati

Print | posted @ Wednesday, September 09, 2009 10:33 AM

Comments on this entry:

Gravatar # re: Intercept a form submit with jQuery and prevent or allow submission
by iririr at 10/14/2009 5:35 PM

Thanks for this, it really helped me out...couldn't find it anywhere else.
Gravatar # re: Intercept a form submit with jQuery and prevent or allow submission
by emi at 10/19/2009 10:31 AM

Thanks a lot!! This is the only page I've found with the trick e.originalEvent.explicitOriginalTarget . Very useful!!
Gravatar # re: Intercept a form submit with jQuery and prevent or allow submission
by raghu at 2/12/2010 8:02 AM

Thank u sooo much.
Awesome code, every web developer required this code....
Gravatar # re: Intercept a form submit with jQuery and prevent or allow submission
by franek at 3/16/2010 9:04 AM

Does it works with all browsers?

(BTW: ie6, ie7, ie8 SUCKS!!!)
Gravatar # re: Intercept a form submit with jQuery and prevent or allow submission
by emi at 6/1/2010 6:01 PM

For a cross-browser solution you should look at other properties:

// Look for the originating object for: firefox, others
// (opera, chrome -not tested, ...), IE
// Not working for, at least, konqueror. Safari not tested.
var submitted =
e.originalEvent.explicitOriginalTarget ||
e.originalEvent.relatedTarget ||
document.activeElement;

// Look if it was a text node (IE bug)
submitted = submitted.nodeType == 1 ?
submitted :
submitted.parentNode;
Gravatar # re: Intercept a form submit with jQuery and prevent or allow submission
by Office 2010 at 12/9/2010 4:06 AM

Too nice,!!! Your blog have lot of nice stuff to take a good read it is a nice blog. I liked each and every your photo which You showed me and I want to have more from this and I must like to thank along with my Sales Resumes.
Gravatar # re: Intercept a form submit with jQuery and prevent or allow submission
by Jamie Murphy at 2/10/2012 5:14 AM

Great snippet of code! very useful and extremely simple to customise!
Post A Comment
Title:
Name:
Email:
Website:
Comment:
Verification:
 
 
Twitter