simple_form - 如何创建带有嵌套输入文本框的单选按钮

Question

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

谢谢！扎克

Answer 1

simple_form collection_radio_buttons 可能是您想要的。它的 options 参数接受一个块，该块允许您自定义每个单选按钮呈现的内容。看看 rdocs here 中的示例。

已编辑：

这基本上是您需要以相对通用的方式执行的操作（尚未经过测试，但我正在运行类似的操作）。将您的附加控件放在每个单选按钮的部分中：

<% 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。还有一些方法可以根据您的情况简化此代码，但此示例说明了如何在需要时向每个单选按钮添加更复杂的控制结构。

Answer 2

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

我使用 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）并将它们移动到 simpleform 为每个单选按钮创建的 span 下的适当位置。
我不得不对 css 进行一些操作以使其看起来像我想要的那样（例如display:block），但这或多或少是这样。

希望对你有帮助.. 扎克