Iterating through radio button objects (multi-dimensional) 1

[tommo6210]

I'm creating a form with dynamic radio buttons, which is working well when posting the form, and retrieving the results with PHP, however, I would like to validate the form to ensure at least one option from each radio button group has been selected, but I can't seem to work out how to iterate through the objects to check.

An example of the HTML looks like this...

<tr><td align="left"><strong>Question 1</strong></td></tr><tr><td align="left" width="60%" valign="top">What colour is grass?</td><td align="left" valign="top">

<input type="radio" name="Answer[1]" id="Answer[1]" value="B" />Blue<br/>
<input type="radio" name="Answer[1]" id="Answer[1]" value="L" />Black<br/>
<input type="radio" name="Answer[1]" id="Answer[1]" value="G" />Green<br/>
<input type="radio" name="Answer[1]" id="Answer[1]" value="P" />Purple<br/>

</td></tr><tr><td>&nbsp;</td></tr>


</tr><tr><td colspan="2" style="background-color: #ffffff;">&nbsp;</td></tr><tr><td align="left"><strong>Question 2</strong></td></tr>

<tr><td align="left" width="60%" valign="top">Is the sky blue?</td><td align="left" valign="top">

<input type="radio" name="Answer[2]" id="Answer[2]" value="Y" />Yes<br/>
<input type="radio" name="Answer[2]" id="Answer[2]" value="N" />No<br/>

</td></tr>

... etc...

Whilst I understand how to iterate through an object in Javascript if it wasn't an array, i.e. I'd just used 'Answer' rather than Answer[1] and Answer[2], I thought I could just treat it as a multi-dimensional array, but that isn't working... e.g. to check if the first radio button in question 1 had been checked, I could use:

var ans = document.inputform.Answer[1][0].checked;

... but that just gives me an 'null or not an object' error

Any ideas gratefully received...

 

[BillyRayPreachersSon]

Because of the "[" and "]" characters in your element names, you'd have to use this syntax instead:

var frm = document.forms['inputform'].elements;
var ans = frm['Answer[1]'][0].checked;

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[tommo6210]

Hi Dan,

Thanks for the advice... Yes, that makes sense, and I can iterate through by having a hidden form field with the number of 'Answer' elements.. (as it isn't always a fixed number), then using eval to change the index number. The following worked:

function verify() {
	var numq = document.inputform.numq.value;
	var chkd = 0;
	
	var frm = document.forms['inputform'].elements;
	
	for (i = 1; i <= numq; i++) {
		eval("len = frm['Answer["+i+"]'].length;");
		for (j = 0; j < len; j++) {
			eval("ans = frm['Answer["+i+"]']["+j+"].checked;");
			if (ans) {
				chkd ++;
			}
		}
	}
	
	if (chkd != numq) {
		alert("Error: Not all questions have been answered!");
		return false;
	}
	else {
		document.inputform.submit();
		return true;
	}
}

But, is there also a more elegant way using JS to find the number of 'Answer' elements on the form?

Thanks again,
Chris.

 

[BillyRayPreachersSon]

Noooo... don't use evil eval - use the syntax I gave you:

var ans = frm['Answer[' + i + ']'][j].checked;

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[tommo6210]

Hi Dan,

Thanks again... I've got rid of the evil eval ;-)

I'm presuming it's evil because it uses a lot of resources?

Also, is there a more elegant way using JS to find the number of 'Answer[]' elements on the form?

Cheers,
Chris.

 

[BillyRayPreachersSon]

I'd advise against eval in this situation because the JS engine will have to work out many unknowns, whereas giving it direct pointers to elements means it hasn't got to spend time trying to figure this stuff out.

Ok, so we're talking fractions of seconds here... but it all adds up, and generally knowing the alternatives can help you further down the line.

To find the number of Answer[] items, you should be able to replace the eval syntax of this:

eval("len = frm['Answer["+i+"]'].length;");

with the same syntax given above:

var len = frm['Answer[' + i + ']'].length;

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]