preventDefault() not working on('submit')

Question

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

Answer 1

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.)

Answer 2

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.)