Radio Buttons Validation

Question

0.00/5 (No votes)

See more:

Hi,

I am validating radio buttons like this but it is working only for first one and exit from loop. Can you suggest any idea.

JavaScript

<
script type="text/javascript">
function testvalues()
{
  // Get the group, this returns an HTMLCollection
  var radio1 = document.forms["frm1"]["radio1"];

  // radio1 is an HTMLcollection
  if (!radio1[0].checked && !radio1[1].checked)
  {
    var labelanswer = document.getElementById('labelanswer');
    if (labelanswer != null)
    {
      // change the color of the entire line (span)
      labelanswer.style.background="red";
    }
    return false;
  }
  // validated, go to action page
  return true;
}
</script>
</head>
<body>

<form name="frm1"  onsubmit="return testvalues();">
<span id="labelanswer">Answer:
Yes<input type="radio" name="radio1"  value="yes" />
No<input type="radio" name="radio1" value="no" /></span><br />
<label for="labelanswer">Question:
Yes<input type="radio" name="radio1"  value="yes" />
No<input type="radio" name="radio1" value="no" /></label><br />
<input type="submit" value="Submit" />
</form>
</body>

Posted 1-Jul-11 8:13am

Member 8046452

Updated 1-Jul-11 8:17am

DaveAuld

v2

Add a Solution

Comments

DaveAuld 1-Jul-11 14:17pm

Edit: added code formatting.

DaveAuld 1-Jul-11 14:20pm

What exactly are you trying to do? What is your expected results?

Member 8046452 1-Jul-11 14:44pm

background is changing to red color if he hits submit without selecting radio button but it is working for only first one answer not for question. I need for both but it is working only for first.

Member 8046452 1-Jul-11 14:59pm

Before he hits submit button he has to select one from each group If not background has to change to red now it is doing only for first one I need it for both.

3 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Ruard · Answer 1 · 2011-07-01T09:11:00

You have to group them by the name attribute.

JavaScript

<span id="answer1">Question 1:
Yes<input type="radio" name="Question1" value="yes" />
No<input type="radio" name="Question1" value="no" /></span>

<span id="answer2">Question 2: 
Yes<input type="radio" name="Question2" value="yes" />
No<input type="radio" name="Question2" value="no" /></span>

<span id="answer3">Question 3: 
Yes<input type="radio" name="Question3" value="yes" />
No<input type="radio" name="Question3" value="no" /></span>

var group1 = document.forms["frm1"]["Question1"];
var group2 = document.forms["frm1"]["Question2"];
var group3 = document.forms["frm1"]["Question3"];

And when setting the color, every row has a unique id (answer1, answer2, answer3).

Ruard · Answer 2 · 2011-07-01T09:45:00

Here's an example with four different questions that are all validated inside a loop.

JavaScript

<html>
<head>
<script type="text/javascript">

function testvalues()
{
  var isvalid = true;
  var i;

  // test all questions
  for (i=1;i<5;i++)
  {
    // find the radiogroup
    var radio = document.forms["frm1"]["question"+i];
    // clear the error
    var labelanswer = document.getElementById("answer"+i);
    labelanswer.style.background="none";

    // radio is an HTMLcollection
    if (!radio[0].checked && !radio[1].checked)
    {
      // change the color of the entire line (span)
      labelanswer.style.background="red";
      // we want to validate all lines, so don't stop here
      isvalid = false;
    }
  }
  // return the result
  return isvalid;
}

</script></head>
<body>
 
<form name="frm1"  önsubmit="return testvalues();">

<span id="answer1">Question 1: 
Yes<input type="radio" name="question1" id="Radio1Yes" value="yes" />
No<input type="radio" name="question1" id="Radio1No" value="no" /></span><br />

<span id="answer2">Question 2: 
Yes <input type="radio" name="question2" id="Radio2Yes" value="yes" />
No <input type="radio" name="question2" id="Radio2No" value="no" /></span><br />

<span id="answer3">Question 3: 
Yes <input type="radio" name="question3" id="Radio3Yes" value="yes" />
No <input type="radio" name="question3" id="Radio3No" value="no" /></span><br />

<span id="answer4">Question 4: 
Yes <input type="radio" name="question4" id="Radio4Yes" value="yes" />
No <input type="radio" name="question4" id="Radio4No" value="no" /></span><br />

<input type="submit" value="Submit" />
</form>
</body>
</html>

Ruard · Answer 3 · 2011-07-05T09:58:00

This works for IE and FF.

<html>
<body>
 
<script type="text/javascript">
 
function alertme(ctrl)
{
  // get all elements in the group
  var elements = document.getElementsByName(ctrl.name);
  var i;
 
  for (i=0;i<elements.length;i++)
  {
    // clear the background of the SPAN
    elements[i].parentNode.style.background="none";
  }
  return true;
}
 
</script>
 
<form name="frm1">
<span id="q1male" style="background:red;"><input type="radio" name="sex" value="male" onchange="return alertme(this);" /></span> Male<br />
<span id="q1female" style="background:red;"><input type="radio" name="sex" value="female" onchange="return alertme(this);" /></span> Female
</form>
 
</body>
</html>

Radio Buttons Validation

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0

Radio Buttons Validation

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0

Existing Members

...or Join us