Rakesh Rakesh - 5 months ago 21
jQuery Question

Button gets enabled on refresh

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.

Please let me know where am I going wrong and how can I fix this.

Thanks

Answer

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);
   }
}
Comments