Передача значений buttons-checkbox в php обработчик?

Question

[MeroVingeR]

Добрый день!

Использую Bootstrap. На странице есть форма, с элементами buttons-checkbox.

Результаты формы передаются в php обработчик, который отправляет письмо на email.


Проблема в том, что элементы buttons-checkbox не являются checkbox, поэтому классическими средствами не передаются.

Поэтому вопрос: как передать value нажатых кнопок в php обработчик?

<form class="form form-horizontal" method="POST" action="callback.php">
	<div class="controls">
		<div class="btn-group" data-toggle="buttons-checkbox">
			<div class="btn btn-mini" value="value_1">Опция 1</div>
			<div class="btn btn-mini" value="value_2">Опция 2</div>
			<div class="btn btn-mini" value="value_3">Опция 3</div>
			<div class="btn btn-mini" value="value_4">Опция 4</div>
			<div class="btn btn-mini" value="value_5">Опция 5</div>
		</div>
	</div>
	<button class="btn btn-success" type="submit">Отправить</button>
</form>

UPD:

Решил проблему через скрытые checkbox'ы.

<form class="form form-horizontal" method="POST" action="callback.php">
	<div class="controls">
		<div class="btn-group" data-toggle="buttons-checkbox">
			<input id="option_1" type="checkbox" name="checkbox[]" value="value_1"/>
			<label class="btn btn-mini" for="option_1">Опция 1</label>
			<input id="option_2" type="checkbox" name="checkbox[]" value="value_2"/>
			<label class="btn btn-mini" for="option_2">Опция 2</label>
			<input id="option_3" type="checkbox" name="checkbox[]" value="value_3"/>
			<label class="btn btn-mini" for="option_3">Опция 3</label>
			<input id="option_4" type="checkbox" name="checkbox[]" value="value_4"/>
			<label class="btn btn-mini" for="option_4">Опция 4</label>
			<input id="option_5" type="checkbox" name="checkbox[]" value="value_5"/>
			<label class="btn btn-mini" for="option_5">Опция 5</label>
		</div>
	</div>
	<button class="btn btn-success" type="submit">Отправить</button>
</form>

Answer 1

[Петруша Укропов]

Скрытые чекбоксы? При нажатии на див, значение чекбокса меняется

Comments

[MeroVingeR]

Мне кажется должно быть более простое и изящное решение. Не зря buttons-checkbox в bootstrap включены.
Скрытые чекбоксы на самый крайний случай)

[Ivan]

Стандартного простого решения нет.
github.com/twitter/bootstrap/issues/1161 и по ссылке оттуда jsfiddle.net/charettes/SauLj/

Answer 2

[Русдан Киба]

<form class="form form-horizontal" method="POST" action="callback.php">
    <div class="controls">
        <div class="btn-group" data-toggle="buttons-checkbox" name="my_name">
            <div class="btn btn-mini" value="value_1">Опция 1</div>
            <div class="btn btn-mini" value="value_2">Опция 2</div>
            <div class="btn btn-mini" value="value_3">Опция 3</div>
            <div class="btn btn-mini" value="value_4">Опция 4</div>
            <div class="btn btn-mini" value="value_5">Опция 5</div>
        </div>
    </div>
    <button class="btn btn-success" type="submit">Отправить</button>
</form>

$(function(){
   $('.btn-group[data-toggle="buttons-checkbox"]').each(function(){
       var name = $(this).attr('name');
       var def_val= $(this).find('btn:eq(0)');
       $(this).add('input').attr({'name':name,'type':'hidden'}).vla(def_val);
   });
});
$('.btn-group .btn').live('click',function(){
    $(this).parent().find('input').val($(this).val());
});

Как то так. Инпут можно вручную добавить.

Comments

[Русдан Киба]

<form class="form form-horizontal" method="POST" action="callback.php">
    <div class="controls">
        <div class="btn-group" data-toggle="buttons-checkbox">
            <div class="btn btn-mini" value="value_1">Опция 1</div>
            <div class="btn btn-mini" value="value_2">Опция 2</div>
            <div class="btn btn-mini" value="value_3">Опция 3</div>
            <div class="btn btn-mini" value="value_4">Опция 4</div>
            <div class="btn btn-mini" value="value_5">Опция 5</div>
        </div>
        <input type="hidden" name="my_name" value="" />
    </div>
    <button class="btn btn-success" type="submit">Отправить</button>
</form>

$('.btn-group .btn').live('click',function(){
    $(this).parent().find('input[name="my_name"]').val($(this).val());
});