0

この一般的な構造を持つ単純なフォームを作成しようとしています:

o accept  o decline
[submit]

ラジオボタンの受け入れがチェックされ、送信が押されたときに、モデルの状態を変更したい（ここではオファーと呼ばれます）。しかし、ボタンの辞退がチェックされると、フォームは次のように変更する必要があります。

o accept  x decline
Please enter reason here: [text box]
[submit]

辞退する (必須の) 理由を入力して [送信] を押すと、モデル オファーの状態も変わりますが、異なる場合があります。

現在、フォームを希望どおりに表示するのに問題があります。私はSimpleFormを使用しており、次のようなことを試しました:

<%= simple_form_for @offer do |f| %>
  <%= f.input accepts, as: :radio_buttons %>
  <%= f.input :r_comment, as: :text, :label => 'Please enter reason here:' , :input_html => { :rows => 2, } %>
  <%= f.button :submit %>
<% end %>

オファーに対して定義された「受け入れ」メソッドまたは変数がないため、これはもちろん機能しません (そして、そうであってはなりません!)。入力テキスト ボックスを動的に表示することに関しては、私にはまったく手がかりがありません。

何かお役に立てることがあれば幸いです。

ロードライク

更新: simple_form によって生成された HTML

<div class="control-group radio_buttons optional">
  <label class="radio_buttons optional control-label">Accept?</label>
  <div class="controls">
    <label class="radio">
      <input class="radio_buttons optional" id="offer_accepts_decline" name="offer[accepts]" type="radio" value="Decline" />
      Decline
    </label>
    <label class="radio">
      <input class="radio_buttons optional" id="offer_accepts_accept" name="offer[accepts]" type="radio" value="Accept" />
      Accept
    </label>
  </div>

更新: コメント ボックス用に生成された HTML

<div class="control-group text optional">
    <label class="text optional control-label" for="offer_r_comment">Reason for rejection:</label>
    <div class="controls">
        <textarea class="text optional" cols="40" id="offer_r_comment" name="offer[r_comment]" rows="2">
        </textarea>
    </div>
</div>
4

1 に答える 1

0

私はformtasticまたはsimple_formのファンではありませんが、ドキュメントを見ると、次のことができるはずです

# offer.rb
attr_accessor :accepts

# view
<%= f.input :accepts, as: :radio_buttons, collection: ['Decline', 'Accept'] %>

# js which can be placed inline or in the assets. let's use coffee
# you should also limit the selector below to include the class or the id of the
# radio buttons.  I'm also not familiar with the html generated by simple form so
# the selectors to show and hide should also be changed.
$ ->
  $(':radio').change ->
    if $(this).prop('checked')
      if $(this).val() == 'Accept'
        $('#offer_r_comment').show()
      else
        $('#offer_r_comment').hide()

更新: コーヒー以外のバージョン。これを script タグ内に配置して、ビューをスローするだけです。

$(document).ready(function() {
  $(':radio').change(function() {
    if ($(this).prop('checked'))
      if ($(this).val() == 'Accept')
        $('#offer_r_comment').show();
      else
        $('#offer_r_comment').hide();
  });
});
于 2013-02-18T10:08:46.110 に答える