Form collection with one object - loop fails 1

[travisbrown]

I'm trying to loop through a series of checkboxes, but can't get the loop to fire if there is only one checkbox in the collection. Works fine if there is more than one, but the length when there is only one returns undefined. I'm sure it's something obvious, but I don't get it.

See anything?

	var cbCollection = document.forms[0].elements['payment'];
	var checkboxarray;
	var payout = 0;
	var invoices = "";
	var counter = 0;
	for ( var i = 0; i <= cbCollection.length; i++ ) {
		if ( cbCollection[i].checked )  {
			payout = payout + (document.getElementById('amount_' + i).value*1);
			if ( counter == 0 ) 
				{invoices = cbCollection[i].value;}
			else 
				invoices = invoices + ',' + cbCollection[i].value
				counter = counter + 1;
		}
	}

 

[adam0101]

When there is only one, referencing it by name returns an instance of the checkbox instead of a collection. Use document.getElementByName() - it always returns a collection.

Adam

http://adameslinger.blogspot.com/

 

[adam0101]

Sorry, document.getElement[red]s[/red]ByName()

Adam

http://adameslinger.blogspot.com/

 

[travisbrown]

Hmm...Firefox tells me cbCollection has no properties when I use getElementsByName.

var cbCollection = document.getElementsByName['payment'];
alert(cbCollection.length);

 

[travisbrown]

oops. () instead of []

But, I'm still stymied.

Error: cbCollection has no properties at this line: cbCollection.checked

<input checked="checked" name="payment" value="227" onclick="getPayoutTotal();" type="checkbox">

	var cbCollection = document.getElementsByName('payment');
	var checkboxarray;
	var payout = 0;
	var invoices = "";
	var counter = 0;
	for ( var i = 0; i <= cbCollection.length; i++ ) {
		if ( cbCollection[i].checked == true )  {
			payout = payout + (document.getElementById('amount_' + i).value*1);
			if ( counter == 0 ) 
				{invoices = cbCollection[i].value;}
			else 
				invoices = invoices + ',' + cbCollection[i].value
				counter = counter + 1;
		}
	}
	payout = payout/100
	document.getElementById('payment_total').innerHTML = '$' + Math.round(payout*100)/100
	document.getElementById('pay_commission').value = Math.round(payout*100)/100;
	document.getElementById('pay_total').value = Math.round(payout*1000)/100;
	document.getElementById('pay_invoices').value = invoices;

 

[travisbrown]

Ah. Figured it out. <= should be <. <= runs an extra loop out of the range of the collection.