Disable fields in form based on ID, not NAME

[coldwerturkey]

This code disables some fields of the form if the checkbox is selected. These disablable* fields are based on the same input NAME (shipping[]). It works, but I need it to be based on the ID (disableme) of the field instead as I require the fields name for processing,

anyone care to shed some light on what I need to do? (Yes, I am asking someone to help do the work for me because I don't have enough time to learn basic javascript this week : )

<script type="text/javascript">
function disableHandler (form, inputName) {
	var inputs = form.elements[inputName];
	for (var i = 0; i < inputs.length; i++) {
		var input = inputs[i];
		input.onclick = function (evt) {
			if (this.checked) {
				disableInputs(this, inputs);
			} else {
				enableInputs(this, inputs);
			}
			return true;
		};
	}
}
function disableInputs (input, inputs) {
	for (var i = 0; i < inputs.length; i++) {
		var currentInput = inputs[i];
		if (currentInput != input) {
			currentInput.disabled = true;
		}
	}
}
function enableInputs (input, inputs) {
	for (var i = 0; i < inputs.length; i++) {
		var currentInput = inputs[i];
		if (currentInput != input) {
			currentInput.disabled = false;
		}
	}
}
</script>

<form name="shippinginformation" action="">
	Same as customer information? <input type="checkbox" name="shipping[]" id="disableme" /><br />
	Name: <input type="text" name="shipping[]" id="disableme" /><br />
	Email: <input type="text" name="shipping[]" id="disableme" /><br />
	etc..
</form>

<script type="text/javascript">
	disableHandler(document.forms.shippinginformation, 'shipping[]');
</script>

I could just put some text and say, "If your shipping address is the same as your customer address, leave the following forms blank." But as a user myself, I like when things get disabled.

*disablable, is that a word?

[Weedpacket]

Element IDs have to be unique in the document.

[bpat1434]

Element ID's do not need to be unique. It just won't validate if they do duplicate.

One thing you might want to do is give each one a class name of "disable-capable" (or your new word "disablable'). Then you can do getElementsByClassName('disable-capable') and get an array of document elements back.

You could also go grab Prototype javascript framework ( www.prototyepjs.org ) and use $$() to grab elements by css selector(s) 😉 Plus, it's less javascript to learn since the framework really allows you to focus on what you want, not necessarily how JS works (i.e. hashes vs arrays vs objects).

[coldwerturkey]

I tried your first suggestion bpat1434 but I can't get it to work, any advice?

<script type="text/javascript">
function disableHandler (form, inputName) {
	var inputs = getElementsByClassName(inputName);
	for (var i = 0; i < inputs.length; i++) {
		var input = inputs[i];
		input.onclick = function (evt) {
			if (this.checked) {
				disableInputs(this, inputs);
			} else {
				enableInputs(this, inputs);
			}
			return true;
		};
	}
}
function disableInputs (input, inputs) {
	for (var i = 0; i < inputs.length; i++) {
		var currentInput = inputs[i];
		if (currentInput != input) {
			currentInput.disabled = true;
		}
	}
}
function enableInputs (input, inputs) {
	for (var i = 0; i < inputs.length; i++) {
		var currentInput = inputs[i];
		if (currentInput != input) {
			currentInput.disabled = false;
		}
	}
}
</script>

<form name="shippinginformation" action="">
	Same as customer information? <input type="checkbox" name="sameas" classname="disablable" /><br />
	Name: <input type="text" name="name" classname="disablable" /><br />
	Email: <input type="text" name="email" classname="disablable" /><br />
	etc..
</form>

<script type="text/javascript">
	disableHandler(document.forms.shippinginformation, 'disablable');
</script>

[Weedpacket]

bpat1434 wrote:

Element ID's do not need to be unique. It just won't validate if they do duplicate.

That's not the biggest problem with using duplicate IDs. You risk breaking any JavaScript that uses them, since the underlying DOM will be assuming that they are unique. For example, getElementById() won't return more than one element (which is why it's not getElementsById(); if there are multiple elements with the same ID, its behaviour is undefined (i.e., nasal demons time). Since we're talking about JavaScript here, I think the issue is relevant 🙂

But yeah; tagging multiple elements with something is what the class attribute is for (I can cite chapter and verse on that: §7.5.2 of the HTML 4.01 spec).

[bpat1434]

Point, set, match to Weed!

The real html attribute is not "classname" but rather just "class".