I can't get my on('submit') event handler to prevent submitting the form using event.preventDefault();

 $("section.shopping-cart").on('submit','form.adjustform input[type="submit"]', function(event)     {   

      // code

      event.preventDefault();
 }) 

i had had it working using on('click') and using return false. Altho i've read that the above method is the correct way of doing it..

Thanks, Cam

I can't get my on('submit') event handler to prevent submitting the form using event.preventDefault();

 $("section.shopping-cart").on('submit','form.adjustform input[type="submit"]', function(event)     {   

      // code

      event.preventDefault();
 }) 

i had had it working using on('click') and using return false. Altho i've read that the above method is the correct way of doing it..

Thanks, Cam

• javascript
• jquery

2 Answers 2

You're using the delegating form of on, with the selector selecting something other than a form element:

// Here ------------------------------------------------v
$("section.shopping-cart").on('submit','form.adjustform input[type="submit"]', ...

The submit event occurs on form elements (at least, the one you can usefully cancel does). Specify a form element:

$("section.shopping-cart").on('submit','form.adjustform', ...

Here's an example of it not working because the selector selects non-form elements:

Example | Source

And here's the corrected example working correctly:

Example | Source

(Note: The forms open in new windows, just to avoid taking you away from the code.)

The submit event happens on the form, not on the submit button.

Either bind the event to the form:

$("section.shopping-cart").on('submit','form.adjustform', function(event)     {

or bind the click event of the submit button:

$("section.shopping-cart").on('click','form.adjustform input[type="submit"]', function(event)     {

(However, some browsers also allows pressing enter to submit the form, in which case it would not trigger the click event.)