3

So I am generating a form that is different depending on what the user has chosen. Because of this, I have no idea what is on the page (i.e. select, checkboxes, radio, textarea, text input).

I need a way to just see if a group of radios has been checked or not, essentially to return the value of those radios that are all in the same group. Currently I'm using this jquery each loop:

  $("#formdiv input:radio").each(function(){
  //random validation code here
  }

The problem is that makes me go through every single radio button, when I just want to go through them by how they are grouped.

Additionally, I also need to get checkboxes by their group to get all of the checked values, but I need to know which ones are in the same checkbox group. My current each loop just returns all the checkboxes as individual things:

  $("#formdiv input:checkbox").each(function(){
  //random validation code here
  }

Can anyone help me out?

Sample HTML:

<div class='formatdiv'>
    year: <select name='year' class='required' id='validation3:select'>
        <option value=''></option>
        <option value='1992'>1992</option>
        <option value='1993'>1993</option>
        <option value='1994'>1994</option>
        <option value='1995'>1995</option>
        <option value='1996'>1996</option>
        <option value='1997'>1997</option>
        <option value='1999'>1999</option>
    </select>
</div>
<div class='formatdiv'>
    color: <input type='text' name='color' class='required' id='validation1:text' />
</div>
<div class='formatdiv'>
    used: no <input type='radio' class='optional' id='novalidation4:radio' name='used' value='no' />
    yes <input type='radio' class='optional' id='yesvalidation4:radio' name='used' value='yes' />
</div>
<div class='formatdiv'>
    Checks: Check 1 <input type='checkbox' class='required' name='Checks' value='Check 1' />
        check 2 <input type='checkbox' class='required' name='Checks' value='check 2' />
       check 3 <input type='checkbox' class='required' name='Checks' value='check 3' />
</div>
ekad
  • 14,436
  • 26
  • 44
  • 46
srchulo
  • 5,143
  • 4
  • 43
  • 72
  • Are they physically grouped in a div or something? Then you could select over the div with something like $("#formdiv #groupdivname").each(function() { if (...this is the right group...) $(this).find("input:radio").each(function () { ... – Cory Kendall Sep 29 '11 at 04:17
  • I guess I could physically group them in a div...but the problem is that I could have 4 or 5 or 6 different sets of radio button groups, and I won't know what their ids will be ahead of time, so I can't really hardcode the div id in my JS. Maybe I could group all the radio buttons in divs with class "radiogroup" and use $("#formdiv .radiogroup").each(function() to go through them? Not sure. – srchulo Sep 29 '11 at 04:21
  • @srchulo, you can use .wrap to wrap them in div. you will still need to keep track of the ID though, Don't really know what your html looks like or how they are added, so it's hard to tell. Like does each grouping have a button to submit/edit or whatever? If there is a button you can always get the parent div and then search just that on (this is if you wrap the groups of radio buttons) – Matt Sep 29 '11 at 04:26
  • @srchulo maybe i should ask, when exactly are you validating the radio buttons? this may give some clue as to how you can do this. – Matt Sep 29 '11 at 04:27
  • @Matt I've added sample HTML up in my question. I am validating the radio buttons once a submit button is hit. – srchulo Sep 29 '11 at 04:32
  • @srchulo Are there multiple submit buttons then for each grouping? – Matt Sep 29 '11 at 04:39
  • @srchulo you could try something like $(".mysubmitbutton").click(function(){$(this).closest(".formatdiv").find("input:radio").each... });, this will find the closest container with the formatdiv by going up the DOM, then find the radios within that parent div and do as you did before if you do have submit buttons for each grouping. Add a class to the submit buttons, you may need to do delegate as well if you add submit buttons on the fly. – Matt Sep 29 '11 at 04:44
  • @Matt there's only one submit button for the whole form. Is there maybe a way where I can get all of the names of radio buttons? Because then that would allow be to have the groups I needed. i.e. something like an each loop where $(this) was the name of the radio group? Once I had that I could use getElementsByTagName to go through all the vals, and then they would be grouped. – srchulo Sep 29 '11 at 04:50
  • @srchulo sure you can do $('#formdiv input:radio[name="used"]') this will find all radios with the name used. – Matt Sep 29 '11 at 04:53
  • @Matt, I know I can do that, but I need to get dynamic names-- as in I won't know what they will be ahead of time. I know I could use $('#formdiv input:radio[name="*"]'), but then that would just return all names and they wouldn't be in groups. – srchulo Sep 29 '11 at 05:02
  • @srchulo im not understanding how you have groups of radio buttons and you only validate a few at a time. On what event are you validating these radio button? I just don't understand how you validate a few at a time and then all of the sudden you need to validate more when you only have 1 submit button. – Matt Sep 29 '11 at 05:13
  • @Matt, sorry, let me try to be a little clearer. What I mean is that I could have one group (grouped by name), such as name='used', and another group such as name='european', both having yes no options. When "submit" is hit, I have to know that either yes or no is checked for each one of those groups, if not, I do not let the user submit the form. The reason I am having so much trouble with this, is that I have no idea how many radio groups will be on the page or what their names will be-- it is all dynamic and random. If you still do not understand, please let me know. – srchulo Sep 29 '11 at 05:20
  • @srchulo oh i got you, i see what you mean know. You just want to see if they made a selection in that group and not go through every single one. – Matt Sep 29 '11 at 05:23
  • @srchulo I don't know if there is a direct way to do this, you could always create an array of groups. So anytime they add a new group, you can add that to the array. Then when submit comes along just go through that array. – Matt Sep 29 '11 at 05:28
  • @srchulo check this out actually - http://stackoverflow.com/questions/1165627/jquery-and-radio-button-groups, basically what i was saying, except you create the array afterwards, instead of when you add groups. – Matt Sep 29 '11 at 05:30
  • @Matt, is there maybe a way where I could get the names of all of the radio groups on the page? Because that would make going through all of them simple if I knew their name. – srchulo Sep 29 '11 at 05:31
  • @scrhulo look at the other comment i left, but basically he just goes through all the radio buttons like you did, except when creating the array he just overwrites the same group name over and over, the value doesn't really matter, but he just sets it to true. – Matt Sep 29 '11 at 05:33
  • I believe this is what you are after: http://stackoverflow.com/questions/1165627/jquery-and-radio-button-groups – Matt Sep 29 '11 at 05:42

1 Answers1

0

As Matt pointed out, the answer can be found here:

jQuery and radio button groups

With some simple modification this should also work for checkboxes.

Community
  • 1
  • 1
srchulo
  • 5,143
  • 4
  • 43
  • 72