asked on

Validating radio buttons in form

I'm setting up a web site with Joomla, and want to have a form in there where visitors may do a test by answering 20 statements. Doing the form with radio buttons is ok, and processing it with a separate php script is ok. What I can't figure out (due to my lack of knowledge) is how to verify that one of the two radio buttons for each statement is checked. I don't want any of the buttons to be checked at the start (due to influencing answers and to avoid spammers ). A previous question here at EE indicated that a javascript could do this, but I don't know anything (or very little) about javascripts.

I'd be very grateful for some kind of script that verifies that all statements have been answered.

Parts of the form is attached as txt file to show the ieda.

testform.txt

leakim971

Check this thread : https://www.experts-exchange.com/questions/26161873/Radio-button-validation.html

SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Olaf Berli

ASKER

Great! Thanks.
Have just tested it, and it is exactly what I was looking for.
Don't understand the code, but maybe that will change......?

Small addiditonal question: The alert displays the question name - which is actually a rather long line of text. Is it possible to get the question number instead (it doesn't show now)?

leakim971

for example replace : questionName = inputs[i].parentNode.childNodes[0].nodeValue.substr(3, 11);
by : questionName = inputs[i].name.replace(/\D/g,"");

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript">
	function checkRadioIsSet() {
		var inputs = document.forms["questfrm"].getElementsByTagName("input");
		var allForEachGroupIsChecked = true;
		for(var i=0;i<inputs.length;i++) {
			if( inputs[i].className == "radioToCheck" ) {
				var oneIsChecked = false;
				var lastName = inputs[i].name;
				while(lastName == inputs[i].name ) {
					//questionName = inputs[i].parentNode.childNodes[0].nodeValue.substr(3, 11);
					questionName = inputs[i].name.replace(/\D/g,"");
					if( inputs[i].checked ) oneIsChecked = true;
					i++;
				}
				if(!oneIsChecked) {
					alert("You did'nt select an answer for question \"" + questionName + "\" !");
				}
				i--;
				allForEachGroupIsChecked = allForEachGroupIsChecked && oneIsChecked;
			}
		}
		return allForEachGroupIsChecked;
	}
</script>
</head>
<body>
<form name="questfrm" method="post" onsubmit="return checkRadioIsSet();">
<div>1. Statement 1: <input name="q1" class="radioToCheck" value="1" type="radio" />Agree <input name="q1" value="0" type="radio" />Disagree </div><br />
<div>2. Statement 2: <input name="q2" class="radioToCheck" value="1" type="radio" />Agree <input name="q2" value="0" type="radio" />Disagree </div><br /> 
<div>3. Statement 3: <input name="q3" class="radioToCheck" value="1" type="radio" />Agree <input name="q3" value="0" type="radio" />Disagree </div><br /> 
<div>4. Statement 4: <input name="q4" class="radioToCheck" value="1" type="radio" />Agree <input name="q4" value="0" type="radio" />Disagree </div><br /> 
<div>5. Statement 5: <input name="q5" class="radioToCheck" value="1" type="radio" />Agree <input name="q5" value="0" type="radio" />Disagree </div><br /> 
<div>6. Statement 6: <input name="q6" class="radioToCheck" value="1" type="radio" />Agree <input name="q6" value="0" type="radio" />Disagree </div><br /> 
<div>7. Statement 7: <input name="q7" class="radioToCheck" value="1" type="radio" />Agree <input name="q7" value="0" type="radio" />Disagree </div><br /> 
<div>8. statement 8: <input name="q8" class="radioToCheck" value="1" type="radio" />Agree <input name="q8" value="0" type="radio" />Disagree </div><br /> 
<div>9. Statement 9: <input name="q9" class="radioToCheck" value="1" type="radio" />Agree <input name="q9" value="0" type="radio" />Disagree </div><br />
<input name="Sumbit" value="Send" type="submit" /> 
</form>
</body>
</html>

Open in new window

Olaf Berli

ASKER

Thanks again. Works great

Tried to put my statements and radio buttons into a table, but this created a blank line for each statement just after the script. Firebug shows that these blank lines appear just after the
form onsubmit .... line....

Michel Plungjan

Can it perhaps be less complicated and more pragmatic?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript">
  var qs = 9; // number of questions
  function checkRadioIsSet(theForm) {
    var cnt=0;
    for (var i=1;i<=qs;i++) {
      var q = theForm.elements["q"+i];
      if (q[0].checked||q[1].checked) cnt++
      else {
        alert("You did'nt select an answer for question \"" + i + "\" !");
        return false;
      }
    }
    return cnt>0;;
  }
</script>
</head>
<body>
<form name="questfrm" method="post" onsubmit="return checkRadioIsSet(this);">
<div>1. Statement 1: <input name="q1" class="radioToCheck" value="1" type="radio" />Agree <input name="q1" value="0" type="radio" />Disagree </div><br />
<div>2. Statement 2: <input name="q2" class="radioToCheck" value="1" type="radio" />Agree <input name="q2" value="0" type="radio" />Disagree </div><br /> 
<div>3. Statement 3: <input name="q3" class="radioToCheck" value="1" type="radio" />Agree <input name="q3" value="0" type="radio" />Disagree </div><br /> 
<div>4. Statement 4: <input name="q4" class="radioToCheck" value="1" type="radio" />Agree <input name="q4" value="0" type="radio" />Disagree </div><br /> 
<div>5. Statement 5: <input name="q5" class="radioToCheck" value="1" type="radio" />Agree <input name="q5" value="0" type="radio" />Disagree </div><br /> 
<div>6. Statement 6: <input name="q6" class="radioToCheck" value="1" type="radio" />Agree <input name="q6" value="0" type="radio" />Disagree </div><br /> 
<div>7. Statement 7: <input name="q7" class="radioToCheck" value="1" type="radio" />Agree <input name="q7" value="0" type="radio" />Disagree </div><br /> 
<div>8. statement 8: <input name="q8" class="radioToCheck" value="1" type="radio" />Agree <input name="q8" value="0" type="radio" />Disagree </div><br /> 
<div>9. Statement 9: <input name="q9" class="radioToCheck" value="1" type="radio" />Agree <input name="q9" value="0" type="radio" />Disagree </div><br />
<input name="Sumbit" value="Send" type="submit" /> 
</form>
</body>
</html>

Open in new window

Olaf Berli

ASKER

Thanks.
It looks a bit simpler. Tried it out and replaced theForm with the form name (questfrm). When running it, no missing check boxes are reported, the fomr (radio buttons) are blanked. Seems like som logic in the script isn't quite right, but I'm not up to speed on javascript, so I can't say for sure...

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Olaf Berli

ASKER

Tried, checked etc. many times, but whatever I do, pressing Submit only brings up the form with no buttons checked. No error messages about missing selections. ???
Only change from example is that the number of question is not 9 but 20. Have changed script accordingly.

Any ideas what's wrong?

Olaf Berli

ASKER

OOps.... Found it! Hadn't read your code properly. Sorry!!!!
Works now.

Still same issue if I put the questions and radio buttons into a table. It displays a blank line for each question before the table is displayed. Any ideas why and how to correct it?

Michel Plungjan

Show the html please.

Do you have a form per question? - the form tag will add space unless you flatten it with CSS

form { display:inline }

Olaf Berli

ASKER

I've attached the entire file with the script and the html-code. Most of the text is in my native language, so probably not very understandable, but the coding should be ok.

As shown, there is one single form for all questions.

testform-2.txt

Michel Plungjan

Det er ikke noget problem ;)

Remove <br /> from each line

Michel Plungjan

Also remove the > before 17 and change the last row to
<tr><td colspan="3"><input name="Sumbit" value="Send" type="submit" /></td></tr>
to avoid ugly empty cell syndrome ;)

Michel Plungjan

PS: Please do not forget Leakim when you assign points. I did not mean to hijack this question (even though he answers far too many questions already ;)

Olaf Berli

ASKER

Thanks a lot!
Form and script seems to work just fine now.
Ha en fin dag!

Michel Plungjan

I lige måde (i like måte) ;)