After refer to page as Getting value of select (dropdown) before change, I am trying to implement below logic with jQuery:
Two element relation: indicator toggle yes/no to control reason editable or not The 1st column is when page load indicator initial value, last column is final choice, column(s) between are redundant option(especially in case user just toggle it but not really want anything on reason), because indicator actually only contain yes/no two values, simplify 4 cases below:
(1) Y - N (indicator on page load as Y, finally change to N) --> reason editable
(2) Y - N - Y (indicator on page load as Y, redundant change as N, finally change to Y) --> reason editable
(3) N - Y (indicator on page load as N, finally change to Y) --> reason editable
(4) N - Y - N (indicator on page load as N, redundant change as Y, finally change to N) --> reason NOT editable
The problem now is as code below, it never hit case (4), I observe indicator previous value retrieved, but it seems NOT keep as initial value when page load, e.g when page load, indicator is 'N', user first change it to 'Y', then change back to 'N', but the pre data value will be 'Y', not what I expect as original page load initial value 'N', I use a pop up dialog to observe this issue.
Could someone help me to figure out how to change this code to implement the logic above which including case (4) ?
(I guess it relate to last statement in script section as jqThis.data("prev", after_change);
which update the previous data) ? But how to add logic before that to keep a real initial previous value (on page load value) for use in if-else logic ?
$(window).load(function() {
var indicator = $(document.getElementById("indicator"));
// set the pre data, usually needed after you initialize the select element
indicator.data("prev", indicator.val());
// Handle initial status of indicator, when page load, if it is 'N' disable
// reason field, if it is 'Y' open reason field
if (indicator.data("prev") == 'N') {
$(document.getElementById("reason")).attr('disabled', 'disabled');
} else {
$(document.getElementById("reason")).removeAttr('disabled');
}
// Handle change status of indicator,
indicator.change(function(data) {
var jqThis = $(this);
// get changed data
var after_change = jqThis.val();
// get the pre data (Question : I expect the pre data should be original page load value, but
// seems it always the latest one before current value ?)
// e.g when page load, indicator is 'N', user first change it to 'Y', then change back to 'N', but
// the pre data value will be 'Y', not what I expect as original page load initial value 'N'
// I use a pop up dialog to observe this issue.
var before_change = jqThis.data("prev");
// Debug
console.log("before:",before_change);
// do your work here
if (before_change == 'N' && after_change == 'Y') {
// Change indicator from No to Yes, please type in reason
$(document.getElementById("reason")).attr('disabled', 'disabled');
} else if (before_change == 'Y' && after_change == 'N') {
// Change indicator from Yes to No, please type in reason
$(document.getElementById("reason")).attr('disabled', 'disabled');
} else if (before_change == 'N' && after_change == 'N') {
// Keep indicator as its initial status No
$(document.getElementById("reason")).removeAttr('disabled');
} else if (before_change == 'Y' && after_change == 'Y') {
// Keep indicator as its initial status Yes, if necessary you can type in new reason
$(document.getElementById("reason")).attr('disabled', 'disabled');
}
// update the pre data
jqThis.data("prev", after_change);
});
});
.htmlClass {
padding: 8px;
border: 1px solid blue;
margin-bottom: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form name="myform">
<div align="center">
<select id="indicator">
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
<textarea id="reason">
</textarea>
</form>