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