Link to home
Start Free TrialLog in
Avatar of MayoorPatel
MayoorPatel

asked on

Javascript to Validate Radio Buttons

HI there...

I have a form with 30 Questions, each question has 3 radio buttons. The user can only select 1 radio button, but must select at least 1 for each question. The Question Radio Groups are Labelled as follows

Question1
Question2
Question3
.
.
.
Question30

What I need is some nifty javascript which will loop through the questions checking to make sure at least one of the radio buttons has been checked. If the code finds for example 5 questions reamin without being answered I would like the alertbox to say which questions have not been checked. Many Thanks

I've included some code which shows you 1 of the 30 Questions.
<tr>
    <td bgcolor="#DCE7F0"><label>
      <div align="center">
        <input  type="radio" name="Question2"  value="1" />
      </div>
    </label></td>
    <td bgcolor="#DCE7F0"><label>
        <div align="center">
          <input type="radio" name="Question2"  value="2" />
        </div>
      </label>      </td>
       <td bgcolor="#DCE7F0">
      <label>
        <div align="center">
          <input type="radio" name="Question2"  value="3" />
        </div>
      </label>      </td>
  </tr>

Open in new window

Avatar of crush83
crush83
Flag of United States of America image

Try this: (untested just made it)
<script language="text/javascript">
function allQuestionsAnswered() {
	radioElements = document.forms[0].radios;
	
	for (i=0; i<radioElements.length; i++) {
		if (!radioElements[i].checked)
			alert('Question ' + radioElements[i].name + ' has not been answered.');
	}
}
</script>

Open in new window

Here is a code snippit you can use as a function that is called and can be used for every question (just pass varaibles to it)

and then the text to call the function as well.

You will either have to code it for every question though or build a loop to call the function.

// call the function below
if (radialValidate(formPath.PropertyDescription, "Property Description", "Y")==false)	{return (false);	}		
 
 
 
//---------This makes sure a radial is checked for this question.
function radialValidate(question, quesNum, RequiredYN)  {
	// only need to see if "Y" here not if filled in also.
	if (RequiredYN == "Y"){
		for (i=0; i<question.length; i++) {
			if (question[i].checked) { 
				return(true);
			}		
		} //end of for statement
		alert("You need to select one checkbox for a " + quesNum);
		return(false);
	} // end if checking if required
}// end function

Open in new window

Avatar of MayoorPatel
MayoorPatel

ASKER

None of those 2 samples work guys.
Mine wont loop through the questions, you have to do it per question.  and for mine you would need to fill in the first line (to call the function).  You need to chnage the "formPath" to whatever your form path is I use a variable for this usually (sorry did not state this), like this:
var formPath = window.document.formname

Then the "PropertyDescription" part is replaced with whatever your field name is "QUestion1"

so more like this:
if (radialValidate(formPath.Question2, "Question2", "Y")==false)   {return (false);        }              
 
 
The second variable in the above function call is the name of the field you want to pop up in the alert box, and the 3rd value is if it is required or not.
Brad cheesr for that the values of the checkboxes are 1, 2 or 3 though how would that affect the code please?
Oh and can you give specifics on how this is all implemented with regards to the call from the HTML please? Im afraid im new to javascript!
ASKER CERTIFIED SOLUTION
Avatar of brad2575
brad2575
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Nice