Turn Input On or Off

[Michael Hill]

I have this input element:
<input type='text' name='street' maxlength='20' size='20'>
that I only want the user to be able to input to based on a item from a
select list:
<select name='street_se l' size='1' onchange='ck_st reet();'>
<option value='abc'>abc </option>
<option value='def'>abc </option>
<option value='unk'>str eet not in list</option>
</select>

When the user change the item from the select list then the select value
text gets loaded to the input item.

If the item is not in the select list, then selecting "street not in list"
should enable the input element.

When I talk about enabling the input element I mean either changing the:
type from 'hidden' to 'text' or
changing the readonly='false ' to readonly='true' or
changing dispaly='none' to display='block'

None of these seem "enabling" ideas seem to work. Anyone know what I am
missing or is ther another option?

I'd like to limit the streets the user selects to the list, but I know there
are other possibilities and so the user should be able to enter these other
ones.

Any help is appreciated.

Mike

[Mick White]

Re: Turn Input On or Off

Michael Hill wrote:
[color=blue]
> I have this input element:
> <input type='text' name='street' maxlength='20' size='20'>
> that I only want the user to be able to input to based on a item from a
> select list:
> <select name='street_se l' size='1' onchange='ck_st reet();'>
> <option value='abc'>abc </option>
> <option value='def'>abc </option>
> <option value='unk'>str eet not in list</option>
> </select>[/color]

function ck_street(){
document.forms[0].elements["street"].readonly =
(document.forms[0].elements["street_sel "].selectedIndex= =2)
}

Mick[color=blue]
>
> When the user change the item from the select list then the select value
> text gets loaded to the input item.
>
> If the item is not in the select list, then selecting "street not in list"
> should enable the input element.
>
> When I talk about enabling the input element I mean either changing the:
> type from 'hidden' to 'text' or
> changing the readonly='false ' to readonly='true' or
> changing dispaly='none' to display='block'
>
> None of these seem "enabling" ideas seem to work. Anyone know what I am
> missing or is ther another option?
>
> I'd like to limit the streets the user selects to the list, but I know there
> are other possibilities and so the user should be able to enter these other
> ones.
>
> Any help is appreciated.
>
> Mike
>
>[/color]

[Michael Hill]

Re: Turn Input On or Off

> function ck_street(){[color=blue]
> document.forms[0].elements["street"].readonly =
> (document.forms[0].elements["street_sel "].selectedIndex= =2)
> }
>[/color]

I thought "readonly" should only be "true" or "false"? Why are you changing
it to the text that is selected?

Mike

[Ivo]

Re: Turn Input On or Off

"Michael Hill" <hillmw@charter .net> wrote in message
news:10e70o2ap2 vgi4a@corp.supe rnews.com...[color=blue][color=green]
> > function ck_street(){
> > document.forms[0].elements["street"].readonly =
> > (document.forms[0].elements["street_sel "].selectedIndex= =2)
> > }
> >[/color]
>
> I thought "readonly" should only be "true" or "false"? Why are you[/color]
changing[color=blue]
> it to the text that is selected?[/color]

He isn't. What is between the (brackets) after the first =equal sign, is a
test whether the selected option is the third (no. 2). Hence the double
==equal sign. The test is either true or false.
HTH
Ivo

[Richard Cornford]

Re: Turn Input On or Off

Ivo wrote:[color=blue]
> Michael Hill wrote:[color=green]
>> Mick White wrote:[color=darkred]
>>> function ck_street(){
>>> document.forms[0].elements["street"].readonly =
>>> (document.forms[0].elements["street_sel "].selectedIndex= =2)
>>> }
>>>[/color]
>>
>> I thought "readonly" should only be "true" or "false"? Why are you
>> changing it to the text that is selected?[/color]
>
> He isn't. What is between the (brackets) after the first =equal sign,
> is a test whether the selected option is the third (no. 2). Hence the
> double ==equal sign. The test is either true or false.[/color]

On the other hand - readonly - should be - readOnly - with a capital 'O'
if some sort of reaction is to be expected from the browsers.

Richard.

[Michael Hill]

Re: Turn Input On or Off

>[color=blue]
> On the other hand - readonly - should be - readOnly - with a capital 'O'
> if some sort of reaction is to be expected from the browsers.
>[/color]
Thanks,

This works great !

