Hi! I am having problems validating my HTML to at least transitional due to my use of checkboxes and accessing them with PHP and javascript. I want client-side validation and server side functionality and therefore am utilizing PHP and JS.

My understanding is that JS recognizes checkboxes to be an array by repeating the "name" attribute in multiple input tags. PHP recognizes checkboxes to be an array by repeating the "name" attribute followed by an empty subscript. name[]. In order to get both PHP and javascript to recognize i've set all my id attributes to the same name and all my name attributes to the same name plus the []. Here's some of my code.
<input type="checkbox" id="availcheck" name="availcheck[]" value="Monday, 8:00 a.m." /> 8:00 a.m.<br />
<input type="checkbox" id="availcheck" name="availcheck[]" value="Monday, 9:00 a.m." /> 9:00 a.m.<br />
<input type="checkbox" id="availcheck" name="availcheck[]" value="Monday, 10:00 a.m." /> 10:00 a.m.<br />
<input type="checkbox" id="availcheck" name="availcheck[]" value="Monday, 11:00 a.m." /> 11:00 a.m.<br />
<input type="checkbox" id="availcheck" name="availcheck[]" value="Monday, 12:00 p.m." /> 12:00 p.m.<br />
<input type="checkbox" id="availcheck" name="availcheck[]" value="Monday, 1:00 p.m." /> 1:00 p.m.<br />
<input type="checkbox" id="availcheck" name="availcheck[]" value="Monday, 2:00 p.m." /> 2:00 p.m.<br />
<input type="checkbox" id="availcheck" name="availcheck[]" value="Monday, 3:00 p.m." /> 3:00 p.m.<br />
<input type="checkbox" id="availcheck" name="availcheck[]" value="Monday, 4:00 p.m." /> 4:00 p.m.<br />
<input type="checkbox" id="availcheck" name="availcheck[]" value="Monday, 5:00 p.m." /> 5:00 p.m.<br />
<input type="checkbox" id="availcheck" name="availcheck[]" value="Monday, evening" /> 6:00 - 9:00 p.m.

Obviously, the repetition of the id attribute is a violation for validation. Any suggestions on what I could do?

Thanks in advance for any suggestions.

Tara

Do not repeat the id. You can access the fields by name in JS, ex. getElementsByName('availcheck[]')

getElementByName() is not supported on all browsers.

The DOM functions getElementsByTagName and getAttribute are more supported.


Try a function like which uses those two to get the same result:

/**
* Retrive an HTML Element Collection By name
* @return Array HTML Elements
* @param Object Parent Element
* @param String name
* @param String Tag name to limit search to
*/
function getElementsByName(parent, name, tag) {

	var els = new Array();
	var allChildren = parent.getElementsByTagName(tag || '*');
	
	for (var i = 0; i < allChildren.length; i++) {
		var child = allChildren[i];
		if (child.getAttribute('name') == name) {
			els.push(child);
		}
	}
	
	return els;
}
This article has been dead for over six months. Start a new discussion instead.