Отключите кнопку отправки после щелчка и включите ее снова через несколько секунд

Я использую jquery $.post при отправке формы. Я хочу отключить кнопку примерно через 5 секунд после ее нажатия, чтобы избежать множественного представления формы.

вот что я сделал сейчас:

$('#btn').click(function(){
    $.post(base_url + 'folder/controller/function',$('#formID').serialize(),function(data){
        $('#message').slideDown().html('<span>'+data+'</span>');
    });
});

Я использовал fadeIn и fadeOut раньше, но все равно это не работает, когда я тестировал его, быстро нажимая кнопку. Что я должен сделать, чтобы достичь того, что хотел?

Ответ 1

Вы можете сделать то, что вы хотели, как это:

var fewSeconds = 5;
$('#btn').click(function(){
    // Ajax request
    var btn = $(this);
    btn.prop('disabled', true);
    setTimeout(function(){
        btn.prop('disabled', false);
    }, fewSeconds*1000);
});

или вы можете использовать метод jQuery .complete(), который выполняется после того, как ajax получает ответ:

$('#btn').click(function(){
    var btn = $(this);
    $.post(/*...*/).complete(function(){
        btn.prop('disabled', false);
    });
    btn.prop('disabled', true);

});

изменить: этопример с задержкой ответа на стороне сервера 3 секунды

Ответ 2

Просто поместите это в свой JS для страницы, на которой находится кнопка отправки

<script type="text/javascript">
  $(document).ready(function(){
    $("input[type='submit']").attr("disabled", false);
    $("form").submit(function(){
      $("input[type='submit']").attr("disabled", true).val("Please wait...");
      return true;
    })
  })
</script>

Источник кода

Ответ 3

Посмотрите на функцию .success здесь это то, что вам нужно.

поэтому вы можете отключить кнопку при нажатии

$('#btn').click(function(){
    $('#btn').attr('disabled', true);
    $.post(base_url + 'folder/controller/function', $('#formID').serialize(), function(data) {
        // code on completion here
        })
        .success(function() { 
           $('#btn').attr('disabled', false);
        })
    });
});

Этот способ лучше, если это произойдет, если ваш запрос займет более 5 секунд, чтобы вернуться?

Ответ 4

        $('#btn').live('click', function () {
            $(this).prop('disabled', true).delay(800).prop('disabled', false);
        });

//Или

 $('#btn').live('click', function () {
            var obj = $(this);
            obj.prop('disabled', true);
            $.post(base_url + 'folder/controller/function', $('#formID').serialize(), function (data) {
                $('#message').slideDown().html('<span>' + data + '</span>');
                obj.prop('disabled', false);
            });
        });

Ответ 5

В ответ на @Teneff ответьте, если в форме есть несколько кнопок отправки, и вы хотите указать имя кнопки на стороне сервера.

<script type="text/javascript">
var fewSeconds = 5;
$('button').click(function(){
    // Ajax request
    var btn = $(this);
    var text = btn.text();
    setTimeout(function(){
        btn.prop('disabled', true);
        btn.text("Wait...");
    }, 10);
    setTimeout(function(){
        btn.prop('disabled', false);
        btn.text( text);
    }, fewSeconds*1000);
});
<script>