Disabling fields based on user input

**aherrera** · Mar 6, 2008, 15:59

Hi,

I've searched high and low for this and since my JS skills are laughable I'm not 100% sure on how to write it myself. Basically, here's what I'm trying to achieve...

I have a form with several fields. All should be enabled initially. But some are dependent on others. So for those, if a particular field is filled out, another field should become disabled (or readonly). In other words, if one filled in it means that another is not available.

Ideally I'd also like to be able to set the text related to that field to a different color too (which I'm guessing can be done with getElementById).

I hope that makes sense!

.angie

**Raffles** · Mar 6, 2008, 17:16

Read this first.

Once you have accessed a particular form element that you want to disable, you use the "disabled" property to do so:

Code Javascript:

var gen = document.getElementById('gender');
var lastvisit = gen.nextSibling.nextSibling.getElementsByTagName('input')[0];
var genders = gen.getElementsByTagName('input');
if (gen[0].checked === true) { // if male is checked
  lastvisit.disabled = true; // men don't go to the gynaecologist so it's irrelevant. Disable it.
}
else {
  lastvisit.disabled = false; //visitor is a woman, so allow visitor to fill in last visit date
}

With some HTML like this:

HTML Code:

<div id="gender">
<input type="radio" name="gendertype" value="male">
<input type="radio" name="gendertype" value="female">
</div>
<div>
<label for="gynlastvisit">When did you last see your gynaecologist? (dd/mm/yyyy)</label>
<input type="text" name="gynlastvisit" id="gynlastvisit">
</div>

Note that it is gen.nextSibling.nextSibling and not just gen.nextSibling. This is because the next sibling is a text node of whitespace (spaces or newlines), so we want the one after this. This is just one way to "walk the DOM". You could use document.getElementById for both of them for example. This would probably be sensible as it would make your script more robust. Still, this is simply an illustration of walking the DOM.

**paul_wilkins** · Mar 6, 2008, 17:21

Having your form structure would have helped to put together an appropriate answer, but here's something that works well.

Code html4strict:

<html>
<head>
<title>Test</title>
<style type="text/css">
.enabled {
	background: #eef;
}
.disabled {
	background: #fee;
}
</style>
</head>
 
<body>
<form id="myForm">
<input type="radio" name="sex" id="male" value="male"> <label for="male">Male</label>
<input type="radio" name="sex" id="female" value="female"> <label for="female">Female</label>
<div id="favShaver">
	<label for="shaver">Type of shaver</label> <input type="text" id="shaver" name="shaver">
</div>
</form>
<script>
var sex = document.getElementsByName('sex');
sex[0].onclick = function () {
	shaver(true);
};
sex[1].onclick = function () {
	shaver(false);
};
 
function shaver(enabled) {
	var id = 'shaver';
    var el = document.getElementById(id);
	var labels = document.getElementsByTagName('label');
	var label;
	for (var i = 0; i < labels.length; i++) {
	    if (labels[i].getAttribute('for') === id) {
		    label = labels[i];
			break;
		}
	}
	if (enabled) {
		el.removeAttribute('disabled', 'disabled');
		label.className = 'enabled';
	} else {
		label.className = 'disabled';
		el.setAttribute('disabled', 'disabled');
	}
}
</script>
</body>
</html>

**Raffles** · Mar 6, 2008, 17:31

But many women shave their legs!

BTW your last label is missing a closing tag.

**paul_wilkins** · Mar 6, 2008, 17:50

Yeah, I was trying to think of a situation where something would apply to one group but not another and only came up with facial shavers.

Well done on coming up with the gynaecological visit idea.

**Raffles** · Mar 6, 2008, 18:32

I was amused that we'd come up with something so similar even though there must be so many other possibilities, e.g. the classic "Other" choice, which demands the user be more specific upon choosing this option by typing into a box after it.

Gender is just the blatantly obvious one I suppose.

**aherrera** · Mar 6, 2008, 18:46

Thanks guys! I'll have to give those a shot.

The SitePoint Forums have moved.

User Tag List

Thread: Disabling fields based on user input

Thread Tools

Display

Disabling fields based on user input

Bookmarks

Bookmarks

Posting Permissions