Forti2ude said:
I have a simple form...
<form>
<select name="foo" multiple>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
<input type="text" name="boo" DISABLED>
<input type="text" name="goo" DISABLED>
</form>
When a user chooses any of the options in the "foo"
multiselect, as long as one of them is value 2, I
need to enable the fields "boo" and "goo".
Anyone have any tips? Can this be done? Thanks!
If you disable any input in the HTML your are creating a form that
cannot work without javascript. There is no reason to do that as your
server side code still has to verify that whatever combination of fields
are submitted they still make sense (to prevent malicious submissions
being a problem). So your should initially disable the inputs when the
page loads with javascript:-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Form Control Conditional Disabling Demo</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function setUpForm(){
var frmEl, sel, inptBoo, inptGoo;
if(
document.forms &&
(frmEl = document.forms['theFormName']) &&
(frmEl = (frmEl.elements||frm)) &&
(sel = frmEl['foo']) &&
(sel.options) &&
('number' == typeof sel.options.length) &&
(inptBoo = frmEl['boo']) &&
(inptGoo = frmEl['goo'])
){
sel.onchange = handleSelChange;
inptBoo.disabled = true;
inptGoo.disabled = true;
}
}
function handleSelChange(){
var c, opts = this.options, disable = true;
var frmEls = this.form.elements;
for(c = opts.length;c--
{
if((opts[c].selected)&&(opts[c].value == "2")){
disable = false;
break;
}
}
frmEls['boo'].disabled = disable;
frmEls['goo'].disabled = disable;
}
</script>
</head>
<body onload="setUpForm();">
<form action="" name="theFormName">
<select name="foo" multiple>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
<input type="text" name="boo">
<input type="text" name="goo">
</form>
</body>
</html>
Richard.