Ticker

6/recent/ticker-posts

OTP Countdown Timer in Oracle APEX - Javainhand Tutorial

In this Oracle APEX Tutorial, We are going to see How to Add OTP Countdown Timer in Oracle APEX.

OTP Timer in Oracle APEX

Most of the top applications now using this feature. So I will explain to you how can we implement this OTP Countdown timer in Oracle APEX.

Basically, I am sharing my scenario that you have to add/display an OTP page after the registration complete. User will receive an OTP after that page will redirect to the OTP verification screen and the timer will start if you have not entered the OTP within 2 minutes then the OTP field disables and Submit Button will also disable. 

The below screenshot will help you out to understand this scenario.

Step 1:- Create a Page with an OTP Text field Item with two buttons. The below screenshot will help you.

Step 2:-After creating the page item and buttons, Now Add the following code to the item post text section. The below screenshot will help for the better understanding.

Step 3:- Now add resend_otp class to RESEND_OTP button. Now scroll down your button property section and find out the Appearance section then find CSS Classes and put CSS class (resend_otp) in this section.The below Screenshot will help for the better understanding.

Step 4:-Now add send_otp class to SUBMIT_OTP button. Now scroll down your button property section and find out the Appearance section then find CSS Classes and put CSS class (send_otp) in this section.The below Screenshot will help for the better understanding.

Step 5:- I hope you will have successfully completed all the above steps, Now create a page load dynamic action with true action execute javascript code.

Add the Following JavaScript code to the execute javascript code section.

var timeoutHandle;

function countdown(minutes) {

  var seconds = 60;

   var mins = minutes

   function tick() {

       var counter = document.getElementById("timer");
       var current_minutes = mins-1
       seconds--;
       counter.innerHTML =
       current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
       if( seconds > 0 ) {
           timeoutHandle=setTimeout(tick, 1000);
         apex.item( "P16_OTP" ).enable();
           $('.send_otp').prop('disabled', false); 
          $('.resend_otp').prop('disabled', true);

       } else {
          apex.item( "P16_OTP" ).disable() ;
           $('.send_otp').prop('disabled', true);  
         $('.resend_otp').prop('disabled', false); 
           if(mins > 1){
       setTimeout(function () { countdown(mins - 1); }, 1000);
              
             }
       }
   }
    tick();
}
countdown(2);

That's all for today, I hope you like my (OTP Countdown Timer in Oracle APEX) blog post. If you liked this post then comment in the comment box section.

You can also subscribe to our youtube channel where we also post videos of Oracle APEX.


Javascript Reference:-

Enable Disable Item Reference:-

Post a Comment

3 Comments

If you have any doubts, Please let me know