• OTP verification 2 minutes count down timer

    $('#regenerateOTP').on('click', function () {
      disableResend();
      timer(120);
            $.ajax({
                url: baseUrl + "index.php/request/sendOTP",
                type: 'post',
                data: { contactNo: $("#txtCustomerContactUpdate").val() },
                success: function (data) {
                    swal({ title: "Sweet!", text: "One time password Message is sent again", timer: 2000, imageUrl: "../images/thumbs-up.jpg" });
                },
                error: function () {
                    swal({ title: "Error!", text: "We are facing technical error!", type: "error", timer: 2000, confirmButtonText: "Ok" });
                    return false;
                }
            });
    
        });
    function disableResend()
    {
     $("#regenerateOTP").attr("disabled", true);
     timer(60);
      //$('.regenerateOTP').prop('disabled', true);
      setTimeout(function() {
        // enable click after 1 second
     $('#regenerateOTP').removeAttr("disabled");
        //$('.disable-btn').prop('disabled', false);
      }, 60000); // 1 second delay
    }
    let timerOn = true;
    
    function timer(remaining) {
      var m = Math.floor(remaining / 60);
      var s = remaining % 60;
      
      m = m < 10 ? '0' + m : m;
      s = s < 10 ? '0' + s : s;
      document.getElementById('timer').innerHTML = m + ':' + s;
      remaining -= 1;
      
      if(remaining >= 0 && timerOn) {
        setTimeout(function() {
            timer(remaining);
        }, 1000);
        return;
      }
    
      if(!timerOn) {
        // Do validate stuff here
        return;
      }
      
      // Do timeout stuff here
      alert('Timeout for otp');
    }
    
    <input type="text" name="otp" placeholer="Enter your otp"/>
    <button id="regenerateOTP" class="btn btn-warning btn_shadow" style="border-radius: 0;" >Resend OTP </button> 
    <div>Time left = <span id="timer"></span></div>
  • 5 comments:

    1. what if the user refresh the page? would the timer be reset?

      ReplyDelete
    2. Nice copy and paste, but it has a bug, try calling the timer again and the display clock keeps jumbling

      ReplyDelete
    3. More valuable post!!! Thanks for sharing this great post with us.
      Why is Java So Popular?
      Why Java?

      ReplyDelete
    4. Thanks for this blog, keep sharing your thoughts Like this...
      How Power BI Works
      Features Of Power BI

      ReplyDelete

    FAVOURITE LINE

    To steal ideas from one is plagiarism. To steal from many is Research.

    ADDRESS

    Mumbai , Maharashtra

    EMAIL

    shikha.pathak6@gmail.com
    shikha.the.swt.pari@gmail.com

    Skype

    shikha_pari