Twitter bootstrap radio buttons not working

Question

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:

<form action="" class="form-horizontal" method="post">
  <fieldset>
    <div class="control-group">
      <label class="control-label">Type:</label>
      <div class="controls">
        <div class="btn-group" data-toggle="buttons-radio">
          <button type="button" data-toggle="button" name="option" value="1" class="btn btn-primary">Option One</button>
          <button type="button" data-toggle="button" name="option" value="2" class="btn btn-primary">Option Two</button>
        </div>
      </div>
    </div>
    <div class="form-actions">
      <input class="btn btn-primary" type="submit" value="Go">
      <a href="index.php" class="btn">Back</a>
    </div>
  </fieldset>
</form>

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:

<?php print_r($_POST); ?>

There is no option post specified.

It happens only for the twitter radio buttons, because when I add <input type="text" name="test" value="something"/> then it will appear in the $_POST variable.

Where is the problem?

Answer 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.