Pages

Boostrap 5 keep last opened tab ID after page reload using Local Storage

Max length input validation inline with javascript

 <input type="text" class="form-control" id="txtProjectCreateProjectCode"

placeholder="Project Code" required oninput="if (this.value.length > 50) this.value = this.value.slice(0, 50);" name="CreateProject.Code" value="">

Bootstrap 5 Logout confirmation for .net core

    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Logout Confirmation</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Are you sure you want to sign out?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <form id="logoutForm" asp-action="logoff" asp-controller="Auth" class="navbar-right">
                        <a class="btn btn-primary"
                      @*   onclick="return alert('Are you sure do you want to sign out?')" *@
                        href="javascript:document.getElementById('logoutForm').submit()"><i class="mdi mdi-logout me-1"></i><span>Logout</span></a>
                    </form>
                </div>
            </div>
        </div>
    </div>
 <a href="javascript:void(0);" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#exampleModal">
     <i class="mdi mdi-logout me-1"></i> Logout
 </a>

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>

Search This Blog