I'm submitting a form via AJAX using the code below:

$( 'form' ).submit(function(e) {

    $.ajax({
        type: 'POST',
        url: ajax_url,
        dataType: 'json',
        data: {
            'action': 'my_action',
            'str': $( 'form' ).serialize()
        },
        success: function( data ) {
            // Do something here.
        },
        error: function( data ) {
            // Do something here.
        }
    });
    return false;
});

Background

My PHP handler carries out various tasks and then sends back a response. I can then do something with data in either of the success or error functions.

My problem

When a user double clicks on the form's submit button, two AJAX calls take place which causes the code inside my PHP handler to execute twice.

My question

How can I avoid my code being executed twice if a user double clicks on submit?

I'm submitting a form via AJAX using the code below:

$( 'form' ).submit(function(e) {

    $.ajax({
        type: 'POST',
        url: ajax_url,
        dataType: 'json',
        data: {
            'action': 'my_action',
            'str': $( 'form' ).serialize()
        },
        success: function( data ) {
            // Do something here.
        },
        error: function( data ) {
            // Do something here.
        }
    });
    return false;
});

Background

My PHP handler carries out various tasks and then sends back a response. I can then do something with data in either of the success or error functions.

My problem

When a user double clicks on the form's submit button, two AJAX calls take place which causes the code inside my PHP handler to execute twice.

My question

How can I avoid my code being executed twice if a user double clicks on submit?

• javascript
• php
• jquery
• ajax

3 Answers 3

Just add there some control variable:

var isSubmitting = false;

$( 'form' ).submit(function(e) {
    if(isSubmitting) {
        return;
    }
    isSubmitting = true;
    $.ajax({
        type: 'POST',
        url: ajax_url,
        dataType: 'json',
        data: {
            'action': 'my_action',
            'str': $( 'form' ).serialize()
        },
        success: function( data ) {
            isSubmitting = false;
            // Do something here.
        },
            error: function( data ) {
            isSubmitting = false;
            // Do something here.
        }
    });
    return false;
});

Disable the submit button on the first click and re-enable it, when the AJAX call comes back.

For example:

$( 'form' ).submit(function(e) {
    var $form = $(this);
    $form.find('submit').attr('disabled', true);
    $.ajax({
        type: 'POST',
        url: ajax_url,
        dataType: 'json',
        data: {
            'action': 'my_action',
            'str': $( 'form' ).serialize()
        },
        complete: function() {
            $form.find('submit').removeAttr('disabled');
        },
        success: function( data ) {
            // Do something here.
        },
        error: function( data ) {
            // Do something here.
        }
    });
    return false;
});

Just hide and show the submit button on submit.

$( 'form' ).submit(function(e) {
  $('#my_button').hide();
  $.ajax({
    type: 'POST',
    url: ajax_url,
    dataType: 'json',
    data: {
        'action': 'my_action',
        'str': $( 'form' ).serialize()
    },
    success: function( data ) {
        // Do something here.
    },
    error: function( data ) {
        // Do something here.
    },
    complete: function(){
        $('#my_button').show();
    }
});
return false;

});