In HTML 4, form elements can be defined as “readonly” so that the user can’t modify the value. However, you’ll notice that select controls (the drop-down lists) do not support the readonly attribute, just input and textarea controls. Can anyone out there please explain the rational behind this? It seems perfectly reasonable to have a readonly select box, especially if it is put into that state by a script.
I think my workaround will consist of making them disabled so they cannot be editted, and enabling them via a script right before the form submits so that the values for those controls are submitted (disabled controls are not successful and are not “valid for submission”).
If anyone can explain why selects can’t be made readonly, or give me a better solution for simulating readonly-ness, please share.
You can first disable the select in the HTML code, then enable them with javascript.
Then you add a handler to the onChange-event or something. This handler will set the selected index back to its original value (and also output an error message saying that you can’t change the values)
You could also make it more obvious that it’s read only by using CSS and give the elements a more grey look
You could leave it disabled and duplicate it with a hidden field.
josh++
this approch is very useful in lots of situations. for example – read only checkboxes (if checkbox is marked readonly you can still check/uncheck it – value of control IS read only, but UI state not
).
I have created a JavaScript snippet that will allow you to make your HTML select controls read-only simply by giving them an ID attribute and calling the script available on my site at http://www.codepug.com/readonlySelect.html
Happy coding!
–X
.