<button id="resendOtp" class="btn mt-0 mb-3 d-block w-100" onclick="resendOtp()" type="button" style="border:0px solid #1f3d88; background:transparent; color:#1f3d88;"> <i class="fa-solid fa-rotate-right"></i> Resend OTP </button> <div id="countdown" style="display: block; text-align: center; font-size: 12px; color: #fdb827;"> Resend OTP in <span id="timer">120</span> seconds </div> <script> function startCountdown() { const resendButtonInit = document.getElementById("resendOtp"); resendButtonInit.disabled = true; let seconds = 120; // Function to update the countdown timer function updateTimer() { const timer = document.getElementById("timer"); timer.textContent = seconds; seconds--; if (seconds < 0) { // Hide the countdown when the timer reaches 0 const countdownDiv = document.getElementById("countdown"); countdownDiv.style.display = "none"; resendButtonInit.disabled = false; } else { // Continue updating the timer setTimeout(updateTimer, 1000); } } // Start the countdown updateTimer(); } // Call startCountdown function when the page loads window.onload = startCountdown; var resendOtpBtn = document.getElementById("resendOtp"); resendOtpBtn.addEventListener('click',function(){ resendOtp(); }); function resendOtp() { // Get the value of the textPhoneNumber input field const phoneNumber = document.getElementById("textPhoneNumber").value; // Disable the "Resend OTP" button const resendButton = document.getElementById("resendOtp"); resendButton.disabled = true; // Show the countdown timer const countdownDiv = document.getElementById("countdown"); countdownDiv.style.display = "block"; let seconds = 120; // Function to update the countdown timer function updateTimer() { const timer = document.getElementById("timer"); timer.textContent = seconds; seconds--; if (seconds < 0) { // Re-enable the button and hide the countdown when the timer reaches 0 resendButton.disabled = false; countdownDiv.style.display = "none"; } else { // Continue updating the timer setTimeout(updateTimer, 1000); } } // Start the countdown updateTimer(); // Create a JSON object with the MobileNo property const data = { MobileNo: phoneNumber }; // Send a POST request to the API endpoint fetch("https://localhost:7146/api/security/resend-otp", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }) .then(response => { if (response.ok) { // Handle success //alert("OTP resend request successful"); } else { // Handle errors alert("OTP resend request failed"); } }) .catch(error => { console.error("An error occurred:", error); }); } </script>
OTP Countdown JavaScript Version 2 - Initial Page load countdown
OTP Countdown Script Javascript
<button id="resendOtp" class="btn mt-0 mb-3 d-block w-100" onclick="resendOtp()" type="button" style="border: 0px solid #1f3d88; background: transparent; color: #1f3d88;">Resend OTP</button> <input class="form-control valid" id="textPhoneNumber" readonly="" type="text" data-val="true" data-val-regex="Not a valid phone number." data-val-regex-pattern="^(?:7|0)[0-9]{9,9}$" data-val-required="Phone number is Required." name="PhoneNumber" value="0717194022" aria-describedby="textPhoneNumber-error" aria-invalid="false"> <div id="countdown" style="display: block;">Resend OTP in <span id="timer">120</span> seconds</div> <script> function startCountdown() { let seconds = 120; // Function to update the countdown timer function updateTimer() { const timer = document.getElementById("timer"); timer.textContent = seconds; seconds--; if (seconds < 0) { // Hide the countdown when the timer reaches 0 const countdownDiv = document.getElementById("countdown"); countdownDiv.style.display = "none"; } else { // Continue updating the timer setTimeout(updateTimer, 1000); } } // Start the countdown updateTimer(); } // Call startCountdown function when the page loads window.onload = startCountdown; function resendOtp() { // Get the value of the textPhoneNumber input field const phoneNumber = document.getElementById("textPhoneNumber").value; // Disable the "Resend OTP" button const resendButton = document.getElementById("resendOtp"); resendButton.disabled = true; // Show the countdown timer const countdownDiv = document.getElementById("countdown"); countdownDiv.style.display = "block"; let seconds = 120; // Function to update the countdown timer function updateTimer() { const timer = document.getElementById("timer"); timer.textContent = seconds; seconds--; if (seconds < 0) { // Re-enable the button and hide the countdown when the timer reaches 0 resendButton.disabled = false; countdownDiv.style.display = "none"; } else { // Continue updating the timer setTimeout(updateTimer, 1000); } } // Start the countdown updateTimer(); // Create a JSON object with the MobileNo property const data = { MobileNo: phoneNumber }; // Send a POST request to the API endpoint fetch("https://localhost:7146/api/security/resend-otp", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }) .then(response => { if (response.ok) { // Handle success console.log("OTP resend request successful"); // You can add further code here for a successful response } else { // Handle errors console.error("OTP resend request failed"); // You can add error handling code here } }) .catch(error => { console.error("An error occurred:", error); // Handle network errors here }); } </script>
Boostrap 5 Common code to place on layout page, then any boostrap modal on close, form data inside the modal will be cleared
<pre> <script> document.addEventListener('hidden.bs.modal', function (e) { var modal = e.target; // The modal that triggered the event // Check if the modal contains a form var form = modal.querySelector('form'); if (form) { form.reset(); // Reset the form if a form is found } }); </script> </pre>
Subscribe to:
Posts (Atom)