Member Avatar for tmv105

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

  • 3 Contributors
  • 2 Replies
  • 105 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by digital-ether

Dani AI

Generated

As noted, the validation error comes from repeating the same id. The practical, standards-friendly fix is: give each checkbox a unique id for validation and accessibility, keep the name as an array (availcheck[]) so PHP gets all selections, and add a shared class (for JavaScript grouping). Use <label for="..."> so screen readers and validators are happy.

Example pattern (one small set shown):

<input type="checkbox" id="availcheck_0" name="availcheck[]" class="availcheck" value="Monday 08:00">
<label for="availcheck_0">8:00 a.m.</label>

<input type="checkbox" id="availcheck_1" name="availcheck[]" class="availcheck" value="Monday 09:00">
<label for="availcheck_1">9:00 a.m.</label>

JavaScript to read them (modern, robust):

var boxes = document.querySelectorAll('input.availcheck'); // selects the group
var selected = Array.prototype.filter.call(boxes, function(b){ return b.checked; })
                    .map(function(b){ return b.value; });

Server-side, handle defensively:

$selected = isset($_POST['availcheck']) ? (array)$_POST['availcheck'] : array();
foreach ($selected as $slot) {
    $slot = trim($slot); // then sanitize/validate before use
}

As advised, do not duplicate id. As observed, older selection methods had cross-browser quirks; prefer querySelectorAll or getElementsByClassName today, and polyfill or fallback to tag/name scanning for very old browsers. For reference, id must be unique (id attribute) and querySelectorAll supports attribute/class selectors (querySelectorAll). PHP form data arrives in $_POST ($_POST).

Recommended Answers

All 2 Replies

Member Avatar for php_daemon

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

Member Avatar for digital-ether

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;
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.