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 and the Specify Occupation text box should once again be 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 suggestion to me on the best way to handle this scenario and provide a tweek to the code above to fix the setting/resetting on the readonly property?

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 and the Specify Occupation text box should once again be 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 suggestion to me on the best way to handle this scenario and provide a tweek to the code above to fix the setting/resetting on the readonly property?

• asp
• javascript
• html

• You almost never want to use hand written css selector javascript, use a framework such as jQuery to select elements. – Chris Marisic Commented Apr 30, 2010 at 14:39
• I'm a bit confused - why are you stopping the user from entering a specific occupation? I understand defaulting it when they click an option above, but why can't they enter their own title? - For the record, I have yet to find a single site that lists my exact "occupation title" in the last 10 years... most survey sites believe I'm in "Information Technology" as that was the closest match. – scunliffe Commented Apr 30, 2010 at 14:40
• It's only stopping them if they select "Retired". All the other options allow specifying the occupation. – Nelson Rothermel Commented Apr 30, 2010 at 14:41
• If you really only want them to enter a custom title if they pick "other", then hide the text box, and only display it when "other" is selected. – scunliffe Commented Apr 30, 2010 at 14:42
• Re: "You almost never want to use hand written css selector javascript, use a framework such as jQuery to select elements." Why not? I don't know jQuery, which is new. What did people do before jQuery? – Chad Commented Apr 30, 2010 at 14:45

2 Answers 2

I would use jQuery instead it's super easy to implement...

To set the textbox as readonly...

$("#myTxtID").attr('readonly', 'readonly');

To set the textbox as not readonly

$("#myTxtID").removeAttr('readonly');

I recently had to do the same thing. Here's how I solved it.

1. go back to using the disabled property rather than readonly.

2. replace the RequiredFieldValidator with a CustomValidator. in your client and server validation functions, determine if you need to check the text input based on the condition of the Retired radio button. then check for input in the text box if you need to. (on the js side you can check the disabled property on the textbox itself to save yourself a step).

3. on the server side you should double check the radio button selection, and if "Retired" is selected, you should make sure that "Occupation" value is actually "Retired". this gets you around the issue of not getting a value from a disabled field, and you should be doing it anyway (never trust the user and all that).