Question

I am using the following code to countdown before enabling a button.

<script type="text/javascript">
$.fn.timedDisable = function(time) {
    if (time == null) { time = 5000; }
    return $(this).each(function() {
        $(this).attr('disabled', 'disabled');
        var disabledElem = $(this);
        setTimeout(function() {
            disabledElem.removeAttr('disabled');
        }, time);
    });
};

$(function() {
    $('#btnContinue').timedDisable();
});
</script>

How can I get the button value to read value=”Continue (x)”,
Where x is the number of seconds remaining until it’s enabled, after which it’s just value=”Continue”?

Answer 1

How about this:

Example: http://jsfiddle.net/mgSVX/2/ EDIT:(updated the example to use the text value requested)

$.fn.timedDisable = function(time) {
    if (time == null) {
        time = 5000;
    }
    var seconds = Math.ceil(time / 1000);  // Calculate the number of seconds
    return $(this).each(function() {
        $(this).attr('disabled', 'disabled');
        var disabledElem = $(this);
        var originalText = this.innerHTML;  // Remember the original text content

          // append the number of seconds to the text
        disabledElem.text( originalText + ' (' + seconds + ')'); 

         // do a set interval, using an interval of 1000 milliseconds
         //     and clear it after the number of seconds counts down to 0
        var interval = setInterval(function() {
                // decrement the seconds and update the text
            disabledElem.text( originalText + ' (' + seconds + ')');  
            if (seconds === 0) {  // once seconds is 0...
                disabledElem.removeAttr('disabled')
                    .text(originalText);   //reset to original text
                clearInterval(interval);  // clear interval
            }
        }, 1000);
    });
};

$(function() {
    $('#btnContinue').timedDisable();
});​