<html>
<head>
<title>MY TITLE</title>
<script type="text/javascript">
function ck_street()
{
//if the selected item is not the selectedIndex 3 then the control
becomes readOnly
document.street _frm.elements["street"].readOnly =
(document.stree t_frm.elements["street_sel "].selectedIndex! =3)
//alert(document. street_frm.elem ents["street_sel "].selectedIndex= =3);
if ( document.street _frm.elements["street_sel "].selectedIndex! =3 )
{
document.getEle mentById("stree t_id").style.ba ckground="#eaea ea";

document.street _frm.elements["street"].value=document .street_frm.ele ments["street_sel "].options[document.street _frm.elements["street_sel "].selectedIndex].value;
}
else
{
document.getEle mentById("stree t_id").style.ba ckground="#ffff ff";
document.street _frm.elements["street"].value="";
}
}
</script>
</head
<body>
<form name="street_fr m">
<input id='street_id' readOnly type='text'
style='backgrou nd:#eaeaea;' name='street' maxlength='20' size='20'>
<select name='street_se l' size='1' onchange='ck_st reet();'>
<option value='' selected>select item</option>
<option value='abc'>abc </option>
<option value='def'>def </option>
<option value='unk'>str eet not in list</option>
</select>
</form>
</body>
</html>

[Grant Wagner]

Re: Turn Input On or Off

Michael Hill wrote:
[color=blue][color=green]
> >
> > On the other hand - readonly - should be - readOnly - with a capital 'O'
> > if some sort of reaction is to be expected from the browsers.
> >[/color]
> Thanks,
>
> This works great !
>
> <html>
> <head>
> <title>MY TITLE</title>
> <script type="text/javascript">
> function ck_street()
> {
> //if the selected item is not the selectedIndex 3 then the control
> becomes readOnly
> document.street _frm.elements["street"].readOnly =
> (document.stree t_frm.elements["street_sel "].selectedIndex! =3)
> //alert(document. street_frm.elem ents["street_sel "].selectedIndex= =3);
> if ( document.street _frm.elements["street_sel "].selectedIndex! =3 )
> {
> document.getEle mentById("stree t_id").style.ba ckground="#eaea ea";
>
> document.street _frm.elements["street"].value=document .street_frm.ele ments["street_sel "].options[document.street _frm.elements["street_sel "].selectedIndex].value;
> }[/color]

If you are deciding whether selectedIndex != 3 already, then just incorporate the logic to toggle readOnly there. Doing the comparison twice 1) wastes time,
although it's insignificant and 2) more importantly, if at some point in the future you decide to take your action on selectedIndex != 4, you've got to make the
change in two places, or risk introducing a bug.

Instead of what you've got, you'd be better off with:

// cache a reference to the form elements collection
// this speeds up access to the form elements and makes
// it easier to read the code
var el = document.forms['street_frm'].elements;

// do the comparison once
if (el["street_sel "].selectedIndex != 3) {

// now set 'street' readonly
el['street'].readOnly = true;

document.getEle mentById("stree t_id").style.ba ckground = "#eaeaea";
el["street"].value = el["street_sel "].options[el["street_sel "].selectedIndex].value;
} else {
el['street'].readOnly = false;
document.getEle mentById("stree t_id").style.ba ckground = "#ffffff";
el['street'].value = '';
}

--
| Grant Wagner <gwagner@agrico reunited.com>

* Client-side Javascript and Netscape 4 DOM Reference available at:
* http://devedge.netscape.com/library/...ce/frames.html
* Internet Explorer DOM Reference available at:
* http://msdn.microsoft.com/workshop/a...ence_entry.asp
* Netscape 6/7 DOM Reference available at:
* http://www.mozilla.org/docs/dom/domref/
* Tips for upgrading JavaScript for Netscape 7 / Mozilla
* http://www.mozilla.org/docs/web-deve...upgrade_2.html

[Thomas 'PointedEars' Lahn]

Re: Turn Input On or Off

Michael Hill wrote:[color=blue][color=green]
>> On the other hand - readonly - should be - readOnly - with a capital
>> 'O' if some sort of reaction is to be expected from the browsers.[/color]
>
> Thanks,
>
> This works great ![/color]

