Michael Hill wrote:
On the other hand - readonly - should be - readOnly - with a capital
'O' if some sort of reaction is to be expected from the browsers.
Thanks,
This works great !
Only by chance.
<html>
<head>
<title>MY TITLE</title>
^^^^^^^^^^^^^^^^^^^^^^^[0] <script type="text/javascript">
function ck_street()
^^[1] {
//if the selected item is not the selectedIndex 3 then the control
^^[2] becomes readOnly
document.street_frm.elements["street"].readOnly =
^^^^^^^^^^^^^^^^^^^^^^^^^^^^ (document.street_frm.elements["street_sel"].selectedIndex!=3)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^[1] //alert(document.street_frm.elements["street_sel"].selectedIndex==3);
^^^^^^^^^^^^^^^^^^^^^^^^^^^^ if ( document.street_frm.elements["street_sel"].selectedIndex!=3 )
^^^^^^^^^^^^^^^^^^^^^^^^^^^^ {
document.getElementById("street_id").style.backgro und="#eaeaea";
[3]^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [4]^^^^^^^^^^^^^^^^^^^^ document.street_frm.elements["street"].value=
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ document.street_frm.elements["street_sel"]
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .options[document.street_frm.elements["street_sel"].selectedIndex]
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .value;
}
else
{
document.getElementById("street_id").style.backgro und="#ffffff";
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^[5] ^^^^^^^[4] document.street_frm.elements["street"].value="";
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^[5] }
}
</script>
</head
^^^^^^[6] <body>
<form name="street_frm">
^^^^^^^^^^^^^^^^^^^^^^^^[6] <input id='street_id' readOnly type='text'
^^^^^^^^^^^[7] style='background:#eaeaea;' name='street' maxlength='20' size='20'>
^^^^^^^^^^^^^^^^^^^[4] <select name='street_sel' size='1' onchange='ck_street();'>
^^^^^^^^[8] ^^[1] <option value='' selected>select item</option>
^^^^^^^^[9] <option value='abc'>abc</option>
<option value='def'>def</option>
<option value='unk'>street not in list</option>
</select>
</form>
</body>
</html>
[0] The "title" element is the most important element of a quality
(X)HTML document:
<http://www.w3.org/QA/Tips/good-titles>
[1] Use short references whereever possible. If you have an event
listener for a DOM object, pass it a reference to the calling
object (`this') if you use it within the listener, rather than
looking it up again. If you look up a reference more than
once, assign it to a variable and further use that variable
as reference. It not only makes your code easier legible and
easier to maintain, but also considerably faster.
[2] Do not use tab characters for indentation, especially not when
posting code. How a tab character is interpreted differs between
editors and terminals. Use two and/or four spaces instead (many
editors, like eclipse or vim, can be configured to replace Tab
with spaces and unindent those spaces if Backspace is pressed
on a line or Shift-Tab is pressed on selected code).
And do not let your source code and postings exceed ca. 80
characters per line since it otherwise becomes hardly legible.
[3] Do not use a particular DOM without testing, do not use methods
where not necessary and do not use a method in a reference when
it is not guaranteed that it returns a (useful) reference. What
works in one user agent without error will cause one or more
errors in another, because language implementations and DOMs
differ. A method call is usually slower than accessing a
collection, and in this case, the collection is as standards
compliant as the method but also downwards compatible (while
the method is not):
<http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268>
<http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-40002357>
<http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBId>
<http://www.pointedears.de/scripts/test/whatami>
[4] Use only the CSS properties you actually use. If you only want to
change the background color, use "background-color" (in a script:
`backgroundColor'), not "background". Changing a shorthand
property, like "background", requires a change of all individual
properties which is slower and often causes other undesired
behavior:
<http://www.w3.org/TR/CSS2/colors.html#propdef-background>
Use true Web-safe colors whereever possible. Web-safe colors as
introduced by Adobe Photoshop avoid the incompatibility between
the Mac and the PC color palette by using only the hexadecimal
values of 0x0, 0x33, 0x66, 0x99, 0xCC and 0xFF for each RGB
component, while true Web-safe colors additionally remove the
dependency on the color depth of the display by allowing only
0x0, 0x3, 0x6, 0x9, 0xC and 0xF for each component, where each
value is internally duplicated if, and only if, that is
appropriate:
<http://www.w3.org/TR/REC-CSS2/syndata.html#value-def-color>
If you specify the background color, specify the foreground
color as well, and vice-versa. Users may have defined a
stylesheet for themselves or you yourself may have overlooked
inheritance in your stylesheets which could render parts of
your document illegible:
<http://www.w3.org/QA/Tips/color>
[5] Those two references point to the same DOM object.
No need for not downwards compatible IDs.
[6] Validate your markup and stylesheets. Invalid markup and
stylesheets may work with one user agent that does error
correction (or simply does not follow the specs [to the
letter]) but will fail badly with another one with more
strict parsers.
<http://validator.w3.org/>
<http://jigsaw.w3.org/css-validator/>
[7] "text" is the initial value for the "type" attribute of the
"input" element. You can safely omit that attribute:
<http://www.w3.org/TR/html4/interact/forms.html#edef-INPUT>
[8] Try to avoid the "onchange" event handler of the "select" element
if its size attribute is "1". Users not using a pointing device may
not know about how to show the selection list without changing the
selection itself (if that is possible) and they may accidentally
submit the form if you, e.g., submit() the form then. Rather use
the "onclick" event handler for users with a pointing device and
provide a button for the other users to state that the selection
made is wanted.
[9] The first option is selected by default, the "selected" attribute
is not needed here.
Having said this, much more efficient, working almost
always without error and being Valid HTML 4.01 is
<!DOCTYPE html PUBLIC "-//W3C//DTD//HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Street Selection</title>
<script type="text/javascript">
function ck_street(sel) // [1]
{
var el;
if (sel && (el = sel.form) && (el = el.elements)) // [1]
{
// if the selected item is not the selectedIndex 3 then the
// control becomes readOnly
var street = el["street"]; // [1]
// alert(sel.selectedIndex == 3);
if ((street.readOnly = (sel.selectedIndex != 3)))
{
var s;
if (typeof (s = street.style) != "undefined"
&& typeof s.backgroundColor != "undefined") [3]
{
s.backgroundColor = "#ccc"; // [4]
}
street.value = sel.options[sel.selectedIndex].value;
}
else
{
if (typeof (s = street.style) != "undefined"
&& typeof s.backgroundColor != "undefined")
{
s.backgroundColor = "#fff";
}
street.value = "";
}
}
}
</script>
</head>
<body>
<form action="..." name="street_frm">
<div>
<input name="street" maxlength="20" size="20" readonly
style="background-color:#ccc; color:#000">
<select name="street_sel" size="1" onclick="ck_street(this);">
<option value="">select item</option>
<option value="abc">abc</option>
<option value="def">def</option>
<option value="unk">street not in list</option>
</select>
<input type="button" value="Apply"
onclick="ck_street(this.form.elements['street_sel'])">
</div>
</form>
</body>
</html>
HTH
PointedEars
