jQuery: on click disable click event till response from ajax call

Question

Doing following in jQuery:

$('#signupbox1').on('click', '#signup1', function() {

    var str = $('#signupform').serialize();

    // make it look like a waiting button
    $('#signup1').addClass("btn_wait");
    var btn_val = $('#signup1').val();
    $('#signup1').val('');

    $.ajax({
        type: "POST",
        url: "signup_step1.php",
        data: str,
        success: function(msg) {

            //doing stuff here

        $('#signup1').removeClass("btn_wait");
        $('#signup1').val(btn_val);
        }
    });

});

How could you disable the click event as well till you receive an answer from the ajax call? So, when you click on the button it not only "transforms" to a waiting button because of the added class, but also the click event will be "paused"... is this possible?

Thank you very much in advance!

Solution 1

$('#signupbox1').on('click', '#signup1', function() {

    var str = $('#signupform').serialize();

    // make it look like a waiting button
    var btn_val = $('#signup1').val();
    $('#signup1').addClass("btn_wait").val('').unbind('click');

    $.ajax({
        type: "POST",
        url: "signup_step1.php",
        data: str,
        success: function(msg) {
            $('#signup1').removeClass("btn_wait").val(btn_val);
        },
        complete: function() {
            $('#signup1').bind('click'); // will fire either on success or error
        }
    });

});

Solution 2

You can add a flag to denote "currently loading". You can use anything like a variable, property or attribute. In this example, I use jQuery .data()

Also, it's advisable that you use submit event instead of adding a click handler to the submit button when you submit a form.

$('#signupform').on('submit', function() {

    var form = $(this),
        loading = form.data('loading'), //check loading status
        str, button, val;

    //if not loading
    if(!loading){

        //set loading to true
        form.data('loading',true);

        str = form.serialize();
        button = $('#signup1', form);
        val = button.val();

        // make it look like a waiting button
        button
            .addClass("btn_wait");
            .val('');

        $.ajax({
            type: "POST",
            url: "signup_step1.php",
            data: str,
            success: function(msg) {

                //remove loading state
                form.data('loading',false);

                //return button to normal
                button
                    .removeClass("btn_wait");
                    .val(val);
            }
        });
    }

});

Comments

[Dushan Perera]

you may need to bind it back on error event also. User should be able to try again.

[Chris]

oh thank you Zoltan! so easy! oh my god... I feel ashamed! :)

[Chris]

@ZoltanToth: I guess what Shyju means is if there is no answer from the ajax call... like the code breaks before or sth like that... probably?

[Chris]

oh, wow.. thank you Joseph for this comprehensive answer! So, setting .data to loading only works on submit event? Currently I hide the first part of the form (4 inputs) and show the second one (4 more inputs) and then on the second one I wanted to use the submit button for the whole form... do you think this not a good idea? The signup_step1.php just checks the values for correctness... which has to be done again, you are right, when submitting the whole form as the data could have been changed of course...

[Joseph]

@Chris jQuery .data() can be used by anything. And I believe that form issue of yours needs to be in another question.