ट्विटर बूटस्ट्रैप रेडियो बटन

Question

काम नहीं कर रहे हैं मुझे ट्विटर बूटस्ट्रैप जावास्क्रिप्ट रेडियो बटन के साथ कोई समस्या है। जब मैं एक का चयन करता हूं और फिर सबमिट बटन पर क्लिक करता हूं, तो यह चयनित रेडियो मान नहीं दिखाता है।

मेरे कोड:

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

आप देख सकते हैं, वहाँ है एक name="option" value="1" और name="option" value="2" लेकिन जब मैं एक रेडियो का चयन करें और मुझे क्या करना:

<?php print_r($_POST); ?>

कोई option पद निर्दिष्ट है ।

यह केवल ट्विटर रेडियो बटन के लिए होता है, क्योंकि जब मैं <input type="text" name="test" value="something"/> जोड़ता हूं तो यह $_POST चर में दिखाई देगा।

समस्या कहां है?

Answer 1

समस्या <button> क्लिक होने पर कुछ भी सबमिट नहीं करता है। आप जब बटन

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

पर क्लिक बूटस्ट्रैप के मामले में 'रेडियो' केवल बटन राज्य & व्यवहार को प्रभावित करता इनपुट के अंतर्गत एक मूल्य के परिवर्तन को गति प्रदान एक छिपा इनपुट क्षेत्र की आवश्यकता है, और होगा। यह फॉर्म व्यवहार को प्रभावित नहीं करता है।

Answer 2

यह उपरोक्त टुकड़े के लिए एक jquery विकल्प है।

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

यह करने के लिए HTML है:

<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

सरल jQuery कोड मैं के साथ आया था:

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

यह एक असाधारण यूज-केस है, मेरे लिए, तो यह नहीं था मजबूत या लचीला होने की जरूरत नहीं है।

Answer 4

आप btn कक्षा <label> एस में जोड़ सकते हैं, इसलिए मैंने निम्न छिपा इनपुट की आवश्यकता नहीं है, अगर कोई बूटस्ट्रैप या जावास्क्रिप्ट नहीं है और आप अभी भी एचटीएमएल हेल्पर्स का उपयोग कर सकते हैं।

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> 

अद्यतन: वे बूटस्ट्रैप 3 में अब इस प्रारूप का उपयोग कर रहे है, लेकिन यह थोड़ा अलग मार्कअप की आवश्यकता है (अर्थात् data-toggle="buttons")। देखें http://getbootstrap.com/javascript/#buttons

Answer 5

मेरा जवाब @mcNux

द्वारा https://stackoverflow.com/a/16214643/1111662 पर आधारित है आपके विचार में (मैं Haml का उपयोग लेकिन ERB में बदलने यदि आवश्यक हो तो)

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

अपने दृश्य-विशिष्ट जावास्क्रिप्ट में उदाpages.js.coffee (फिर से, मैं CoffeeScript का उपयोग लेकिन सादा जे एस JQuery में बदलने यदि आवश्यक हो तो)

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