web-dev-qa-db-fra.com

Twitter bootstrap ne fonctionnent pas

J'ai rencontré un problème avec les boutons radio Twitter bootstrap javascript. Lorsque j'en sélectionne un, puis clique sur le bouton Envoyer, il n'affiche pas la valeur radio sélectionnée.

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 name="option" value="1" Et name="option" value="2" Mais quand je sélectionne une radio et je le fais:

<?php print_r($_POST); ?>

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

Cela se produit uniquement pour les boutons radio Twitter, car lorsque j'ajoute <input type="text" name="test" value="something"/>, Il apparaîtra dans la variable $_POST.

Où est le problème?

htmlformstwitter-bootstrapradio-button
16
Scott

Le problème est <button> ne soumet rien lorsque vous cliquez dessus. Vous devrez avoir un champ de saisie caché et déclencher un changement de valeur dans l'entrée en cliquant 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 du bootstrap la 'radio' n'affecte que l'état et le comportement du bouton. Elle n'affecte pas le comportement du formulaire.

25
Ben Rowe

Il s'agit d'une alternative jquery à 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 ceci est:

<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>
17
Michael Andrei Trimm

Vous pouvez ajouter la classe btn à <label>s, donc j'ai réalisé ce qui ne nécessite pas d'entrée cachée, se dégrade gracieusement si non bootstrap ou javascript et vous pouvez toujours utiliser les helpers html.

Essayez-le .

<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 maintenant dans Bootstrap 3 mais il nécessite un balisage légèrement différent (à savoir data-toggle="buttons"). Voir http://getbootstrap.com/javascript/#buttons

8
mcNux

Le code jQuery le plus simple que j'ai trouvé é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="">

C'est un cas d'utilisation exceptionnel, pour moi, donc il n'a pas besoin d'être robuste ou flexible.

3
Alastair

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

À votre avis (j'utilise HAML mais je convertis en 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

Dans votre javascript spécifique à la vue, par exemple pages.js.coffee (encore une fois, j'utilise CoffeeScript mais je le convertis en JS JQuery ordinaire si nécessaire)

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