Disable form fields onchange

LostinIT · Apr 9, 2007

My gratitude for your patience ahead of time...

I am not a JavaScript guy; my area has been PHP for years, so bear with me.

I have a form where I need to disable certain form fields when a choice is made from a drop down (select) menu.

I hear the onchange function is the way I need to go but haven't a clue on how to accomplish this. I have NEVER asked anyone to write any snippet of code for me but I am at desperation point in my current project.

Could someone give me a SMALL example of the direction I need to be going with this?

My sincerest and deepest gratitude ahead of time!

tsuji · Apr 9, 2007

For demo.
[tt]
<html>
<head>
<script language="javascript">
function doit(obj) { //the select-one element
var a_selected=(obj.value=="a")?true:false;
var b_selected=(obj.value=="b")?true:false;

obj.form.az.disabled=!a_selected; //az input element text type
obj.form.bz.disabled=!b_selected; //bz input element text type

//this is just illustrate possible returning a collect;
//in actual case, you might not need the elaboration as you would have beforehand what it is
var elem;
elem=obj.form.ay;
if (elem.length) { //if it really forms a collection
for (var i=0;i<elem.length;i++) {
elem.disabled=!a_selected;
}
} else { //in case ay simple element
elem.disabled=!a_selected;
}

elem=obj.form.by;
if (elem.length) { //if it really forms a collection
for (var i=0;i<elem.length;i++) {
elem.disabled=!b_selected;
}
} else { //in case by simple element
elem.disabled=!b_selected;
}
}
window.onload=function() {doit(document.formname.sel);}; //just to set the default
</script>
</head>
<body>
<form name="formname">
<select name="sel" onchange="doit(this)">
<option value="">-select-</option>
<option value="a">things related to a</option>
<option value="b">things related to b</option>
</select>
<br />
<input type="text" name="az" value="azaz" /><br />
<input type="text" name="bz" value="bzbz" /><br />
<input type="checkbox" name="ay" /> ay1<br />
<input type="checkbox" name="ay" /> ay2<br />
<input type="checkbox" name="ay" /> ay3<br />
<input type="checkbox" name="by" /> by1<br />
<input type="checkbox" name="by" /> by2<br />
<input type="checkbox" name="by" /> by3<br />
</form>
</body>
</html>
[/tt]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Disable form fields onchange

LostinIT

IS-IT--Management

tsuji

Technical User

Similar threads

Part and Inventory Search

Sponsor