Nút radio khởi động Twitter không hoạt động

Question

Tôi gặp sự cố với nút radio javascript bootstrap javascript. Khi tôi chọn một và sau đó nhấp vào nút gửi, nó không hiển thị giá trị radio đã chọn.

Mã của tôi:

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

Như bạn thấy, có một name="option" value="1" và name="option" value="2" nhưng khi tôi chọn một đài phát thanh và tôi làm:

<?php print_r($_POST); ?>

Không có option bài quy định .

Nó chỉ xảy ra cho các nút radio twitter, bởi vì khi tôi thêm <input type="text" name="test" value="something"/> thì nó sẽ xuất hiện trong biến số $_POST.

Sự cố ở đâu?

Answer 1

Sự cố là <button> không gửi bất kỳ điều gì khi được nhấp. Bạn sẽ cần phải có một trường nhập ẩn, và kích hoạt một sự thay đổi giá trị trong phạm vi đầu vào khi nhấp vào nút

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

Trong trường hợp của bootstrap các 'radio' chỉ ảnh hưởng đến nút trạng thái & hành vi. Nó không ảnh hưởng đến hành vi của biểu mẫu.

Answer 2

Đây là giải pháp thay thế cho phần trên.

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

HTML này là:

<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

Mã đơn giản nhất jQuery tôi đã đưa ra là:

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

Đây là một trường hợp sử dụng đặc biệt, đối với tôi, vì vậy nó đã không không cần phải mạnh mẽ hoặc linh hoạt.

Answer 4

Bạn có thể thêm lớp btn-<label> s, vì vậy tôi đã đạt được những điều sau đây mà không yêu cầu một đầu vào ẩn, làm giảm một cách duyên dáng nếu không bootstrap hoặc javascript và bạn vẫn có thể sử dụng những người giúp đỡ 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> 

Cập nhật: Họ đang sử dụng định dạng này bây giờ trong Bootstrap 3 nhưng nó đòi hỏi đánh dấu hơi khác nhau (cụ thể là data-toggle="buttons"). Xem http://getbootstrap.com/javascript/#buttons

Answer 5

câu trả lời của tôi là dựa trên https://stackoverflow.com/a/16214643/1111662 bởi @mcNux

Theo quan điểm của bạn (tôi sử dụng HAML nhưng chuyển đổi sang ERB nếu cần thiết)

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

Theo quan điểm cụ thể javascript của bạn ví dụpages.js.coffee (một lần nữa, tôi sử dụng CoffeeScript nhưng chuyển đổi thành JSJQuery đơn giản nếu cần)

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