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>