Q:

How to disable button after click in jQuery

Sometimes I am able to trigger the submit button twice. and the ajax is triggered twice too.
Here is my html code:
<div class="buttons-area">
    <input id="step-two" class="btn btn-primary" type="submit" value="Next step »">
</div>

And here is my ajax:
<script>
    $(document).ready( function () {

        $('#step-two').on('click', function(e) {

            e.preventDefault();

            var formData = new FormData();

            formData.append('username', $('#username').val());
            formData.append('email', $('#email').val());
            formData.append('password', $('#password').val());
            formData.append('password_confirmation', $('#password_confirmation').val());

            $.ajax({
                url:         'registration',
                method:      'post',
                processData: false,
                contentType: false,
                cache:       false,
                dataType:    'json',
                data:        formData,
                beforeSend: function()
                    {
                        $(".validation-error-inline").remove();
                    }
                })
                .done(function(data) {

                    if (data.validation_failed == 1)
                    {
                        var arr = data.errors;

                        $.each(arr, function(index, value)
                        {
                            if (value.length != 0)
                            {

                                $("#"+index).closest(".middle").next(".right")
                                            .append('<span class="text-error validation-error-inline">' + value[0] + '</span>');

                            }
                        });

                    }

                })
                .fail(function(jqXHR, ajaxOptions, thrownError) {
                    alert('No response from server');
                });
                return false;

        });
    });
</script>

How can I disable the button after the first click and allow the next click only if the ajax is finished?
Right now I am able to trigger the ajax two times in the row if I am fast and the same error message is shown twice.

A:

You can disable the button on click
$('#step-two').on('click', function(e) {
 e.preventDefault();
$(this).prop('disabled',true); //disable further clicks
…

And enable in the always() callback so that the button will be enabled after the request regardless it succeeded or not.
$.ajax({
            url:         'registration',
            method:      'post',
            processData: false,
            contentType: false,
            cache:       false,
            dataType:    'json',
            data:        formData,
            beforeSend: function()
                {
                    $(".validation-error-inline").remove();
                }
            })
.done(function(){
   // code
 })
.fail(function(){
   // code
})
.always(function(data) {
 $('#step-two').prop('disabled',false); // re-enable the button once ajax is finished
})

