asked on

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

BogoJoker

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

cat4larry

ASKER

Joe, My client does not want to have one defaulted to checked

BogoJoker

So does that mean you would like option number two? Your comment is vary vague.

Joe P

cat4larry

ASKER

Sorry yes option 2 is what I am looking for.

SOLUTION

BogoJoker

membership

This solution is only available to members.

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

Start Free Trial

cat4larry

ASKER

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.

BogoJoker

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

cat4larry

ASKER

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

BogoJoker

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

Joe P

cat4larry

ASKER

http://72.148.178.68/test/index2.html

Ryan Chong

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>

cat4larry

ASKER

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.

ASKER CERTIFIED SOLUTION

Ryan Chong

membership

This solution is only available to members.

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

Start Free Trial

cat4larry

ASKER

Thanks both of you for taking the time to help ryancys worked great!