Twitter bootstrap radio buttons not working

Twitter bootstrap radio buttons not working

I got a problem with the twitter bootstrap javascript radio buttons. When I select one and then click the submit button, it doesn’t show the selected radio value.
My code:


As you can see, there is a name=”option” value=”1″ and name=”option” value=”2″ but when I select one radio and I do:

There is no option post specified.
It happens only for the twitter radio buttons, because when I add then it will appear in the $_POST variable.
Where is the problem?

Solutions/Answers:

Solution 1:

The problem is <button> doesn’t submit anything when clicked. You will need to have a hidden input field, and trigger a value change within the input when clicking the button

<input type="hidden" name="option" value="" id="btn-input" />
<div class="btn-group" data-toggle="buttons-radio">  
  <button id="btn-one" type="button" data-toggle="button" name="option" value="1" class="btn btn-primary">Option One</button>
  <button id="btn-two" type="button" data-toggle="button" name="option" value="2" class="btn btn-primary">Option Two</button>
</div>

<script>
  var btns = ['btn-one', 'btn-two'];
  var input = document.getElementById('btn-input');
  for(var i = 0; i < btns.length; i++) {
    document.getElementById(btns[i]).addEventListener('click', function() {
      input.value = this.value;
    });
  }
</script>

In the case of the bootstrap the ‘radio’ only affects the button state & behavior. It doesn’t effect the form behaviour.

Related:  How to detect which Bootstrap version is used from JavaScript?

Solution 2:

This is a jquery alternative to the above piece.

$("body").find(".btn").each(function(){
    $(this).bind('click', function(){
      $("input[name=view-opt-bt-group-value]").value = this.value
    });
  });

The HTML to this is:

<div class="row pull-right">
  <div class="btn-group view-opt-btn-group" data-toggle="buttons-radio">
    <button type="button" class="btn" value="0"><i class="icon-th-list"></i></button>
    <button type="button" class="btn" value="1"><i class="icon-th-list"></i></button>
    <input type="hidden" name="view-opt-bt-group-value" value="0">
  </div>
</div>

Solution 3:

You can add the btn class to <label>s, so I achieved the following which doesn’t require a hidden input, degrades gracefully if no bootstrap or javascript and you can still use the html helpers.

Try it out.

<div class="btn-group" data-toggle="buttons-radio">
   <label class="btn">@Html.RadioButton("option", 1) Option 1</label>
   <label class="btn">@Html.RadioButton("option", 2) Option 2</label>
</div>
...
<script type="text/javascript">
    $(function () {
        // Bootstrappable btn-group with checkables inside
        // - hide inputs and set bootstrap class
        $('.btn-group label.btn input[type=radio]')
          .hide()
          .filter(':checked').parent('.btn').addClass('active');
    });
</script>

Update: They’re using this format now in Bootstrap 3 but it requires slightly different markup (namely data-toggle="buttons"). See http://getbootstrap.com/javascript/#buttons

Solution 4:

The simplest jQuery code I came up with was:

<div class="btn-group" data-toggle="buttons-radio">
    <button type="button" class="btn" onClick="$('#gender').val('f');">♀</button>
    <button type="button" class="btn" onClick="$('#gender').val('m');">♂</button>
</div>
<input name="gender" id="gender" type="hidden" value="">

It’s an exceptional use-case, for me, so it didn’t need to be robust or flexible.

Related:  Vertically centering Bootstrap modal window

Solution 5:

My answer is based on https://stackoverflow.com/a/16214643/1111662 by @mcNux

In your view (I use HAML but convert to ERB if needed)

.btn-group{data:{toggle: "buttons-radio"}}
  %label.btn
    = f.radio_button :gender, "Male"
    Male
  %label.btn
    = f.radio_button :gender, "Female"
    Female

In your view-specific javascript e.g. pages.js.coffee (again, I use CoffeeScript but convert to plain JS JQuery if needed)

$(document).ready ->
  $('.btn-group label.btn input[type=radio]')
    .hide()
    .filter(':checked').parent('.btn').addClass('active')

References