Pages

OTP Countdown JavaScript Version 2 - Initial Page load countdown

 <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> &nbsp;
                        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 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>

Search This Blog