With Twitter Bootstrap toggle radio buttons, what's the clean way to get form input?

Question

I am using Twitter Bootstrap's Javascript radio toggle buttons and want to get form input based on the state of the toggle.

The simplest approach I could find is to add an invisible tag within the buttons -- here's the helpful jsFiddle example that someone threw up.

It works nicely, but it's still sort of a kludge. My question is: what's the clean way to get form input from these buttons, i.e. without the extra hidden radio inputs?

Solution 1

How about

$(this).children('input[name="is_private"]').val()

DEMO

I think I misread your question the first time... You can create a hidden form element (you need it to access the value when you submit the form unless you do AJAX) and use JS to set its value.

HTML

<input type="hidden" name="status" id="status" value="" />

JS

$('div.btn-group button').click(function(){

    $("#status").attr('value', $(this).attr('id'));

})​

DEMO

Solution 2

Actually you can avoid the html input element and the css using the index() function like this:

$('div.btn-group .btn').click(function(){
    if ($(this).index() != $('div.btn-group .btn.active').index()){
        alert($(this).index());
    }
})​;

I also added a condition to not get the alert if the active button is already selected.

Solution 3

A solution that works well with plain form POST as well as AJAX is to have a hidden input field that represents the current state of the button group. You can then handle all these button groups the same using the following markup structure:

<form>
    <div id="test-group" class="btn-group" data-toggle="buttons-radio" data-toggle-name="testOption">
        <input type="hidden" name="testOption"/>
        <button type="button" class="btn" data-toggle-value="one">One</button>
        <button type="button" class="btn" data-toggle-value="two">Two</button>
    </div>
</form>

And the following Javascript to setup any button groups on a page:

$(function () {
$('div.btn-group[data-toggle-name]').each(function () {
    var group = $(this);
    var form = group.parents('form').eq(0);
    var name = group.attr('data-toggle-name');
    var hidden = $('input[name="' + name + '"]', form);
    $('button', group).each(function () {
        $(this).on('click', function () {
            hidden.val($(this).data("toggle-value"));
        });
    });
});
});

Try it out on jsFiddle​

Comments

[Ghopper21]

Hey thanks, but it seems kludgey to need a hidden radio button at all. Is there a way to do this without those hidden radio buttons?

[sachleen]

You'll need at least one hidden input. I've updated my answer with that.

[Ghopper21]

Gotcha. So no way around the hidden input. It's certainly less kludgey to have an actual hidden input rather than one made invisible via CSS. I was hoping to do this without additional JS, but I am using Bootstrap's JS buttons after all... Thanks!

[Ghopper21]

Thanks -- but that doesn't give me an input value that gets POSTed with the form.

[kschaeffler]

you can put a value attribute in the buttons and post those value using jquery.post()

[Ghopper21]

Gotcha, +1 for this approach, which I'm glad to know about, but having to manually get all the normal form inputs as well as the special radio buttons doesn't seem more elegant. I think I've just accepted that you need an input for a normal form post to work seamlessly, and a hidden input ain't so bad (especially as I've automated the creation and handling of them via Django widgets).