make sure ajax request doesn't get fired multiple time

Question

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

Answer 1

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.

Answer 2

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");
            },
            complete : function () {
                window.isRunning = false;
            }
        });