client side validation of radio buttons / multiple choice questions

[stef25]

i have 10 questions with each three possible options, answered by radio buttons. im trying to use JS to validate the form, to check if a question has been unanswered.

this is my code for question 1. it works but im not sure if this is the best way to go about it. also, i have to repeat this block of code 10 times, once for each question. im sure thats NOT the best way to go about it

its quite a difficult concept since i have to evaluate everyting per three possible answers. i also want to show an inline alert at the unanswered question, so i cant just check for 10 checked radio buttons.

anyone know a better way to get around this?

function alertMe() {
 one = document.getElementById("q11");		
 two = document.getElementById("q12");		
 three = document.getElementById("q13");		
	
	if ( (one.checked == true) || (two.checked ==  true) || (three.checked == true)  ){
		window.alert ('at least one is checked');
	}
	else {
		window.alert ('none checked');
	}
}

[Raffles]

Can you post the HTML? The best thing would be to loop through whatever contains each question (<li> s perhaps?) and then at each question, loop through the three possible options and check if one of them is selected. If they are all empty, at that junction you add your inline notice, then continue to the next iteration in the questions' loop.

[stef25]

Here is the html for questions 1 and 2. are you suggesting to loop throug the input items contained inside each ul tag? makes sense, ill try that now

<legend>1. Question 1 bla bla bla</legend>
<li class="level2">
	<ul>
		<li><input type="radio" name="q1" value="a" id="q11" /><label for="q11">Answer 1</label></li>
		<li><input type="radio" name="q1" value="b" id="q12" /><label for="q12">Answer 2</label></li>
		<li><input type="radio" name="q1" value="c" id="q13" /><label for="q13">Answer 3</label></li>
	</ul>
</li>


<legend>2. Question 2 bla bla bla</legend>
<li class="level2">
	<ul>
		<li><input type="radio" name="q2" value="a" id="q21"/><label for="q21">Answer 1</label></li>
		<li><input type="radio" name="q2" value="b" id="q22"/><label for="q22">Answer 2</label></li>
		<li><input type="radio" name="q2" value="c" id="q23"/><label for="q23">Answer 3</label></li>
	</ul>
</li>

[Raffles]

You know, legends are supposed to be used only inside fieldsets, and I think you're only allowed one per fieldset. Doesn't make much sense otherwise...

Instead of <legend>, perhaps you should consider a heading (h2 or so). Also, maybe a definition list would be suited to this... still, the current structure is fine.

I'm suggesting looping through all the ULs and with each iteration, then loop through the checkboxes and check if any of them are checked. If not, add the warning, otherwise continue to the next iteration in the main loop.

[stef25]

im using fieldsets too, just removed them for posting here. will give your theory a shot, thanks