Why does my jquery ajax form submit once on first submit, twice on second submit...?

Question

I have a simple AJAX form that works as it should when I submit it. However, if I then enter new data into the same form (without refreshing the page), then it submits the form twice. If I do this a third time, then it submits the form three time, and so on. Why is it doing this? Here is my code:

$(document).ready(function(){
    $("#myForm").submit(function() {
        var myField = $('#myID).val();
        $.ajax({
            type: "POST",
            url: 'myFile.php',
            dataType: 'html',
            data: {myData:myField},
            success: function(data){
                alert(data);
            }
        });

        return false;
    });
});

Could you copy and paste the code from your real code instead of typing out an extract? — Popnoodles, Feb 21 '13 at 01:28

score 11 · Accepted Answer · answered Mar 29 '13 at 17:05

Even I got stuck with the same problem while developing a AJAX login form. After an googling for couple of hours I found a solution. I hope this should help you out.

Basically you have to unbind the current instance of form's submit action after your ajax request gets completed. So add this line before return false;

$("#myform").unbind('submit');

Therefore your entire code should look like



    $(document).ready(function(){
        $("#myForm").submit(function() {
            var myField = $('#myID).val();
            $.ajax({
                type: "POST",
                url: 'myFile.php',
                dataType: 'html',
                data: {myData:myField},
                success: function(data){
                    alert(data);
                }
            });

            /* Add this line */
            $("#myform").unbind('submit');
            return false;
        });
    });

score 1 · Answer 2 · edited May 23 '17 at 11:51

1

I had the same problem.

I found the solution in: jquery : submitting a form twice

Basicaly is adding .submit() to Saurabh Mishra answer:

$('#form1').unbind('submit').submit();

edited May 23 '17 at 11:51

Community

1
1

answered Jan 28 '15 at 23:52

dvsaraiva

491
1
6
13

score 0 · Answer 3 · answered Feb 16 '15 at 17:40

Unbinding the form can break you Ajax from. I found that as long as I declare the form first.

$('#my_form').ajaxForm

that all works as expected, and follows the standard protocol. I just spent a day chasing the 'missing template' error on the form submission because I unbound the form.

Why does my jquery ajax form submit once on first submit, twice on second submit...?

3 Answers3

Linked