1

I like to set a delay on a submit button. In other words greyed out for some seconds after clicking that button. How can I accomplish this with js?

Cœur
  • 37,241
  • 25
  • 195
  • 267
Kessi
  • 79
  • 1
  • 4
  • 10

4 Answers4

4

This might help you: http://jsfiddle.net/jhNcM/

<input type="button" id="aaa" value="button" />

$('#aaa').click(function() {
    var aaa =  $(this);
    aaa.prop('disabled', true);
    setTimeout(function() {
        aaa.prop('disabled', false);
    }, 3000);
});
Naor
  • 23,465
  • 48
  • 152
  • 268
2

Plain JavaScript: http://jsfiddle.net/R5p5q/1/

<form id="myForm">
    <input id="mySubmit" type="submit" value="GO" />
</form>

​

var myForm = document.getElementById('myForm');

myForm.addEventListener("submit", function(evt) {
    var elemSubmit = document.getElementById('mySubmit');
    elemSubmit.setAttribute("disabled", "disabled");

    // Removes disabling after 3 seconds
    window.setTimeout(function() {
        elemSubmit.removeAttribute("disabled");
    }, 3e3);
},false);
Samuli Hakoniemi
  • 18,740
  • 1
  • 61
  • 74
1

There is a way to do that http://jsfiddle.net/Ktk6f/

HTML

<input type="submit" value="submitData" id="myButton" />

JS

$('#myButton').click(function(){
    var that = $(this);
    that.attr('disabled', true);
    var timer = setTimeout(function(){
        that.attr('disabled', false);
    }, 1000);
});

It requires jQuery JS framework

nkamm
  • 627
  • 5
  • 14
  • @Kessi: It is better to use prop instead of attr: http://stackoverflow.com/questions/5874652/prop-vs-attr – Naor Nov 13 '12 at 13:32
0
$("#button").click(function() {
    if (this.disabled) {
        return;
    }
    this.disabled = true;
    setTimeout($.proxy(function() {
        this.disabled = false;
    }, this), 3000);
});
Esailija
  • 138,174
  • 23
  • 272
  • 326
  • If you already use jQuery (for proxy), why not to use the $().prop() method?? – Naor Nov 13 '12 at 13:48
  • @Naor because it's shorter and doesn't use strings: `this.disabled = true` vs `$(this).prop( "disabled", true )` – Esailija Nov 13 '12 at 13:53