Why .on('submit') redirects to another page in jQuery?

Question

I have a submit event:

    $('#id').on('submit', function(e) {
    e.preventDefault();
    clicksCounter++;
    $.ajax({
        type: 'POST',
        data: {
            id: id,
            clickCounter: clicksCounter > 1
        },
        url: 'url',
        success: function(response) {
            if (response) {
                $('#modal').modal('hide');
            }
        }
    });
});

But somehow it's redirecting me to another page instead of going to the function. I thought that e.preventDefault() will help, but it didn't. Also tried location.reload(), but it didn't helped either.

Could someone explain me why? Thank you for your time

If `#id` is a submit button, the problem might be in your `form` tag. Try to remove `action` attribute out of the `form`. — choz, Jan 18 '18 at 09:11
Bind `submit` event handler with `form` element not `button` — Satpal, Jan 18 '18 at 09:12
Or what HTML form is it submitting (i.e., what is the button related to) — Shaun Bebbers, Jan 18 '18 at 09:12
Plz post your html for a [MVCE](https://stackoverflow.com/help/mcve) — Ciro Spaciari, Jan 18 '18 at 09:12
If you dont need the form you can also use a button type input instead — Ciro Spaciari, Jan 18 '18 at 09:14
Possible duplicate of: [How to prevent page refresh on button click in html5?](https://stackoverflow.com/questions/14072120/how-to-prevent-page-refresh-on-button-click-in-html5) — Cerbrus, Jan 18 '18 at 09:15
Add `console.log('something');` before, in the middle, and after the code you pasted so you can see if it's being called. Also post your HTML so we can check you are using the correct ID. — Graham Russell, Jan 18 '18 at 09:17

score 2 · Answer 1 · answered Jan 18 '18 at 09:12

2

I think that you are capturing the submit event on the wrong element. Instead of the submit button, it should be the ID of the form that is being submitted. E.g.

$('#myModalForm').on('submit', function(e) {

answered Jan 18 '18 at 09:12

Jim Wright

5,905
1
15
34

Why .on('submit') redirects to another page in jQuery?

1 Answers1