Enable button after 10 seconds jquery

Enable button after 10 seconds jquery : In this article you will going to how to enable button which is disabled on page load but it get enable after certain some interval of time.

Below is simple code with the help of which you use the button various type of function and execution. As the button get active after certain time.

Lets check the Guide Regarding Enable button after 10 seconds jquery.

To get the code of jQuery work properly first we have to declare jQuery at the Start.

Below is the code for it.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

After using this all set of jQuery function and all set of code get work properly.

Then you have to declare the code of button below it, which is disabled. Our Job is to activate this button after 10 seconds. So that you can use the button other type of function.

<div class="countdowntimer"></div>
<button type="button" id="demo">click</button>

In the code i have used the method called setInterval() which calls the fuctions at specific interval of time.

The method name setInterval() which is contnues to call the function.Until it is not get stops.To stop the calling of function we have to used the clearInterval().

In side the method setInterval, i have also used the parsInt to avoid extra string processing

below is code for parsInt.

var minutes = parseInt(timer[0], 10);
var seconds = parseInt(timer[1], 10);

Execution of two variable minutes and seconds with the help of html method.

$('.countdowntimer').html(minutes + ':' + seconds);
timer2 = minutes + ':' + seconds;

To execute the code for 10 seconds we have to check with if condition

By Passing the parameter minutes === 0 && seconds === 0 inside the if condition.

Below is code for if else code. In side which execute clearInterval(interval) method.

Complete script of Enable button after 10 seconds jquery are as follow as :

<div style="background-color:#e5bcbc;" align="center">
<h1>Enable button after 10 seconds jquery</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="countdowntimer"></div>
<button type="button" id="demo">Click Here</button>
<script>
var timer2 = "00:10";
var interval = setInterval(function() {
  var timer = timer2.split(':');
  //by parsing integer, To avoid all extra string processing
  var minutes = parseInt(timer[0], 10);
  var seconds = parseInt(timer[1], 10);
  --seconds;
  minutes = (seconds < 0) ? --minutes : minutes;
  if (minutes < 0) clearInterval(interval);
  seconds = (seconds < 0) ? 59 : seconds;
  //minutes = (minutes < 10) ?  minutes : minutes;
  $('.countdowntimer').html(minutes + ':' + seconds);
  timer2 = minutes + ':' + seconds;
  if( minutes === 0 && seconds === 0) {
      clearInterval(interval);
      document.getElementById('demo').removeAttribute('disabled');
    }
    else {  
      document.getElementById('demo').setAttribute('disabled', true);
    }
}, 100);
document.getElementById('demo').addEventListener('click', function() {
  enableButton();
});
enableButton();
</script>
</div>

Conclusion : Done with jQuery code for Enable the disabled button after 10 seconds. If you have any difficulties please comment below. You can also go through other jQuery example