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