• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 622
  • Last Modified:

Radio Button Validation

I have a grid that has YES and NO HTML radio buttons for each row.  I need to make sure the user selects at least one.

Each row has a unique radion button like:

Row 1
rcount = 1
  <input type="radio" name="Radio(rcount)" value="Yes />
<input type="radio" name="Radio(rcount)" value="No />

 rcount + 1

Row 2
  <input type="radio" name="Radio(rcount)" value="Yes />
<input type="radio" name="Radio(rcount)" value="No />

Thanks
0
cat4larry
Asked:
cat4larry
  • 7
  • 5
  • 2
2 Solutions
 
BogoJokerCommented:
Hi cat4larry
> I need to make sure the user selects at least one.
Two ways you can do this.

1) Create the page with one selected already.  Just add the keyword checked to the <input> that you want to default to checked.  For instance here is an example:
  <input type="radio" checked name="Radio(rcount)" value="Yes />
Note: The word checked can be anywhere in the <input> before />

2) Validate the page on submitting.  You can check to see if they have one of the ones selected.  If they don't alert the user and you can even focus them on that section of the page.

Joe P
0
 
cat4larryAuthor Commented:
Joe, My client does not want to have one defaulted to checked
0
 
BogoJokerCommented:
So does that mean you would like option number two?  Your comment is vary vague.

Joe P
0
Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

 
cat4larryAuthor Commented:
Sorry yes option 2 is what I am looking for.
0
 
BogoJokerCommented:
Here is a simple example:

<html>
<head>
<script type="text/javascript">
function validate()
{
  var form = document.forms[0];
  if (form.Radio1.value == undefined)
  {
    alert("You must select Yes/No in Row 1");
    return false;
  }
  if (form.Radio2.value == undefined)
  {
    alert("You must select Yes/No in Row 2");
    return false;
  }
  return true;
}
</script>
</head>

<body>
<form>
<b>Row 1:</b><br>
Yes <input type="radio" name="Radio1" value="Yes" />
No <input type="radio" name="Radio1" value="No" /><br>
<b>Row 2:</b><br>
Yes <input type="radio" name="Radio2" value="Yes" />
No <input type="radio" name="Radio2" value="No" />
<br>
<input type="submit" onClick="return validate();" value="Submit">
</form>
</body>
</html>

How is that?  It checks if the value is undefined.  If it is not undefined then we know something is selected.  Remeber that javascript can be turned of by the user.  So if you have a server-side script you should also do a final 100% guarenteed check that everything is correct.
Joe P
0
 
cat4larryAuthor Commented:
Joe, I took your and code and created an HTML page, no matter what it comes back with You must select Yes/No in Row 1.

Thanks for helping so fast.
0
 
BogoJokerCommented:
Sure.  Notice the changes that I made to the <input> elements.  Radio1 instead of Radio(1).  Parenthesis are a big problem for javascript.  Javascript will view them solely as method calls (or arithmatic precedence) and it is very buggy.  Any modifications that you want to the code?

Joe P
0
 
cat4larryAuthor Commented:
I removed the parenthesis I have a counter that names the fields because its in a loop reading from a database dispalying data on a grid that has yes and no radio buttons for each row.  Im using your code exactly the way you have it with out applying it to my page and its just coming back with You must select Yes/No in Row 1.  Test it out for yourself.

Thanks
0
 
BogoJokerCommented:
Could I get a link to your page or see the source?
There are a couple reasons this could not be working.

Joe P
0
 
cat4larryAuthor Commented:
0
 
Ryan ChongCommented:
something like this will do:

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

function getRadioSelectedIndex(object) {
      var i = object.length;
      for (var j=0; j<i; j++) {
            if (object[j].checked) {
                  return j;                  
            }
      }
      return -1;
}

function validate()
{
  var form = document.forms[0];
  if (getRadioSelectedIndex(form.Radio1) == -1)
  {
    alert("You must select Yes/No in Row 1");
      form.Radio1[0].focus();
    return false;
  }
  if (getRadioSelectedIndex(form.Radio2) == -1)
  {
    alert("You must select Yes/No in Row 2");
      form.Radio2[0].focus();
    return false;
  }
  return true;
}
</script>
</head>

<body>
<form name="form1">
<b>Row 1:</b><br>
Yes <input type="radio" name="Radio1" value="Yes" />
No <input type="radio" name="Radio1" value="No" /><br>
<b>Row 2:</b><br>
Yes <input type="radio" name="Radio2" value="Yes" />

No <input type="radio" name="Radio2" value="No" />
<br>
<input type="submit" onClick="return validate();" value="Submit">
</form>
</body>
</html>
0
 
cat4larryAuthor Commented:
This does work.  Since the rows are being dynamitclly generated how can I add something like this
document.getElementById('Radio' + i);  to the script so I don't have to hardcode the radio button names.
0
 
Ryan ChongCommented:
you can try this:

<script type="text/javascript">

function getRadioSelectedIndex(object) {
      var i = object.length;
      for (var j=0; j<i; j++) {
            if (object[j].checked) {
                  return j;                  
            }
      }
      return -1;
}

function validate()
{
  var form = document.forms[0];
  var maxCnt = 2;
  for (var cnt = 1;cnt<=maxCnt; cnt++) {
      var Radioctrl = eval('form.Radio' + cnt);
        if (getRadioSelectedIndex(Radioctrl) == -1)
        {
            alert("You must select Yes/No in Row "+cnt);
            Radioctrl[0].focus();
            return false;
        }
  }  
  return true;
}
</script>
0
 
cat4larryAuthor Commented:
Thanks both of you for taking the time to help ryancys worked great!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 7
  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now