С переключателями Twitter Bootstrap, как правильно получить ввод формы?

Question

Я использую радио-переключатели Javascript в Twitter Bootstrap и хочу получить ввод формы в зависимости от состояния переключателя.

Самый простой подход, который я могу найти, - это добавить невидимый тег в кнопки - вот полезный пример jsFiddle, который кто-то выкинул.

Это работает хорошо, но это все еще своего рода клудж. Мой вопрос: как можно получить ввод формы с этих кнопок, то есть без дополнительных скрытых радиовходов?

Answer 1

Как насчет

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

DEMO

Я думаю, что неправильно прочитал ваш вопрос в первый раз... Вы можете создать скрытый элемент формы (он нужен вам для доступа к значению при отправке формы, если вы не используете AJAX) и использовать JS для установки его значения.

HTML

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

JS

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

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

})​

DEMO

Answer 2

На самом деле вы можете избежать ввода элемента HTML и CSS, используя index() функционировать так:

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

Я также добавил условие, чтобы не получать оповещение, если активная кнопка уже выбрана.

Answer 3

Решение, которое хорошо работает как с простой формой POST, так и с AJAX, заключается в том, чтобы иметь скрытое поле ввода, которое представляет текущее состояние группы кнопок. Затем вы можете обрабатывать все эти группы кнопок одинаково, используя следующую структуру разметки:

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

И следующий Javascript для настройки любых групп кнопок на странице:

$(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"));
        });
    });
});
});

Попробуйте это на jsFiddle