Old Lady wrote:
Hi,
I need help!
I have a SELECT/OPTION list.
My goal is to have a TEXT input field in a form that is normally
disabled, but it should become enabled when the user select one
predefined OPTION. If the user change idea and select another OPTION,
the TEXT input field should be disabled again.
I hope I'm understandable.
Sorry for my bad English.
Thank You!
English is fine, don't worry.
If you set a form field to disabled in your HTML, users with JavaScript
disabled will never be able to use it. It's better to disable it when
the page loads, using JS.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>untitled</title>
<script type="text/javascript">
window.onload = function()
{
var s, t;
if ((s = document.getElementById('foo'))
&& (t = document.getElementById('bar'))
&& ('undefined' != typeof t.disabled))
{
t.disabled = true;
s.onchange = function()
{
var bWhich = (this.selectedIndex == 4)
t.disabled = !bWhich;
if (bWhich)
{
t.focus();
t.select();
}
}
}
s.onchange();
}
</script>
</head>
<body>
<form>
<select id="foo" name="foo" size="5">
<option value="alpha">alpha</option>
<option value="beta">beta</option>
<option value="gamma">gamma</option>
<option value="delta">delta</option>
<option value="epsilon">other</option>
</select>
<input id="bar" type="text" name="bar" value="test" />
</form>
</body>
</html>
Just set ---> this.selectedIndex == 4
to the index of the enable/disable option (JS counts from 0). You're
using the window's onload handler (same as <body onload="...">) so
you'll need to 'bundle' this with any other onload routines you're
calling.