Reputation: 27
I want to disable button for 10 minutes after clicking on it and even on refresh it will remain disabled. How can i make it in javascript or jquery ? I just cant seem to make it for my code.
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js">
$(document).ready(function(){
var limit = 10*60*1000;
btn.attr("disabled", true);
btn.css('cursor','not-allowed');
message.text('wrong answer, please wait 10 minutes before trying again');
var timer = setTimeout(disableMyButton, limit);
function disableMyButton(){
btn.removeAttr("disabled");
message.text('');
localStorage.setItem("isMyButtonDisabled", "true");
}
if(localStorage.getItem("isMyButtonDisabled") == "true"){
message.text('');
btn.removeAttr("disabled");
window.clearTimeout(timer);
}
});
</script>
Upvotes: 1
Views: 1517
Reputation: 892
You have the right idea. Use the localStorage but put the timestamp in there. Then when the page is loaded, grab the timestamp from localStorage. If the difference between the localStorage timestamp and now is over 10 minutes, then enable the button. If not, set the timeout appropiately. The only problem is keeping the localStorage clean. Make sure you wipe out the timestamp at the end of the 10 minutes.
Upvotes: 2