$('#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>
Wow, Thank you!
ReplyDeletewhat if the user refresh the page? would the timer be reset?
ReplyDeleteNice copy and paste, but it has a bug, try calling the timer again and the display clock keeps jumbling
ReplyDeleteMore valuable post!!! Thanks for sharing this great post with us.
ReplyDeleteWhy is Java So Popular?
Why Java?
Thanks for this blog, keep sharing your thoughts Like this...
ReplyDeleteHow Power BI Works
Features Of Power BI