I was working on a simple form page and I was wondering what happens if someone clicks the submit button many many times (incase my shared hosting somehow seems to be slow at that time).

Also, incase anyone wants to look at my code

$.ajax({
    url: "submit.php",
    type: 'POST',
    data: form,
    success: function (msg) {
        $(".ressult").html("Thank You!");
    },
    error: function () {
        $(".result").html("Error");
    }
});

Is there a way to make it so after the user clicks it once, it won't run it again until the first click is done?

Thank you

I was working on a simple form page and I was wondering what happens if someone clicks the submit button many many times (incase my shared hosting somehow seems to be slow at that time).

Also, incase anyone wants to look at my code

$.ajax({
    url: "submit.php",
    type: 'POST',
    data: form,
    success: function (msg) {
        $(".ressult").html("Thank You!");
    },
    error: function () {
        $(".result").html("Error");
    }
});

Is there a way to make it so after the user clicks it once, it won't run it again until the first click is done?

Thank you

• javascript
• jquery
• ajax

• 2 Disable the submit button after first click. – NullPointerException Commented May 20, 2013 at 17:10
• 1 possible duplicate stackoverflow./questions/16651772/… – intuitivepixel Commented May 20, 2013 at 17:10

5 Answers 5

You can use jQuery's .one() function:

(function handleSubmit() {
    $('#submitBtn').one('click', function() {
        var $result = $('.result');
        $.ajax({
            url: 'submit.php',
            type: 'POST',
            data: form,
            success: function (msg) {
                $result.html('Thank You!');
                handleSubmit(); // re-bind once.
            },
            error: function () {
                $result.html('Error');
            }
        }); // End ajax()
    }); // End one(click)
}()); // End self-invoked handleSubmit()

*Edit: * Added recursion for multiple submissions.

Use a boolean flag

 if (window.isRunning) return;
 window.isRunning = true;
 $.ajax({
            url:"submit.php",
            type: 'POST',
            data: form,
            success: function (msg){                
                $(".ressult").html("Thank You!");
            },
            error: function (){
                $(".result").html("Error");
            },
            plete : function () {
                window.isRunning = false;
            }
        });

var $button = $(this);
$button.prop('disabled', true); // disable the button
$.ajax({
    url:"submit.php",
    type: 'POST',
    data: form,
    success: function (msg){                
        $(".ressult").html("Thank You!");
    },
    error: function (){
        $(".result").html("Error");
    },
    plete: function() {
        $button.prop('disabled', false); // enable it again
    }
});

Have you considered replacing your submit button with a loader image while the query executes, then re-adding it once the query is plete?

EDIT: Using the loader image is a sort of universal "I'm doing something" indicator, but disabling the button would work too!

You could disable the submit button, before the ajax call is made. And then, if required, enable it on success.