Using Javascript to flip flop a textbox's readonly flag
- by Velika
I have a frame with several radio buttons where the user is supposed to select the "Category" that his Occupation falls into and then unconditionally also specify his occupation.
If the user selects "Retired", the requirement is to prefill "Retired" in the "Specify Occupation" text box and to disable it to prevent it from being changed. The Specify Occupation text box should also no longer be a tab stop. If the user selects a radio button other than Retired the Specify Occupation text box should be enabled and once again in the normal tab sequence.
Originally, I was setting and clearing the disabled property on the Specify occupation textbox, then I found out that, upon submitting the form, disabled fields are excluded from the submit and the REQUIRED validator on the Specify Occupation textbox was being raised because the textbox was being blanked out.
What is the best way to solve this? My approach below was to mimic a disabled text box by setting/resetting the readonly attribute on the text box and changing the background color to make it appear disabled. (I suppose I should be changing the forecolor instead of teh background color). Nevertheless, my code to make the textbox readonly and to reset it doesn't appear to be working.
function OccupationOnClick(sender) {
debugger;
var optOccupationRetired = document.getElementById("<%= optOccupationRetired.ClientId %>");
var txtSpecifyOccupation = document.getElementById("<%= txtSpecifyOccupation.ClientId %>");
var optOccupationOther = document.getElementById("<%= optOccupationOther.ClientId %>");
if (sender == optOccupationRetired) {
txtSpecifyOccupation.value = "Retired"
txtSpecifyOccupation.readonly = "readonly";
txtSpecifyOccupation.style.backgroundColor = "#E0E0E0";
txtSpecifyOccupation.tabIndex = -1;
}
else {
if (txtSpecifyOccupation.value == "Retired")
txtSpecifyOccupation.value = "";
txtSpecifyOccupation.style.backgroundColor = "#FFFFFF";
txtSpecifyOccupation.readonly = "";
txtSpecifyOccupation.tabIndex = 0;
}
}
Can someone provide a suggest for the best way to handle this scenario and porovide a tweek to the code above to fix the setting/resetting on the readonly property?
