How to Permanently Disable a button using Javascript in asp.net?

Question

I've created a countdown timer using javascript in asp.net. After completion of time, Button1 becomes disabled, but when I reload the page, the countdown timer is reset and Button1 is enabled.

I want to permanently disable Button1 when timer is equal to zero. My code is:

var tim;
var min = 01;
var sec = 00;
var f = new Date();
function f1() {
  f2();
}

function f2() {
  if (parseInt(sec) > 0) {
    sec = parseInt(sec) - 1;
    document.getElementById("showtime").innerHTML = ""+min+" Minutes ,"+sec+" Seconds";
    tim = setTimeout("f2()", 1000);
  }
  else {
    if (parseInt(sec) == 0) {
      min = parseInt(min) - 1;
      if (parseInt(min) == -1) {
        clearTimeout(tim);
        $("#Button1").prop('disabled', true);
      }
      else {
        sec = 60;
        document.getElementById("showtime").innerHTML = "" + min + " Minutes ," + sec + " Seconds";
        tim = setTimeout("f2()", 1000);
      }
    }
  }
}

<body onload="f1()">
<div><h3>Time will be finished after:</h3>
</div>
<div id="showtime"></div>
<div> <asp:Button ID="Button1" runat="server" Text="Submit"/></div>`
</body>

every time you refresh the page the countdown restarts – Aug 15 '17 at 11:34 — , Aug 15 '17 at 11:34
this is the main problem im facing :( @ashik – Owais Aug 15 '17 at 11:41 — Owais, Aug 15 '17 at 11:41

score 1 · Answer 1 · answered Aug 17 '17 at 05:33

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>

<script>
function f2() {
  if (parseInt(sec) > 0) {
    sec = parseInt(sec) - 1;
    document.getElementById("showtime").innerHTML = ""+min+" Minutes ,"+sec+" Seconds";
    tim = setTimeout("f2()", 1000);
  }
  else {
    if (parseInt(sec) == 0) {
     min = parseInt(min) - 1;
       if (parseInt(min) == -1) {
        clearTimeout(tim);
        $("#Button1").prop('disabled', 'true');
        storeValue('disabled', 'true');
       }
       else {
       sec = 60;
       document.getElementById("showtime").innerHTML = "" + min + " Minutes ," + sec + " Seconds";
       tim = setTimeout("f2()", 1000);
       }
     }
   }
 }
 function storeValue(key, value) {
  if (localStorage) {
    localStorage.setItem(key, value);
  } else {
    $.cookies.set(key, value);
  }
 }

function getStoredValue(key) {
  if (localStorage) {
    return localStorage.getItem(key);
  } else {
    return $.cookies.get(key);
  }
}
function f1() {
 f2();
 var model =getStoredValue('disabled');
 if(model == 'true')
 {
   $("#Button1").prop('disabled', 'true');
 }
}
var tim;
var min = 01;
var sec = 00;
var f = new Date();
</script>

Use this code and make the thrid party localstorage to use in browser

Thank you so much for your precious time and help :) @Saneesh — Owais, Aug 17 '17 at 09:26

score 0 · Answer 2 · answered Aug 15 '17 at 11:40

When you reload the page, the state of the page is completely reset so it's as if a new visitor has found your page so you need to be able to store that state between visits.

One solution would be to use a cookie which you could set when the timer expires, and check for the presence of the cookie when the page loads. If it's there, disable the button straight away without a timer.

A more complicated solution would be to investigate saving session state on your server, but I've no idea what you have going on server-side so I can't give you much to go on there.

score 0 · Answer 3 · answered Aug 15 '17 at 11:43

0

You could set a cookie when timer is off. And at every page load check for the cookie and disable the button if required. There is no other way.

FYI: you could use the same cookie to disable the button at server side itself.

answered Aug 15 '17 at 11:43

iMatoria

1,450
2
19
35

score -1 · Answer 4 · answered Aug 15 '17 at 11:33

-1

Javascript

 document.getElementById("myBtn").disabled = true;

or if u need it with a jquery- Click

$('.rbutton').on('click',function() {
$(this).prop("disabled",true);
});

answered Aug 15 '17 at 11:33

Solan

91
1
3

thanks but i want to disable it permanently after completion of time. because, now it disable button for a while but after reloading webform, button is again enabled & the timer again starts from begining. – Owais Aug 15 '17 at 11:38

How to Permanently Disable a button using Javascript in asp.net?

4 Answers4