Disabled/Readonly

g_pmattoo

I have a dropdown box and I want that if the user selects a value located at index-3 in dropdown, the dropdown should become disabled and it should remember that value once user revisits the form. I have the code in place which makes the user remember the previous value selected but the problem is that if I use disabled keyword, the value won’t be submitted alongwith the form and readOnly doesn’t seem to work. Any idea how to go about it?
Instead of Dropdown, I could use radio buttons as well.

<select name="x_hold" onchange="CheckValue(this.value)">

function CheckValue(size1_value) {
if (val == '3') {
document.applicationsedit.x_hold.setAttribute('readOnly','readOnly');
//document.applicationsedit.x_hold.disabled = true
} else {
document.applicationsedit.x_hold.removeAttribute('readOnly');
//document.applicationsedit.x_hold.disabled = false 
}
}

NogDog

Have you tried this yet?

document.applicationsedit.x_hold.readOnly = true

g_pmattoo

I did but the drop down box will be editable now. I want to make the drop down box non-editable. Is that possible with dropdown or should i use Radio Buttons instead?

NogDog

Huh...I learn something new every day. Per the HTML Spec., the readonly attribute only applies to the INPUT and TEXTAREA tags. All I can think of at the moment is to add a hidden field, and then have your JavaScript function disable the select and also set the value to the hidden field. Then your form handler would check for the select value being set, and if not then for the hidden field value (or the reverse if you think that makes more sense).

dougal85

isn't there an enabled property? like on buttons?

bpat1434

An alternative to disabling it is to pop-up a transparent div over the drop-down. Then it's still visible, but the user wont' be able to select a different item since they can't click through a div 😉 I have never used this trick; however, I have run into this on occasion dealing with horizontal navigation via CSS.

To go a little further, you'd essentially have this:

<div>
    <div id="hider"></div>
    <select name="x_hold" onchange="CheckValue(this.value)">
    </select>
</div>

Then you'd give the hider div an absolute position of top: 0 and left: 0 which should put it at the top-left of the unnamed div. Then when they select the 3rd item, just make the hider 100% width and 100% height and maybe opacity=70% and grey and give it a z-index of 99. It will then pop "above" the select box and effectively disable the ability to change it's value. And since you're not disabling it, it's automatically put in the $_POST array 😉

NogDog

dougal85 wrote:
isn't there an enabled property? like on buttons?

I'm only aware of the "disabled" property. The problem is that when you disable a form element, it does not get included in the post/get data sent to the form handler, whereas it does with readonly elements. Therefore, if you disable it, you need to come up with an alternative method of getting that value to the server.

bpat1434 wrote:
An alternative to disabling it is to pop-up a transparent div over the drop-down. Then it's still visible, but the user wont' be able to select a different item since they can't click through a div 😉 I have never used this trick; however, I have run into this on occasion dealing with horizontal navigation via CSS.

To go a little further, you'd essentially have this:
<div>
    <div id="hider"></div>
    <select name="x_hold" onchange="CheckValue(this.value)">
    </select>
</div>
Then you'd give the hider div an absolute position of top: 0 and left: 0 which should put it at the top-left of the unnamed div. Then when they select the 3rd item, just make the hider 100% width and 100% height and maybe opacity=70% and grey and give it a z-index of 99. It will then pop "above" the select box and effectively disable the ability to change it's value. And since you're not disabling it, it's automatically put in the $_POST array 😉

One con for that approach would be the off chance that a user is accessing the site via a non-graphical browser (possibly including a text-to-speech alternative for the visually impaired). And, of course, any of these approaches - including mine - starts to fall apart if the user accesses it with JavaScript disabled.

bpat1434

Yes, that's very true Charles. But then again, how many people surf without javascript, and how many use non-graphical browsers?

In short form, there is no real easy way to do this. You either have to use Javascript, or some trick to hiding the enabled element from the user.

P.s. You think a moderator would know to edit their posts instead of double posting :p

dougal85

I think some browsers like IE6 don't let you put things over the top of input element.

You could always use the combination of a hidden field and a disabled (i always get confused and call it enabled) drop down...