Adding a Time Enabled Button for your Website

You may have visited some websites that have certain controls in place such as delaying the enabling of buttons and links on the page, or requiring that a captcha code be submitted prior to enabling components on the page.

This is generally done to ensure that web spiders and bots that access your page, do not arbitrarily invoke the target components on the page. Another example may be that you want to present certain content to your user, an advert, or a video presentation prior to enable additional content.

In this tutorial, we are going to cover how to build a countdown timer that can be used to delay a button from being enabled on the page. This can be an effective way to ensure that your visitor is a human and also require that a delay occurs prior to serving the visitor the additional content. This additional content could be a video, a download link, or some other resource on your website.

The HTML

We will start with a simple HTML example. All we need for this example is a simple <button> element. In this example, we will disable the <button> element by default so that the visitor is not able to click the button until the timer has reached ’00’ seconds. Once the timer is finished, the button will be enabled. We will enable the button using JavaScript.

<div id="wrapper">
    <div id="myTimer"></div>
    <button type="button" id="myBtn" class="btnDisable" disabled onclick="alert('Finally!')">
        Please wait...
    </button>
</div>

There are a few things you may want to note about this HTML code. The button has an id attribute that we will use to reference in our JavaScript, a disabled attribute with no value, and an onclick event that we are just using for demonstration purposes. The onclick event will not be triggered until the button is enabled.

The CSS

We use CSS to style our timer as well as the other components used in this demo such as the div elements that surround the timer and button.

#wrapper {
    text-align:center;
    border:1px solid #7F7F7F;
    width:150px;
    margin:25px auto;
    padding:25px;
    background-color:#E3E4E4;
}

#myTimer {
    font:64px Tahoma bold;
    padding:20px;
    display:block;
}

button {
    width:125px;
    padding:10px;
}

.btnEnable {
    background-color:#E6F9D2;
    border:1px solid #97DE4C;
    color:#232323;
    cursor:pointer;
}

.btnDisable {
    background-color:#FCBABA;
    border:1px solid #DD3939;
    color:#232323;
    cursor:wait;
}

In our CSS sample, we use a different class for the enabled and disabled button.

JavaScript and jQuery

Most of the code used in this example is pure JavaScript. However, there are a few lines of jQuery included. So make sure that you reference the jQuery library in your page.

var sec = 15;
var myTimer = document.getElementById('myTimer');
var myBtn = document.getElementById('myBtn');
window.onload = countDown;

function countDown() {
    if (sec < 10) {
        myTimer.innerHTML = "0" + sec;
    } else {
        myTimer.innerHTML = sec;
    }
    if (sec <= 0) {
        $("#myBtn").removeAttr("disabled");
        $("#myBtn").removeClass().addClass("btnEnable");
        $("#myTimer").fadeTo(2500, 0);
        myBtn.innerHTML = "Click Me!";
        return;
    }
    sec -= 1;
    window.setTimeout(countDown, 1000);
}

In this example, you should notice that most of the code is written in pure JavaScript. However, there are three lines of code that leverage the jQuery library. The first two jQuery statements deal with the removal of the disabled attribute and class, and the enabling of the btnEnable class on the HTML button.

The third creates an animated effect and fades the timer over 2500 milliseconds. It is not required to use jQuery for this example, but I did include it only because jQuery makes those particular steps much easier when compared with the JavaScript equivalent.

In this example, we assigned the sec variable to 15 which is the number of seconds we want our timer to start the countdown at. Once the countdown reaches ’00’, the button is enabled.

We used the setTimeout method to create a delay of 1000 milliseconds or 1 second before the countDown() function is executed again. Once the sec variable is equal to ‘0’, the function exists and is no longer executed.