Disable button while request is performed

Question

I have a screen to add members and when the member is added the user already views in a table below (AJAX).

When users are clicking on the add button the request may take, depending on "N" factors, and when it takes, users keep clicking on the add button, which results in multiple inserts and multiple "identical" records in the table.

I just want to disable the button while the request is completed and the table updated, but I don’t know much about JS.

My code:

$('form#{$model->formname()}').on('beforeSubmit', function(e)
{

    var \$form = $(this);

    $.post(
        \$form.attr("action"),
        \$form.serialize(),
    ).done(function(result){  
        $.pjax.reload({container:'#membros'});
        $(\$form).trigger("reset");
    }).fail(function(){
        $(\$form).trigger("reset");
        $.pjax.reload({container:'#membros'});
    }); 

    return false;
});

Answer 1

You can do it this way:

$('form#{$model->formname()}').on('beforeSubmit', function(e)
{

    var \$form = $(this);
    var botao = $('#id_do_seu_botao');

    botao.prop('disabled', true);

    $.post(
        \$form.attr("action"),
        \$form.serialize(),
    ).done(function(result){  
        $.pjax.reload({container:'#membros'});
        $(\$form).trigger("reset");
        botao.prop('disabled', false);
    }).fail(function(){
        $(\$form).trigger("reset");
        $.pjax.reload({container:'#membros'});
        botao.prop('disabled', false);
    }); 

    return false;
});

So before the request it disables the button, and at the end of the request it enables it.

Answer 2

Replace your request to $.ajax. In it we have the functions:

beforeSend: this function is executed before the request is made AJAX, in your case, here we must disable the button.

success: this function is executed if the request AJAX has been successfully executed by the back-end.

error: this function is executed if there is a fault in the back-end request.

complete: this function is executed after the success or of error (depends on whether your request was successfully performed to call one of the two). In your case, we will use this function to enable the button again.

var \$form = $(this);

$.ajax({
    type: 'POST',
    url: \$form.attr("action"),
    data: \$form.serialize(),
    dataType: 'json',
    beforeSend: function() {
        // Aqui desativamos seu botão, troque para o id correto
        $('#id-botao').attr('disabled', 'disabled');
    },
    success: function(result) {
        $.pjax.reload({container:'#membros'});
        $(\$form).trigger("reset");
    },
    error: function(xhr) { 
        $(\$form).trigger("reset");
        $.pjax.reload({container:'#membros'});
    },
    complete: function() {
        // Aqui habilitamos seu botão, troque para o id correto
        $('#id-botao').removeAttr('disabled');
    }
});