11

I have the following HTML that creates a radio button group using Bootstrap.

<div class="btn-group" data-toggle="buttons-radio">
  <button class="btn" type="button" name="rating" value="1">
    <img ...>
  </button>
  <button class="btn" type="button" name="rating" value="2">
    <img ...>
  </button>
  <button class="btn" type="button" name="rating" value="3">
    <img ...>
  </button>
  <button class="btn" type="button" name="rating" value="4">
    <img ...>
  </button>
</div>

<button class="btn" type="submit" name="submit">Submit</button>

Based on user selection, I want to send the variable in the form from the radio group named "rating" with the value assigned to whatever the selected button's value is. How would I do this in jQuery?

Terry
  • 14,099
  • 9
  • 56
  • 84
ArKi
  • 681
  • 1
  • 10
  • 22

5 Answers5

15
$('button[name="rating"].active').val();

In plain English that selection reads as:

  • give me the value of
  • button elements
  • filter by the name attribute that has a value of rating (the group)
  • and the CSS class active (indicating it was selected)

Edit based on OP's new question in comments:

To capture the input from the button you will need to use custom script handlers. If your goal is to actually submit this with the form, I would actually suggest against it. Mostly because this is not what a user is expecting in a form. Just use a regular radio button input.

However if you do want to use this, you can do the following:

$('form').submit(function() {
    var rating = $('button[name="rating"].active').val();  

    // get the rest of the values
    // submit the form
});​

Here's an example with a regular input vs. the button and why you shouldn't use the button in a form: http://jsfiddle.net/TxgVe/1/

Terry
  • 14,099
  • 9
  • 56
  • 84
  • this way you should add a class to the clicked button, otherwise you will select an array of elements, this is genocide, how do you check when user clicks on another button? both `$(this).attr("value")` and `$(this).val();` return the value without adding classes. – Ram Apr 23 '12 at 10:04
  • I assume you're the one that downvoted my answer. This is a [Bootstrap radio button group](http://twitter.github.com/bootstrap/javascript.html#buttons) not just a random list of button elements that can be clicked on and off at will. Bootstrap automatically adds the `active` class to the selected button in the group, which can only be a single element. – Terry Apr 23 '12 at 12:35
  • yes, i did, i haven't developed an app with bootstrap so far. hope your answer can be helpful for an absent OP ;) – Ram Apr 23 '12 at 16:25
  • Hey guys, sorry for the late response. So how does this actually get passed into the form? Do I have to use a Submit call with jQuery, or can I implement it with a normal HTML form? – ArKi Apr 23 '12 at 17:39
3

Here is my solution: http://jsfiddle.net/tFYV9/1/

EDIT (Code from jsFiddle)

HTML

<input type="text" id="hidden_ipt" value="0" />
<div class="btn-group" data-toggle="buttons-radio" data-target="hidden_ipt"> 
  <button type="button" class="btn" data-toggle="button" value="female">
    female  
  </button>
  <button type="button" class="btn" data-toggle="button" value="male">
    male
  </button>
</div>​

JavaScript

// Bootstrap Hack
var _old_toggle = $.fn.button.prototype.constructor.Constructor.prototype.toggle;
$.fn.button.prototype.constructor.Constructor.prototype.toggle = function(){
  _old_toggle.apply(this);
  var $parent = this.$element.parent('[data-toggle="buttons-radio"]')
  var target = $parent ? $parent.data('target') : undefined;
  var value = this.$element.attr('value');
  if(target && value){
    $('#'+target).val(value);
  }
}
Anne
  • 26,765
  • 9
  • 65
  • 71
lilj
  • 31
  • 1
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – Mihai Iorga Sep 20 '12 at 08:54
3

Try this. It worked for me. I have a huge form worked multiple times.

<div class="btn-group" data-toggle="buttons-checkbox">
<button onclick="javascript:document.getElementById('INPUT_ID').value='1'" type="button" class="btn">CHECK ME</button>
</div>
<input type="hidden" id="INPUT_ID" name="INPUT_ID" value="" />
dubrod
  • 121
  • 1
  • 4
3

Good news!

Bootstrap 3 now uses input type="radio" button groups!

If you don't want to upgrade, however, see my answer below:

I'm using the following jQuery:

$('[data-toggle="buttons-radio"]').children(".btn").click(function(){
    var value = $(this).val();
    $(this).parent().next().val(value);
    $(this).parent().next().valid(); // Remove this if you're not using jQuery Validation
});

For this to work, all you need to do is ensure each button has a value and have an input (I prefer to use type="hidden" but type="text" is good for testing) after the btn-group div.

I noticed that if you submit the form and then hit the back button, all form data will still be present, including the hidden inputs, but the buttons will not be active. To fix that, add this extra jQuery:

$('[data-toggle="buttons-radio"]').each(function(){
    var that = $(this);
    var value = that.next().val();
    if(value != "") {
        that.children("button[value="+value+"]").addClass("active");
    }
});
rybo111
  • 12,240
  • 4
  • 61
  • 70
  • Yes, that's definitely possible. Although that is also now supported in Bootstrap 3 RC1. If you don't want to upgrade to BS3, try tinkering with the code and if you get stuck ask a new question, and someone or I will help you. – rybo111 Jul 30 '13 at 14:58
1

You can use my plugin bootstrap-form-buttonset to skin radios or checkboxes to bootstrap button groups. It is compatible to Bootstrap 2 and Bootstrap 3.

Just write plain old radio inputs, wrap them together and call $('.my-wrapper').bsFormButtonset('attach'). Thats it.

SaV
  • 313
  • 1
  • 4