Button gets enabled on refresh

Question

I've 2 buttons in my HTML page, first one is enabled and the second one is disabled and when I click the first the first one, the first one gets disabled and the second one is enabled and the same goes with the second button, when I click the second button (When this gets enabled), the first one gets disabled, and this is working totally fine. Here I came up finding this problem when I did a refresh accidentally.

I click the first button, the second gets enabled, disabling the first one. After a refresh it goes to the initial state, i.e., the first gets enabled and second is disabled.

Below is the piece of code.

<tr>
    <td>SubTask</td>
    <td>
       <select id="subtask" name="subtask">
           <option value="Subtask">Subtask</option>
       </select>
    </td>
</tr>
<tr>
    <td><input type="button" value="Start" name="Start" id="Start" /></td>
    <td><input type="button" value="Stop" name="Stop" id="Stop" disabled="disabled" /></td>
</tr>



<script type="text/javascript">
    $(document).ready(function() {
        var form = $('#formSec');
        var task = document.getElementById('task');
        var subtask = $('#subtask');
        $('#Start').on("click", function() {
            $.ajax({
                type : "post",
                url : "UpdateStartTime",
                data : form.serialize(),
                success : function() {
                    $('#task').attr("disabled", true);
                    $('#subtask').attr("disabled", true);
                    $('#Start').attr("disabled", true);
                    $('#Stop').attr("disabled", false);
                }
            });
            return false;
        });

        $('#Stop').on("click", function() {
            var form = $('#formSec');
            var task = document.getElementById('task');
            var subtask = $('#subtask');
            $.ajax({
                type : "post",
                url : "UpdateEndTime",
                data : form.serialize(),
                success : function() {
                    $('#task').attr("disabled", false);
                    $('#subtask').attr("disabled", false);
                    $('#Start').attr("disabled", false);
                    $('#Stop').attr("disabled", true);
                }
            });
            return false;
        });

    });
</script>

There is some posting functionality added in the js above, please ignore it.

Answer 1

U can achieve this by setting a variable to localStorage. That will give you the facility to access the tiggered button.

Such as:

$('#Start').on("click", function() {
  if (typeof(Storage) !== "undefined") {
    localStorage.setItem("clickStat", "start");
  }
});

similarly..

$('#Stop').on("click", function() {
  if (typeof(Storage) !== "undefined") {
    localStorage.setItem("clickStat", "stop");
  }
});

The access that in this way:

if (typeof(Storage) !== "undefined") {
   var stat = localStorage.getItem("clickStat");
   if(stat == "start"){
     $('#Start').attr("disabled", true);
     $('#Stop').attr("disabled", false);
   }else{
     $('#Start').attr("disabled", false);
     $('#Stop').attr("disabled", true);
   }
}

Answer 2

When you update the button state, save it to localStorage:

localStorage.setItem("btn1enabled", false);
localStorage.setItem("btn2enabled, true);

Then, when you load the page, you can enabled/disabled the buttons based on what

localStorage.getItem("btn1enabled"); and localStorage.getItem("btn2enabled");

give you.

(note: localStorage won't have anything saved the first time you load the page, so you will have to consider that case in code)