4

simple_form を使用してフォームをレンダリングし、次の動作を取得しようとしています: クライアントに 3 つのオプションから選択してもらいたい。すべてのオプションで、彼は追加のフィールドを 1 つまたは 2 つ指定します。
だから私はこのようなものが欲しい：

Please set your preferences:  
 o Pay me on a specific day - [input field to get the day]  
 o Pay me a specific amount of money - [input field for the amount]  
 o Pay me on a regular basis - [radio buttons to choose between weekly/monthly basis]

次のようにラジオ ボタンを作成できますが、その下にネストされたフィールドを追加できません。

<%= simple_form_for @client, action: 'edit_payment_method' do |f| %>
    <%= f.input :payment_type, label: 'Please set your preferences:',
        collection: [ ['Pay me on a specific day', :specific_day],
        ['Pay me a specific amount of money', :specific_money],
        ['Pay me on a regular basis', :regular_basis]
     ], as: :radio_buttons %>

  <%= f.button :submit, 'Submit' %>
<% end %>

ネストされたテキスト ボックスを作成する最良の方法は何ですか?
フィールドについては、(payment_type ごとに) 異なるコントローラーに送信する必要はありません。すべてのフィールドを 1 つのメソッドに送信し、選択した支払いの種類に応じて関連する値を読み取れば問題ありません。

ありがとう！ザック

4

2 に答える 2

5

simple_form collection_radio_buttonsはおそらくあなたが望むものです。オプション パラメータは、各ラジオ ボタンでレンダリングされる内容をカスタマイズできるブロックを受け入れます。ここで rdocs の例を見てください。

編集:

これは基本的に、比較的一般的な方法で行う必要があることです (テストされていませんが、私は似たようなことを実行しています)。追加のコントロールを各ラジオ ボタンのパーシャルに配置します。

<% radio_buttons = [
       { :text => 'Pay me on a specific day', :value => :specific_day, :partial => "<textbox_partial_name>", :locals => { :any_locals => :your_partial_needs} },
       { :text => 'Pay me a specific amount of money', :value => :specific_money, :partial => "<textbox_partial_name>", :locals => { :any_locals => :your_partial_needs} },
       { :text => 'Pay me on a regular basis', :value => :regular_basis, :partial => "<radio_partial_name>", :locals => { :any_locals => :your_partial_needs} }, 
  ] %>

<%= simple_form_for @client, action: 'edit_payment_method' do |f| %>
  <%= f.label t("account.update_payment_method.title") %>
  <%= f.collection_radio_buttons :payment_type, (collection.collect do |r| [r[:text], r[:value], r[:partial].nil? ? "" : r[:partial], r[:locals].nil? ? {} : r[:locals]] end), :second, :first do |builder| %>
    <%= builder.label{builder.radio_button(:class => 'payment_method_options') + builder.text} %>
    <% unless builder.object[2].blank? %>
      <%= render :partial => builder.object[2], :locals => builder.object[3] %>
    <% end %>
  <% end %>
  <%= f.button :submit, 'Submit' %>
<% end %>

:partial追加のコントロールを必要としないラジオ ボタンは省略でき:localsます。パーシャルで必要ない場合も省略できます。状況に合わせてこのコードを単純化する方法もありますが、この例では、必要に応じて各ラジオ ボタンにより複雑な制御構造を追加する方法を示しています。

于 2012-10-31T13:13:24.020 に答える
0

OK ..なんとかしてこれを解決できましたが、それが最善の選択肢かどうかはわかりませんが、投稿しているので、将来誰かがそれを必要とする場合、彼は少なくとも最初から何かを持っています。

simpleformを使用して「通常の」フォームを作成し、次にJQueryを使用して（定期的に作成された）内部入力フィールドをラジオボタンの横に移動しました。

RailsアプリにJQueryサポートを追加します。

  • gem "jquery-rails"Gemfileに追加する
  • bundle install
  • rails generate jquery:install

私が使用したフォーム（通常のシンプルフォーム）：

ラジオボタンにアタッチされているクラスと、入力フィールドにアタッチされているIDに注意してください。後で要素を移動するために使用します。

<%= simple_form_for @client, url: 'update_payment_data' do |f| %>
    <%= f.input :payment_type, label: t('account.update_payment_method.title'),
          input_html: { class: 'payment_method_options' },
          collection: [ [t('account.update_payment_method.sum_based.title'), :amount],
                        [t('account.update_payment_method.days_in_month_based.title'), :days_in_month],
                        [t('account.update_payment_method.optout.title'), :optput]
          ], as: :radio_buttons %>
    <%= f.input :payment_amount, label: "Payment amount threshold", 
          input_html: { id: 'payment_amount_box' } %>
    <%= f.input :payment_days_in_month, label: "Payment days in month", 
          input_html: { id: 'payment_days_in_month_box' } %>
    <%= f.button :submit, t('account.update_payment_method.update') %>
<% end %>

同じページで-JQueryコード：

<script>
    $(document).ready(function() {
        var amount_box = $("#payment_amount_box");
        var amount_box_parent = amount_box.parent();
        amount_box.detach().appendTo($(".payment_method_options:eq(0)").parent());
        amount_box_parent.remove();

        var dim_box = $("#payment_days_in_month_box");
        var dim_box_parent = dim_box.parent();
        dim_box.detach().appendTo($(".payment_method_options:eq(2)").parent());
        dim_box_parent.remove();

    });
</script>

それはかなり自明だと思います。それは（idによって）内部入力フィールドになるものを探し、各ラジオボタンspanを作成する下の適切な場所にそれらを移動するだけです。 私はcssで少し遊んで、（たとえば）自分が望むように見せなければなりませんでしたが、多かれ少なかれそれです。simpleform
display:block

お役に立てば幸いです。ザック

于 2012-10-30T09:34:18.923 に答える