CODEWITHSUNDEEP
jqueryajaxforms
Jetoox
Jetoox

Reputation: 1437

Disable the submit button after clicking and enable it back again after a few seconds

I'm using jquery $.post when submitting a form. I want to disable the button for like 5 seconds after it has been clicked to avoid multiple submission of the form.

here's what I've done for now:

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

I've used fadeIn and fadeOut before, but still it doesn't work when I tested it clicking the button rapidly. What should I do to achieve what I wanted to happen?

Upvotes: 24

Views: 60669

Answers (7)

Luke Jans
Luke Jans

Reputation: 91

Simple Solution:

DOM query:

let btn = document.querySelector('#your-button')

Add temporarilyDisableBtn() to eventListener:

btn.addEventListener('click', function () {
    // implementation
    temporarilyDisableBtn(btn)

    // your extra code here
}

Code to disable and re-enable btn:

function temporarilyDisableBtn(btn) {
    btn.disabled = true;

    setTimeout(function () {
      btn.disabled = false;
    }, 1000);
}

this is a general solution that will work for most implementations. More on setTimeout().

Upvotes: 1

Teneff
Teneff

Reputation: 32158

You can do what you wanted like this:

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

or you can use jQuery's .complete() method which is being executed after the ajax receives a response:

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

});

edit: this is an example with 3 seconds server-side response delay

Edit

Since even the answer is 8 years old, but still getting attention and jQuery is getting less popular I think it's worth adding example without jQuery

const fewSeconds = 3
 
document.querySelector('#btn').addEventListener('click', (e) => {
    e.target.disabled = true
  setTimeout(() => {
   e.target.disabled = false
  }, fewSeconds * 1000)
})
<input type='button' id="btn" value="click me" />

Upvotes: 53

Akinlosotu Samuel Adeniyi
Akinlosotu Samuel Adeniyi

Reputation: 21

Take any form of button and accrue its value to a variable. Replace the value with "please wait..." and after 5 seconds pass the previous saved variable back and disable to false.

    $('input[type=submit], input[type=button]').click(function(){
    var btn = $(this);
    var textd = btn.attr("value");
    btn.prop('disabled', true);
    btn.attr('value', 'Please wait...');
    setTimeout(function(){
    btn.prop('disabled', false);
    btn.attr('value', textd);
    }, fewSeconds*1000);
    });

Upvotes: 1

Prahlad
Prahlad

Reputation: 796

In extension of @Teneff answer if there is multiple submit button in the form and you want the name of button at server side.

<script type="text/javascript">
var fewSeconds = 5;
$('button').click(function(){
    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>

Upvotes: 2

German
German

Reputation: 21

Just place this in your JS for the page the submit button is on

<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>

Code source

Upvotes: 2

ncremins
ncremins

Reputation: 9200

Have a look at the .success function here it's what you need.

so what you do is disable button on click

$('#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);
        })
    });
});

This way is better as what happens if your request takes more than 5 seconds to return?

Upvotes: 1

Thulasiram
Thulasiram

Reputation: 8552

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

//Or

 $('#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);
            });
        });

Upvotes: 0

Related Questions