Получить значение из радио-переключателя da ta-bootstrap

Question

Я пытаюсь получить значение из twitter-bootstrap data-toggle="buttons-radio", отправленного вместе с комментариями из поля комментариев, в form_for в rails с использованием erb. Я видел эти посты, но не могу соединить точки, возможно, потому что я не знаю javascript.

Не работают кнопки загрузки Twitter

Определите значение в btn-group, используя twitter-bootstrap

С переключателями Twitter Bootstrap, как правильно получить ввод формы?

<%= form_for @approval, :url => approve_path, :method => :put, :html => { :id => "other_version_form" }  do |f| %>
  <fieldset>
      <p>
      <b>Comments:</b><br>
      <%= f.text_area :comments, :size => "200x3" %>
    </p>

    <div class="btn-group" data-toggle="buttons-radio">
      <button type="button" class="btn btn-info" name="approval[version]" id="approval_version" value="<%= "#{@latest}" %>"><%= "#{@latest}" %></button>
      <% @versions.each do |v| %>
        <button type="button" class="btn btn-info" name="approval[version]" id="approval_version" value="<%= "#{v}" %>"><%= "#{v}" %></button>
      <% end %>
    </div>

    <div class="form-actions">
      <%= f.submit nil, :class => 'btn btn-primary' %>
      <%= link_to 'Cancel', approvals_path, :class => 'btn' %>
    </div>

  </fieldset>
<% end %>

Форма выглядит так:

<form accept-charset="UTF-8" action="/approvals/approve/1394" class="edit_approval" id="other_version_form" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="_method" type="hidden" value="put" /><input name="authenticity_token" type="hidden" value="Q0848ftQQk8S2pWiSpkcozcRalk3qw8yZolZKQBx74s=" /></div>
  <fieldset>
    <p>
      <b>Comments:</b><br>
      <textarea cols="200" id="approval_comments" name="approval[comments]" rows="3"></textarea>
    </p>

    <div class="btn-group" data-toggle="buttons-radio">
      <button type="button" class="btn btn-info" name="approval[version]" id="approval_version" value="3.29.13">3.29.13</button>
      <button type="button" class="btn btn-info" name="approval[version]" id="approval_version" value="3.29.12">3.29.12</button>
      <button type="button" class="btn btn-info" name="approval[version]" id="approval_version" value="3.29.11">3.29.11</button>
      <button type="button" class="btn btn-info" name="approval[version]" id="approval_version" value="3.29.10">3.29.10</button>
      <button type="button" class="btn btn-info" name="approval[version]" id="approval_version" value="3.29.9">3.29.9</button>
    </div>
    <div class="form-actions">
      <input class="btn btn-primary" name="commit" type="submit" value="Update Approval" />
      <a href="/approvals" class="btn">Cancel</a>
    </div>
  </fieldset>
</form>

Но когда я отправляю форму и проверяю параметры из контроллера, я получаю только комментарии, и мне нужно, чтобы выбранное значение также передавалось:

{"utf8"=>"✓", "_method"=>"put", "authenticity_token"=>"Q0848ftQQk8S2pWiSpkcozcRalk3qw8yZolZKQBx74s=", "approval"=>{"comments"=>"here is the deal"}, "commit"=>"Update Approval", "controller"=>"approvals", "action"=>"approve", "id"=>"1394"}

Благодарю.

===Tried http://dan.doezema.com/2012/03/twitter-bootstrap-radio-button-form-inputs/ ===
===ALL GOOD====
<script type="text/javascript">
jQuery(function($) {
    $('div.btn-group[data-toggle-name=*]').each(function(){
        var group   = $(this);
        var form    = group.parents('form').eq(0);
        var name    = group.attr('data-toggle-name');
        var hidden  = $('input[name="' + name + '"]', form);
        $('button', group).each(function(){
            var button = $(this);
            button.live('click', function(){
                hidden.val($(this).val());
            });
            if(button.val() == hidden.val()) {
                button.addClass('active');
            }
        });
    });
});
</script>
    <div class="btn-group" data-toggle-name="version" data-toggle="buttons-radio" >
      <button type="button" value="<%= "#{@latest}" %>" class="btn btn-info" data-toggle="button"><%= "#{@latest}" %></button>
      <% @versions.each do |v| %>
          <button type="button" value="<%= "#{v}" %>" class="btn btn-info" data-toggle="button"><%= "#{v}" %></button>
      <% end %>
    </div>
    <input type="hidden" name="version" value="0" />

Answer 1

Попробуйте использовать <input type="radio"... вместо <button type="button"...

Answer 2

Мой ответ основан на /questions/44518828/ne-rabotayut-knopki-zagruzki-twitter/44518871#44518871

На ваш взгляд (я использую HAML, но при необходимости конвертирую в ERB)

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

В вашем представлении конкретного JavaScript, например, pages.js.coffee (опять же, я использую CoffeeScript, но при необходимости конвертирую в простой JS JQuery)

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

JS предназначен для того, чтобы кнопка выглядела "выбранной" при загрузке представления. Сначала он скрывает радиокнопки, а затем через цепочечный синтаксис JQuery добавляет класс активной загрузки Twitter к активной, теперь еще не выбранной радиокнопке. Псевдо-класс :checked позволяет найти нужную радиокнопку.

И для одиночной кнопки

вид (ХАМЛ)

.btn{data:{toggle: "buttons-radio"}}
  = f.check_box :public
  Public

JS (CoffeeScript)

activateRadioButton = ($element) ->
  hiddenField = $element.children('input[type=hidden]')
  toggleInputValue hiddenField

toggleInputValue = ($input) ->
  switch $input.val()
    when "0" then $input.val('1')
    when "1" then $input.val('0') 

$ ->
  $('.btn input[type=checkbox]')
    .hide()
    .filter(':checked').parent('.btn').addClass('active')

Rails использует скрытое поле для кнопки проверки (см. API RubyOnRails), поэтому нам нужно добавить обработчик onclick для изменения скрытого поля

NB Используйте f.submit вместо submit_tag, чтобы это работало