I pulsanti di avvio di Twitter non funzionano

Question

Ho riscontrato un problema con i pulsanti di javascript di Twitter bootstrap. Quando seleziono uno e poi clicco sul pulsante di invio, non mostra il valore radio selezionato.

Il mio codice:

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

Come potete vedere, c'è un name="option" value="1" e name="option" value="2" ma quando seleziono una radio e lo faccio:

<?php print_r($_POST); ?>

Non c'è option posta specificata .

Si verifica solo per i pulsanti di scelta di Twitter, perché quando aggiungo <input type="text" name="test" value="something"/>, questo verrà visualizzato nella variabile $_POST.

Dov'è il problema?

Answer 1

Il problema è <button> non invia nulla quando viene fatto clic. Avrete bisogno di avere un campo di input nascosto, e innescare un cambio di valore nella finestra di input quando si fa clic sul pulsante

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

Nel caso del bootstrap del 'Radio' influenza solo lo stato del pulsante & comportamento. Non influenza il comportamento del modulo.

Answer 2

Questa è un'alternativa jquery al brano precedente.

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

Il codice HTML a questo è:

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

Il codice jQuery più semplice mi è venuta era:

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

Si tratta di un caso d'uso eccezionale, per me, in modo che didn Devo essere robusti o flessibili.

Answer 4

È possibile aggiungere la classe btn a <label> s, quindi ho ottenuto quanto segue che non richiede un input nascosto, degrada con garbo se nessun bootstrap o javascript e si possono ancora utilizzare gli helper html.

Try it out.

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

Aggiornamento: Stanno usando questo formato ora in Bootstrap 3 ma richiede markup leggermente diverso (cioè data-toggle="buttons"). Vedere http://getbootstrap.com/javascript/#buttons

Answer 5

La mia risposta si basa su https://stackoverflow.com/a/16214643/1111662 da @mcNux

Secondo lei (io uso HAML ma convertire in ERB se necessario)

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

Nella tua JavaScript specifica-view per esempiopages.js.coffee (ancora una volta, io uso CoffeeScript ma convertire in pianura JS JQuery se necessario)

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