Twitter bootstrap boutons radio ne fonctionne pas

J'ai eu un problème avec twitter bootstrap, javascript boutons radio. Lorsque je sélectionne un et ensuite de cliquer sur le bouton soumettre, il ne montre pas la radio sélectionnée valeur.

Mon code:

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

Comme vous pouvez le voir, il y a un name="option" value="1" et name="option" value="2" mais lorsque je sélectionne une radio et je n':

<?php print_r($_POST); ?>

Il n'y a pas de option post spécifié.

Il arrive seulement pour le twitter des boutons radio, parce que quand j'ai ajouter <input type="text" name="test" value="something"/>, alors il apparaîtra dans la $_POST variable.

Où est le problème?

InformationsquelleAutor Scott | 2012-07-13
  1. 25

    Le problème est <button> n'est pas rien quand on clique dessus. Vous aurez besoin d'avoir un champ caché, et déclencher un changement de valeur dans l'entrée lorsque vous cliquez sur le bouton

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

    Dans le cas de l'amorçage de la "radio" n'affecte que l'état du bouton & comportement. Il n'a pas l'effet de la forme du comportement.

    • Cela fonctionne très bien pour moi, complet avec des exemple de mise en œuvre. Je vous remercie beaucoup.
    InformationsquelleAutor Ben Rowe
  2. 17

    C'est un jquery alternative à la pièce ci-dessus.

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

    Le code HTML de cette 

    <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>
    • je pense que vous voulez $("input[name=view-opt-bt-groupe-valeur]").val(ce.valeur)
    InformationsquelleAutor Michael Andrei Trimm
  3. 8

    Vous pouvez ajouter la btn classe de <label>s, j'ai donc donné les résultats suivants, qui ne nécessite pas un caché d'entrée, se dégrade normalement si pas de bootstrap ou javascript et vous pouvez toujours utiliser le html helpers.

    L'essayer.

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

    Mise à jour: Ils utilisent ce format aujourd'hui dans le Bootstrap 3, mais il nécessite peu différent de balisage (à savoir data-toggle="buttons"). Voir http://getbootstrap.com/javascript/#buttons

    InformationsquelleAutor mcNux
  4. 3

    Le plus simple jQuery, je suis venu avec était:

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

    Il est exceptionnel de cas d'utilisation, pour moi, il n'a pas besoin d'être robuste et flexible.

    InformationsquelleAutor Alastair
  5. 2

    Ma réponse est basée sur https://stackoverflow.com/a/16214643/1111662 par @mcNux

    De votre point de vue (j'utilise HAML mais convertir ERB si nécessaire)

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

    De votre point de vue spécifique de javascript par exemple pages.js.coffee (là encore, j'utilise CoffeeScript mais convertir à la plaine de JS JQuery si nécessaire)

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