Q: How to submit twitter bootstrap javascript buttons? I'm talking about the Twitter Boostrap radio buttons from here: http://twitter.github.com/bootstrap/javascript.html#buttons
I have used them in my view file like this:
<div class="btn-group" data-toggle="buttons-radio">
     <input type="button" name="type" class="btn" value="Car">
     <input type="button" name="type" class="btn" value="Bicycle">
</div>

But when I submit the form and trying to validate those, I can't get their values...
echo $_POST['type']; is empty... so how should I access & validate the above "radio" buttons?

A: The plugin only work for appearances : it does not set anything (except the class). You have to use your own JS to set some real radio buttons, or a unique hidden input.
$('[data-toggle="buttons-radio"] > .btn').on('click',function() {
    $('#someHiddenInput').val($(this).val());
});

Demo (jsfiddle)
It seems that type="button" are not submitted anyway (on my Firefox).

This is one approach, an other would be to check on submit which one has the .active class.

A: An elegant solution  derived from Sherbrow's answer. It lets you have several Bootstrap-style radio buttons and keep them in sync with a hidden input with just one line of code. All you need to do is always place a hidden input inside of the .btn-group.
HTML:
        <!-- Vehicle
        ================================================== -->
        <div class="control-group">
            <label class="control-label" for="selectRecipients">Vehicle</label>
            <div class="controls">
                <div class="btn-group" data-toggle="buttons-radio">
                    <button type="button" class="btn" value="car">Car</button>
                    <button type="button" class="btn" value="bicyle">Bicycle</button>
                    <input type="hidden" name="vehicle" value=""></input>
                </div>
            </div>
        </div>

        <!-- Food
        ================================================== -->
        <div class="control-group">
            <label class="control-label" for="selectRecipients">Vehicle</label>
            <div class="controls">
                <div class="btn-group" data-toggle="buttons-radio">
                    <button type="button" class="btn" value="apples">Apples</button>
                    <button type="button" class="btn" value="oranges">Oranges</button>
                    <input type="hidden" name="food" value=""></input>
                </div>
            </div>
        </div>

JQUERY:
    /** Associate UI-only radio buttons with hidden fields **/
    $('[data-toggle="buttons-radio"] > button').on('click', function() {
        $(this).parent().find('input[type=hidden]').val( $(this).val() );
        alert( $(this).parent().find('input[type=hidden]').val() );
    });

Demo: http://jsfiddle.net/KyHMp/1/
In a live setting, you'd want to set one of the button as the default active button (.active) and give a default value to the hidden field. 
I hope it helps someone. 

A: This isn't actually even related to Twitter Bootstrap.  You should consider having unique names for the "name" attributes.