Only by chance.
[color=blue]
> <html>
> <head>
> <title>MY TITLE</title>[/color]
^^^^^^^^^^^^^^^ ^^^^^^^^[0][color=blue]
> <script type="text/javascript">
> function ck_street()[/color]
^^[1][color=blue]
> {
> //if the selected item is not the selectedIndex 3 then the control[/color]
^^[2][color=blue]
> becomes readOnly
> document.street _frm.elements["street"].readOnly =[/color]
^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^[color=blue]
> (document.stree t_frm.elements["street_sel "].selectedIndex! =3)[/color]
^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^[1][color=blue]
> //alert(document. street_frm.elem ents["street_sel "].selectedIndex= =3);[/color]
^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^[color=blue]
> if ( document.street _frm.elements["street_sel "].selectedIndex! =3 )[/color]
^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^[color=blue]
> {
> document.getEle mentById("stree t_id").style.ba ckground="#eaea ea";[/color]
[3]^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^ ^^^^^^ [4]^^^^^^^^^^^^^^^ ^^^^^[color=blue]
> document.street _frm.elements["street"].value=[/color]
^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^ ^^^^^^^^[color=blue]
> document.street _frm.elements["street_sel "][/color]
^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^ ^^^^^^^^^^^^[color=blue]
> .options[document.street _frm.elements["street_sel "].selectedIndex][/color]
^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^ ^^^^^^^^^^^^[color=blue]
> .value;
> }
> else
> {
> document.getEle mentById("stree t_id").style.ba ckground="#ffff ff";[/color]
^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^ ^^^^^^[5] ^^^^^^^[4][color=blue]
> document.street _frm.elements["street"].value="";[/color]
^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^ ^^^^^^^^[5][color=blue]
> }
> }
> </script>
> </head[/color]
^^^^^^[6][color=blue]
> <body>
> <form name="street_fr m">[/color]
^^^^^^^^^^^^^^^ ^^^^^^^^^[6][color=blue]
> <input id='street_id' readOnly type='text'[/color]
^^^^^^^^^^^[7][color=blue]
> style='backgrou nd:#eaeaea;' name='street' maxlength='20' size='20'>[/color]
^^^^^^^^^^^^^^^ ^^^^[4][color=blue]
> <select name='street_se l' size='1' onchange='ck_st reet();'>[/color]
^^^^^^^^[8] ^^[1][color=blue]
> <option value='' selected>select item</option>[/color]
^^^^^^^^[9][color=blue]
> <option value='abc'>abc </option>
> <option value='def'>def </option>
> <option value='unk'>str eet not in list</option>
> </select>
> </form>
> </body>
> </html>[/color]

[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:
`backgroundColo r'), 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#pro pdef-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#va lue-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.or g/>
<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.selec tedIndex == 3);
if ((street.readOn ly = (sel.selectedIn dex != 3)))
{
var s;
if (typeof (s = street.style) != "undefined"
&& typeof s.backgroundCol or != "undefined" ) [3]
{
s.backgroundCol or = "#ccc"; // [4]
}
street.value = sel.options[sel.selectedInd ex].value;
}
else
{
if (typeof (s = street.style) != "undefined"
&& typeof s.backgroundCol or != "undefined" )
{
s.backgroundCol or = "#fff";
}
street.value = "";
}
}
}
</script>
</head>

<body>
<form action="..." name="street_fr m">
<div>
<input name="street" maxlength="20" size="20" readonly
style="backgrou nd-color:#ccc; color:#000">
<select name="street_se l" size="1" onclick="ck_str eet(this);">
<option value="">select item</option>
<option value="abc">abc </option>
<option value="def">def </option>
<option value="unk">str eet not in list</option>
</select>
<input type="button" value="Apply"
onclick="ck_str eet(this.form.e lements['street_sel'])">
</div>
</form>
</body>
</html>


HTH

PointedEars

[Thomas 'PointedEars' Lahn]

Re: Turn Input On or Off

Thomas 'Ingrid' Lahn wrote:[color=blue]
> [...]
> <!DOCTYPE html PUBLIC "-//W3C//DTD//HTML 4.01//EN"[/color]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
[color=blue]
> "http://www.w3.org/TR/html4/strict.dtd">
> [...]
> function ck_street(sel) // [1]
> {
> var el;
> if (sel && (el = sel.form) && (el = el.elements)) // [1]
> {
> [...]
> if ((street.readOn ly = (sel.selectedIn dex != 3)))
> {
> var s;
> if (typeof (s = street.style) != "undefined"
> && typeof s.backgroundCol or != "undefined" ) [3][/color]

&& typeof s.backgroundCol or != "undefined" ) // [3]
[color=blue]
> [...][/color]