AW: [Javascript] checkboxes in array

[Roger Roelofs]

Michael,

On Apr 4, 2005, at 10:31 AM, Michael Borchers wrote:

>>>       <input type="checkbox" name="typ[]" value="S06-001"
>>> style="border:none; ">
>>>       <input type="text" name="stck[]" style="width:50px; " value="0"
>>> onFocus="this.value='';
>>> document.getElementsByName('typ[]').checked=true">
>>>
>>> I need to have it without certain IDs or names, just arrays []
>>
>> I'm guessing you're coming from a server side language like php where
>> arrays use square brackets.  Unfortunately javascript uses square
>> brackets too.

> you got me;) php, indeed!
>
> how would you solve this problem,
> could you post a form?
>
> about the script:
> a php script creates a loop with input fields.
> the first one is the checkbox with the value, f.e. a car type
> the second text input shows the amount of cars available
>
> when someone focusses the text input, the checkbox of the desired car 
> is checked.

The main problem is that there is no logical relationship between the 
checkboxes and text inputs.  The only relationship is that the checkbox 
happens to come first in the document source.  I _guarantee_ this will 
change when you least expect it, and all of a sudden your users will 
start complaining that the wrong checkbox is checked, or worse, they 
won't notice and you will loose data.  If I were in your shoes, here's 
what I'd do, but with a template engine like Smarty.  (Sorry for the 
off-topic nature of this part of the post.)

--------  php  --------
<form id="entryform" ... >
<?php
for( $i = 0; $i < count($aItems); $i++ ) {
?>
	<label><?php echo $aItems[$i];?>
		<input type="checkbox"
			  id="typ<?php echo $aItems[$i];?>"
			  name="typ[]"
			  value="<?php echo $aItems[$i];?>" />
	</label>
	<input type="text"
		  id="stck<?php echo $aItems[$i];?>"
		  name="stck[]"
		  value="0" />
<?php } ?>
</form>
----------------  js (in an external file) ----------
function checkRelated(e) {
	if (!e) e = window.event;
	if (e.srcElement) find = e.srcElement.id.substr(4);
	else find = e.target.id.substr(4);
	var cb = document.getElementById("typ" + find);
	if (cb) db.checked = true;
}
function initInputs() {
	// I'm living dangerously by not first verifying the existence of the 
form
	var aInputs = 
document.getElementbyId("entryform").getElementsByTagName("INPUT");
	for ( var i = 0; i < aInputs.length; i++ ) {
		if (aInputs[i].id.substr(0, 4) == "stck") {
			aInputs.onfocus = checkRelated();
		}
	}
}
window.onload = initInputs;
----------------  end js ---------------------


If you _really_ want to keep your current plan, then try something like 
this.

function checkPrevSibling(el) {
	var prev = el;
	do {
		prev = prev.previousSibling();
		if (( prev.type == "chcekbox" ) && (prev.name == "typ[]")) {
			prev.checked = true;
			prev = null;
		}
	} wile (prev != null);
}

<input type="text"
	  name="stck[]"
	  value="0"
	  onfocus="checkPrevSibling(this)" />

<disclaimer>
Keep in  mind, this is all off the top of my head.  I very likely 
missed a step somewhere.
</disclaimer>

Also, remember that the first code segment (or more properly, the ideas 
expressed therein), tho longer is more robust and does a better job of 
separating content from style from behavior.  This distinction will 
save you boatloads of time as your project grows in complexity.

hth
Roger,

Roger Roelofs
Know what you value.