By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,531 Members | 2,219 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,531 IT Pros & Developers. It's quick & easy.

Turn Input On or Off

P: n/a
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_sel' size='1' onchange='ck_street();'>
<option value='abc'>abc</option>
<option value='def'>abc</option>
<option value='unk'>street 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
Jul 23 '05 #1
Share this Question
Share on Google+
8 Replies


P: n/a
Michael Hill wrote:
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_sel' size='1' onchange='ck_street();'>
<option value='abc'>abc</option>
<option value='def'>abc</option>
<option value='unk'>street not in list</option>
</select>
function ck_street(){
document.forms[0].elements["street"].readonly =
(document.forms[0].elements["street_sel"].selectedIndex==2)
}

Mick
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

Jul 23 '05 #2

P: n/a
> function ck_street(){
document.forms[0].elements["street"].readonly =
(document.forms[0].elements["street_sel"].selectedIndex==2)
}


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

Mike
Jul 23 '05 #3

P: n/a
Ivo
"Michael Hill" <hi****@charter.net> wrote in message
news:10*************@corp.supernews.com...
function ck_street(){
document.forms[0].elements["street"].readonly =
(document.forms[0].elements["street_sel"].selectedIndex==2)
}

I thought "readonly" should only be "true" or "false"? Why are you

changing it to the text that is selected?


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
Jul 23 '05 #4

P: n/a
Ivo wrote:
Michael Hill wrote:
Mick White wrote:
function ck_street(){
document.forms[0].elements["street"].readonly =
(document.forms[0].elements["street_sel"].selectedIndex==2)
}


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


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.


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.
Jul 23 '05 #5

P: n/a
>
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 !

<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.street_frm.elements["street_sel"].selectedIndex!=3)
//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";

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";
document.street_frm.elements["street"].value="";
}
}
</script>
</head
<body>
<form name="street_frm">
<input id='street_id' readOnly type='text'
style='background:#eaeaea;' name='street' maxlength='20' size='20'>
<select name='street_sel' size='1' onchange='ck_street();'>
<option value='' selected>select item</option>
<option value='abc'>abc</option>
<option value='def'>def</option>
<option value='unk'>street not in list</option>
</select>
</form>
</body>
</html>
Jul 23 '05 #6

P: n/a
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 !

<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.street_frm.elements["street_sel"].selectedIndex!=3)
//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";

document.street_frm.elements["street"].value=document.street_frm.elements["street_sel"].options[document.street_frm.elements["street_sel"].selectedIndex].value;
}


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.getElementById("street_id").style.backgro und = "#eaeaea";
el["street"].value = el["street_sel"].options[el["street_sel"].selectedIndex].value;
} else {
el['street'].readOnly = false;
document.getElementById("street_id").style.backgro und = "#ffffff";
el['street'].value = '';
}

--
| Grant Wagner <gw*****@agricoreunited.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
Jul 23 '05 #7

P: n/a
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
Jul 23 '05 #8

P: n/a
Thomas 'Ingrid' Lahn wrote:
[...]
<!DOCTYPE html PUBLIC "-//W3C//DTD//HTML 4.01//EN"
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"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.readOnly = (sel.selectedIndex != 3)))
{
var s;
if (typeof (s = street.style) != "undefined"
&& typeof s.backgroundColor != "undefined") [3]
&& typeof s.backgroundColor != "undefined") // [3]
[...]

Jul 23 '05 #9

This discussion thread is closed

Replies have been disabled for this discussion.