Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Need a readonly select

Status
Not open for further replies.

crabgrass

Technical User
Aug 29, 2007
111
US
I have a web based data display/input form that contains a couple of <SELECT> dropdown inputs. The controls on the form are disabled (readonly) until the user clicks the EDIT button. With js I can cause the readonly inputs to become editable. However the <select>s do not support readonly and I must use disabled instead. This also works but the display of the disabled select is not to my liking. Is there a way to control the font color and background of the disabled select? Alternatively, is there a way to simulate the readonly attribute in a select so it will appear with black text rather than grayed out text?

Thanks for any help.
 
you'd need to use javascript to "pretend" the field is disabled. you could then style it to look however you want. or, you could maybe put an iframe over the select box, but i believe there may be some browsers that don't allow anything to be positioned over a select.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Since I suspect you're using javascript to switch from readonly to editable anyway, I would suggest you use javascript with the onfocus event handler.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
The idea kernal is there but the details escape me. Suppose onfocus calls a js function that is intended to prevent the select from opening.
<code>
fnKillSelect(){

}
</code>
What should be in the function?
 
This would belong more in the forum216 (and if you want a better solution, you should ask there), but you could simply add [tt]onfocus="this.blur()"[/tt].

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
I use the onfocus and onchange methods for this myself. And I add the properties ro (readonly) and ival (init value) to the element. To turn on the readonly status on the select, set it's ro property to true, or false to make it editable again.

JavaScript:

Code:
function saveVal()
{
var obj = event.srcElement;
obj.ival = obj.selectedIndex;
}

function unchangeVal()
{
var obj = event.srcElement;
   if (obj.ro) {obj.selectedIndex = obj.ival;}
}

HTML:

Code:
<select id="mymenu" ro onfocus="saveVal();" onchange="unchangeVal();">
<option>1</option>
<option>2</option>
<option>3</option>
</select>

<input type="button" value="Edit" onclick="document.getElementById('mymenu').ro = false;">
<input type="button" value="Make readonly" onclick="document.getElementById('mymenu').ro = true;">

- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]
 
Thanks but it doesn't seem to work for me. Placing ro in the select does not affect the control. My understanding is that selects do not support the readonly attribute.

I have a possible solution by providing a pair of controls, one textbox and one select both with the same value. The select is hidden by setting the width to 0. The textbox is set to readonly=true. Clicking the Edit button sets the text width to 0 and sets the select to the desired width. This simulates switching the type of control to be appropriate with the needed action.

If anyone has a better idea please let me know.
 
the better idea would be to not listen to Lowet, because he's providing you with suggestions that will throw your pages into quirks mode.

if you absolutely cannot have someone changing the select, and the javascript solutions don't work, how about displaying some simple text (perhaps in a <span> tag) instead of the select, when the select should not be editable?



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top