Why does jquery submit my ajax form twice?

Question

When my form is submitted php will return false if it doesn't like the values contained in field1 and field2. If it does like those fields, then it will return true. If a user submits the form and php returns false, then an alert appears. After closing the alert window, if the user immediately enters new (good) data into those fields and submits the form again, then the form is somehow submitted twice. Why? How can I fix this?

$("form#myForm").on('submit',function() 
{
    $.ajax(
    {
        type: "POST",
        url: 'myfile.php',
        dataType: 'html',
        data: 
        {
            field1:$("input[name=field1]").val(),
            field2:$("input[name=field2]").val()
        },
        success: function(data)
        {
            if(data == false) 
            {
                alert('hello world');
            } 
            else 
            {
                // stuff
            }
        }
    });
    return false;
});

It seems to work on [jsbin](http://jsbin.com/ujinon/3/edit), it only makes one request per submit. To make it run on jsbin, I changed `POST` to `GET`, set the url to `#`, and replaced the `data == false` with `true`. HTH — Dan Ross, Feb 09 '13 at 03:04

score 4 · Answer 1 · edited May 23 '17 at 12:16

4

The same question was asked in 2014 (jquery ajax form submits twice).

e.preventDefault() on its own works for buttons and anchor links but didn't work for me when submitting a form (identical to Nancy 's code above).

I had to add e.stopImmediatePropagation(); just before my ajax post. This stopped the ajax call from being submitted twice.

edited May 23 '17 at 12:16

Community

1
1

answered Jun 01 '15 at 17:52

Robini

377
1
3
14

The OP asked why though, and I'm also curious – Marcos Pereira Jul 03 '16 at 18:09
I don't know why this happens unfortunately. Nancy asked "Why? How can I fix this?", so I managed to answer how to fix it, but not the why. – Robini Jul 04 '16 at 08:43
I figured out why it was happening with my code. The javascript tags on the were duplicated, running the script (and thus attaching the hook) twice. – Marcos Pereira Jul 05 '16 at 09:52

score 2 · Answer 2 · answered Nov 29 '13 at 13:24

2

add this code after below, before return false

$('#myForm').unbind('submit');
 return false;

answered Nov 29 '13 at 13:24

Rashad

1,344
2
17
33

score 1 · Answer 3 · answered Feb 09 '13 at 02:24

1

Because you're doing the ajax post you'll need to disable the default submit button behavior. See http://api.jquery.com/event.preventDefault/

answered Feb 09 '13 at 02:24

Jasen

14,030
3
51
68

Why does jquery submit my ajax form twice?

3 Answers3

Linked