?
Solved

Radio Button Validation

Posted on 2006-04-30
14
Medium Priority
?
616 Views
Last Modified: 2008-02-01
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
Comment
Question by:cat4larry
  • 7
  • 5
  • 2
14 Comments
 
LVL 17

Expert Comment

by:BogoJoker
ID: 16574453
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
 

Author Comment

by:cat4larry
ID: 16574524
Joe, My client does not want to have one defaulted to checked
0
 
LVL 17

Expert Comment

by:BogoJoker
ID: 16574529
So does that mean you would like option number two?  Your comment is vary vague.

Joe P
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:cat4larry
ID: 16574533
Sorry yes option 2 is what I am looking for.
0
 
LVL 17

Assisted Solution

by:BogoJoker
BogoJoker earned 800 total points
ID: 16574553
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
 

Author Comment

by:cat4larry
ID: 16574576
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
 
LVL 17

Expert Comment

by:BogoJoker
ID: 16574583
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
 

Author Comment

by:cat4larry
ID: 16574597
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
 
LVL 17

Expert Comment

by:BogoJoker
ID: 16574629
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
 
LVL 54

Expert Comment

by:Ryan Chong
ID: 16574790
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
 

Author Comment

by:cat4larry
ID: 16574833
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
 
LVL 54

Accepted Solution

by:
Ryan Chong earned 1200 total points
ID: 16574863
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
 

Author Comment

by:cat4larry
ID: 16576865
Thanks both of you for taking the time to help ryancys worked great!
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question