In this Oracle APEX Tutorial, We are going to see How to Add OTP Countdown 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);
3 Comments
How to create OTP in log in page of oracle apex? Please help me.
ReplyDeleteAwesome, Thanks
ReplyDeleteWelcome and Thanks
DeleteIf you have any doubts, Please let me know