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

possible duplicate http://stackoverflow.com/questions/16651772/how-do-you-stop-a-user-from-repeatedly-clicking-a-jquery-ajax-call — intuitivepixel, May 20 '13 at 17:10

AlienWebguy · Answer 1 · 2013-05-20T20:36:04.237

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.

edited May 20 '13 at 20:36

answered May 20 '13 at 17:11

AlienWebguy

76,997
17
122
145

4

Problem with this is the user wants the function to run again. – epascarello May 20 '13 at 17:13
I addressed how to handle multiple submissions in my original answer, but in any regard I updated with an example. Cheers~ – AlienWebguy May 20 '13 at 20:31

score 3 · Answer 2 · answered May 20 '13 at 17:11

3

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;
            }
        });

answered May 20 '13 at 17:11

epascarello

204,599
20
195
236

What is window.isRunning ? – Vivek Sadh May 20 '13 at 17:16
2

It's a global variable, see here for more information: http://stackoverflow.com/questions/11148997/window-variablename – Joe May 20 '13 at 17:20

Claudio Redi · Answer 3 · 2013-05-20T17:17:38.510

2

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");
    },
    complete: function() {
        $button.prop('disabled', false); // enable it again
    }
});

edited May 20 '13 at 17:17

answered May 20 '13 at 17:11

Claudio Redi

67,454
15
130
155

score 0 · Answer 4 · answered May 20 '13 at 17:10

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

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

score 0 · Answer 5 · answered May 20 '13 at 17:10

0

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

answered May 20 '13 at 17:10

eidsonator

1,319
2
11
25

make sure ajax request doesn't get fired multiple time

5 Answers5