I have the following form and it's almost working..
Here's what I would like it to do: The drop-down "Always Show" should always work regardless of the user's selection. However, if a user selects any of the drop-down Items 1-4 or enters a value into the "Other" text box, all the other fields on the form should become disabled. Then if the user resets the form back to the original values, all the fields become active again.
This is only working for the "disable" function, after that things get screwy.
For example, if you select a value from the "Item 1" then Items 2 thru 4 and Other gets disabled. This is correct behavior.
If you reset "Item 1" back to "please select one" then "Item 2" and "Other" stay disabled.. This is incorrect as they should be active again.
Thanks in advance
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml"
>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<SCRIPT language="javascript" type="text/javascript">
function skip () { this.blur(); }
function toggleselect (select) {
if (!select.disabled) {
select.disabled = true;
if (!document.all && !document.getElementById) {
select.oldOnFocus =
select.onfocus ? select.onfocus : null;
select.onfocus = skip;
}
}
else {
select.disabled = false;
if (!document.all && !document.getElementById) {
select.onfocus = select.oldOnFocus;
}
}
}
function disable(obj) {
if (!obj.disabled){
document.getElementById(ob
j).disable
d=true
}else{
document.getElementById(ob
j).disable
d=false
}
}
</SCRIPT>
</head>
<body>
<FORM NAME="formName">
Item 1: <select NAME="a" ONCHANGE="if(this.selected
Index != 0)toggleselect(this.form.b
);togglese
lect(this.
form.c);to
ggleselect
(this.form
.d);disabl
e('txtBox'
);" >
<option>please select one</option>
<option>1.........</option
>
<option>2.........</option
>
<option>3........</option>
<option>4........</option>
</select>
<br />
Item 2: <select NAME="b" ONCHANGE="if(this.selected
Index != 0)toggleselect(this.form.a
);togglese
lect(this.
form.c);to
ggleselect
(this.form
.d);disabl
e('txtBox'
);" >
<option>please select one</option>
<option>1.........</option
>
<option>2.........</option
>
<option>3........</option>
<option>4........</option>
</select>
<br />
Item 3: <select NAME="c" ONCHANGE="if(this.selected
Index != 0)toggleselect(this.form.a
);togglese
lect(this.
form.b);to
ggleselect
(this.form
.d);disabl
e('txtBox'
);">
<option>please select one</option>
<option>1.........</option
>
<option>2.........</option
>
<option>3........</option>
<option>4........</option>
</select>
<br />
Item 4: <select NAME="d" ONCHANGE="if(this.selected
Index != 0)toggleselect(this.form.a
);togglese
lect(this.
form.b);to
ggleselect
(this.form
.c);disabl
e('txtBox'
);">
<option>please select one</option>
<option>1.........</option
>
<option>2.........</option
>
<option>3........</option>
<option>4........</option>
</select>
<br />
Other: <INPUT TYPE="TEXT" name="txtBox" id="txtBox" VALUE="" ONCHANGE="toggleselect(thi
s.form.a);
togglesele
ct(this.fo
rm.b);togg
leselect(t
his.form.c
);togglese
lect(this.
form.d);" />
<br /><br />
Always Show:
<select NAME="show">
<option>ALWAYS SHOW</option>
<option>1.........</option
>
<option>2.........</option
>
<option>3........</option>
<option>4........</option>
</select>
</FORM>
</body>
</html>
Start Free Trial
