Spread the word.

Share the link on social media.

Share
  • Facebook
Have an account? Sign In Now

Sign Up Sign Up


Have an account? Sign In Now

Sign In Sign In


Forgot Password?

Don't have account, Sign Up Here

Forgot Password Forgot Password

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.


Have an account? Sign In Now

You must login to ask a question.


Forgot Password?

Need An Account, Sign Up Here

You must login to add post.


Forgot Password?

Need An Account, Sign Up Here

Please briefly explain why you feel this question should be reported.

Please briefly explain why you feel this answer should be reported.

Please briefly explain why you feel this user should be reported.

RTSALL Logo RTSALL Logo
Sign InSign Up

RTSALL

RTSALL Navigation

  • Home
  • About Us
  • Blog
  • Contact Us
Search
Ask A Question

Mobile menu

Close
Ask a Question
  • Meet The Team
  • Blog
  • About Us
  • Contact Us
Home/Questions/Q 1266

RTSALL Latest Articles

Queryiest
QueryiestEnlightened
Asked: April 7, 20232023-04-07T23:38:46-05:00 2023-04-07T23:38:46-05:00In: jQuery

I want when user click on button then send the otp to the user, and 30sec timer will start after 30sec there is button shown with the name resend OTP.

If you want to resend the OTP after the interval of 30sec, you can try this code.
If there are some changes done by your side then it will properly work.
Change id, class, and model as per your needs:-

Button 1:-

 <button type="button" class="btn btn-primary btn-sm"  data-toggle="modal" data-target="#myModal">Example</button>

<button type="button" class="btn btn-primary btn-sm btn-with-icon" id="get_otp">
Resend OTP
</button>

 <span id="countdownTimer" style="color: red; display: none;"></span>

 

Script Section:-
Note:- Include the Jquery CDN

<script>
// Get references to the "Approve" and "Get OTP Again" buttons
const approveButton = document.querySelector('.btn[data-target="#myModal"]');
const getOtpButton = document.getElementById('get_otp');

// Set an initial state for the "Get OTP Again" button
let getOtpButtonVisible = true;

// When the "Approve" button is clicked, hide the "Get OTP Again" button for 30 seconds
approveButton.addEventListener('click', () => {
getOtpButtonVisible = false;
getOtpButton.style.display = 'none';

let seconds = 30;
const display = document.createElement('span');
display.style.color = 'red';
display.style.fontSize = '16px';
getOtpButton.parentNode.insertBefore(display, getOtpButton);

const countdown = setInterval(() => {
seconds--;
if (seconds === 0) {
clearInterval(countdown);
display.parentNode.removeChild(display);
getOtpButtonVisible = true;
getOtpButton.style.display = 'inline-block';
} else {
display.textContent = "Resend OTP after " + seconds + " sec";
}
}, 1000);
});

// When the "Get OTP Again" button is clicked, hide it for 30 seconds
getOtpButton.addEventListener('click', () => {
getOtpButtonVisible = false;
getOtpButton.style.display = 'none';

let seconds = 30;
const display = document.createElement('span');
display.style.color = 'red';
display.style.fontSize = '16px';
getOtpButton.parentNode.insertBefore(display, getOtpButton);

const countdown = setInterval(() => {
seconds--;
if (seconds === 0) {
clearInterval(countdown);
display.parentNode.removeChild(display);
getOtpButtonVisible = true;
getOtpButton.style.display = 'inline-block';
} else {
display.textContent = "Resend OTP after " + seconds + " sec";
}
}, 1000);
});

// Periodically check if the "Get OTP Again" button should be visible
setInterval(() => {
if (getOtpButtonVisible) {
getOtpButton.style.display = 'inline-block';
} else {
getOtpButton.style.display = 'none';
}
}, 1000);
</script>
jquery otpotpotp configurationresend otp
  • 0
  • 0 0 Answers
  • 0 Followers
  • 0
  • Share
    Share
    • Share on Facebook
    • Share on Twitter
    • Share on LinkedIn
    • Share on WhatsApp

Leave an answer
Cancel reply

You must login to add an answer.


Forgot Password?

Need An Account, Sign Up Here

Sidebar

Ask A Question
  • Popular
  • Answers
  • Queryiest

    What is a database?

    • 3 Answers
  • Queryiest

    What is SQL and what is it used for?

    • 1 Answer
  • Anonymous

    What is a table in SQL?

    • 1 Answer
  • Queryiest
    Queryiest added an answer thanks October 22, 2025 at 12:22 am
  • Anonymous
    Anonymous added an answer A database refers to a structured body of information which… October 12, 2025 at 10:05 am
  • Queryiest
    Queryiest added an answer You know what "national cyber security" means, why it is… October 1, 2025 at 2:17 am

Related Questions

  • What is the method to redirect a user to a ...

    • 0 Answers
  • What is the purpose of using "use strict" in JavaScript, ...

    • 1 Answer
  • In jQuery, what is the way to check if an ...

    • 1 Answer
  • How do you attach an event handler to all elements ...

    • 0 Answers
  • How do you attach multiple event handlers to an element ...

    • 0 Answers

Top Members

Queryiest

Queryiest

  • 202 Questions
  • 295 Points
Enlightened
Anonymous

Anonymous

  • 11 Questions
  • 39 Points
Begginer
Abhay Tiwari

Abhay Tiwari

  • 5 Questions
  • 37 Points
Begginer

Trending Tags

ai asp.net aws basics aws certification aws console aws free tier aws login aws scenario-based questions c++ core cyber security cyber security interview git ipl java javascript jquery net core net core interview questions sql

Explore

  • Home
  • Add group
  • Groups page
  • Communities
  • Questions
  • Polls
  • Tags
  • Badges
  • Users
  • Help
  • New Questions
  • Trending Questions
  • Must read Questions
  • Hot Questions

Footer

About Us

  • Meet The Team
  • Blog
  • About Us
  • Contact Us

Legal Stuff

  • Privacy Policy
  • Disclaimer
  • Terms & Conditions

Help

  • Knowledge Base
  • Support

Follow

© 2023-25 RTSALL. All Rights Reserved

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.