4

我正在使用 simple_form 呈现我的表单并尝试获得以下行为：我希望客户端从 3 个选项中进行选择。在每个选项中，他都会提供一两个额外的字段。
所以我想要这样的东西：

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），如果我将它们全部发送到一种方法并根据他选择的付款类型读取相关值就可以了。

谢谢！扎克

4

2 回答 2

5

simple_form collection_radio_buttons可能是您想要的。它的 options 参数接受一个块，该块允许您自定义每个单选按钮呈现的内容。在此处查看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

好的..我设法以某种方式解决了这个问题，不确定它是否是最好的选择，但我正在发布它，所以如果将来有人需要它，他至少有一些东西可以开始。

我使用 simpleform 创建了一个“常规”表单，然后使用 JQuery 将内部输入字段（定期创建）移动到单选按钮旁边。

将 JQuery 支持添加到您的 rails 应用程序：

  • 添加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 回答