html - inside - input-group-btn bootstrap 3

Los botones de radio de arranque de Twitter no funcionan

Question

Tengo un problema con los botones de radio javascript bootstrap de twitter. Cuando selecciono uno y luego hago clic en el botón Enviar, no muestra el valor de radio seleccionado.

Mi código:

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

Como puede ver, hay un name="option" value="1" y name="option" value="2" pero cuando selecciono una radio y hago:

<?php print_r($_POST); ?>

No hay una option publicación especificada.

Sucede solo para los botones de radio de twitter, porque cuando agrego <input type="text" name="test" value="something"/> entonces aparecerá en la variable $_POST .

¿Dónde está el problema?

Answer 1

El código jQuery más simple que se me ocurrió fue:

<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn" onClick="$(''#gender'').val(''f'');">♀</button>
<button type="button" class="btn" onClick="$(''#gender'').val(''m'');">♂</button>
</div>
<input name="gender" id="gender" type="hidden" value="">

Es un caso de uso excepcional, para mí, por lo que no necesitaba ser robusto o flexible.

Answer 2

El problema es que <button> no envía nada cuando se hace clic. Tendrá que tener un campo de entrada oculto y disparar un cambio de valor dentro de la entrada cuando haga clic en el botón

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

En el caso del bootstrap, la ''radio'' solo afecta el estado y el comportamiento del botón. No afecta el comportamiento de la forma.

Answer 3

Esta es una alternativa jquery a la pieza anterior.

$("body").find(".btn").each(function(){
$(this).bind(''click'', function(){
$("input[name=view-opt-bt-group-value]").value = this.value
});
});

El HTML para esto es:

<div class="row pull-right">
<div class="btn-group view-opt-btn-group" data-toggle="buttons-radio">
<button type="button" class="btn" value="0"><i class="icon-th-list"></i></button>
<button type="button" class="btn" value="1"><i class="icon-th-list"></i></button>
<input type="hidden" name="view-opt-bt-group-value" value="0">
</div>
</div>

Answer 4

Mi respuesta se basa en https://.com/a/16214643/1111662 por @mcNux

En su opinión (yo uso HAML pero me convierto a ERB si es necesario)

.btn-group{data:{toggle: "buttons-radio"}}
%label.btn
= f.radio_button :gender, "Male"
Male
%label.btn
= f.radio_button :gender, "Female"
Female

En su javascript específico de la vista, por ejemplo, pages.js.coffee (de nuevo, uso CoffeeScript pero lo convierto a JS JQuery simple si es necesario)

$(document).ready ->
$(''.btn-group label.btn input[type=radio]'')
.hide()
.filter('':checked'').parent(''.btn'').addClass(''active'')

Answer 5

Puedes agregar la clase btn a <label> s, así que logré lo siguiente, que no requiere una entrada oculta, se degrada graciosamente si no hay bootstrap o javascript y aún puedes usar los helpers html.

Pruébalo .

<div class="btn-group" data-toggle="buttons-radio">
<label class="btn">@Html.RadioButton("option", 1) Option 1</label>
<label class="btn">@Html.RadioButton("option", 2) Option 2</label>
</div>
...
<script type="text/javascript">
$(function () {
// Bootstrappable btn-group with checkables inside
// - hide inputs and set bootstrap class
$(''.btn-group label.btn input[type=radio]'')
.hide()
.filter('':checked'').parent(''.btn'').addClass(''active'');
});
</script>

Actualización: Están utilizando este formato ahora en Bootstrap 3 pero requiere un marcado ligeramente diferente (es decir, data-toggle="buttons" ). Ver http://getbootstrap.com/javascript/#buttons