单页面中使用多个Ransack搜索表单的参数传递问题

在同一页面使用多个search_form_for实现Ransack搜索时，提交单个表单只会传递当前表单的参数，无法同时携带另一个表单的参数。

期望提交后能获取的参数：

Parameters: {"q"=>{"search_cont"=>"qwerty", "by_discarded"=>"discarded"}, "f"=>{"search_cont"=>"asdfgh", "by_discarded"=>"active"}}

实际仅能获取当前提交表单的参数：

Parameters: {"q"=>{"search_cont"=>"qwerty", "by_discarded"=>"discarded"}}

或

Parameters: {"f"=>{"search_cont"=>"asdfgh", "by_discarded"=>"active"}}

相关视图代码 #

<%= search_form_for @q, url: url, as: :q do |f| %>
      <%= f.search_field :search_cont, value: params.dig(:q, :search_cont), placeholder: 'Search' %>
      <%= f.select(:by_discarded, [['Active', 'active'], ['Discarded', 'discarded']], { selected: params.dig(:q, :by_discarded) }, { onchange: 'this.form.submit();' }) %>
<% end %>
...
<%= search_form_for @f, url: url, as: :f do |f| %>
      <%= f.search_field :search_cont, value: params.dig(:f, :search_cont), placeholder: 'Search' %>
      <%= f.select(:by_discarded, [['Active', 'active'], ['Discarded', 'discarded']], { selected: params.dig(:f, :by_discarded) }, { onchange: 'this.form.submit();' }) %>
<% end %>

相关控制器代码 #

@q = some_items.ransack(params[:q])
@q.sorts = 'sort_order asc' if @q.sorts.empty?
@pagy_q, @objects_q = pagy(@q.result, page_param: :page_q)

@f = another_items.ransack(params[:f], search_key: :f)
@f.sorts = 'sort_order asc' if @f.sorts.empty?
@pagy_f, @objects_f = pagy(@f.result, page_param: :page_f)

方法一：添加隐藏字段传递另一表单的参数 #

在每个表单中，将另一个表单的当前参数以隐藏字段的形式嵌入，提交时即可携带所有参数。

修改后的视图代码：

<%= search_form_for @q, url: url, as: :q do |f| %>
      <%= f.search_field :search_cont, value: params.dig(:q, :search_cont), placeholder: 'Search' %>
      <%= f.select(:by_discarded, [['Active', 'active'], ['Discarded', 'discarded']], { selected: params.dig(:q, :by_discarded) }, { onchange: 'this.form.submit();' }) %>
      <!-- 嵌入f表单的参数作为隐藏字段 -->
      <% if params[:f].present? %>
        <% params[:f].each do |key, value| %>
          <%= hidden_field_tag "f[#{key}]", value %>
        <% end %>
      <% end %>
<% end %>
...
<%= search_form_for @f, url: url, as: :f do |f| %>
      <%= f.search_field :search_cont, value: params.dig(:f, :search_cont), placeholder: 'Search' %>
      <%= f.select(:by_discarded, [['Active', 'active'], ['Discarded', 'discarded']], { selected: params.dig(:f, :by_discarded) }, { onchange: 'this.form.submit();' }) %>
      <!-- 嵌入q表单的参数作为隐藏字段 -->
      <% if params[:q].present? %>
        <% params[:q].each do |key, value| %>
          <%= hidden_field_tag "q[#{key}]", value %>
        <% end %>
      <% end %>
<% end %>

这种方式无需额外JS，兼容性好，适合大多数场景。

方法二：用JavaScript拦截提交事件合并参数 #

监听表单提交事件，将另一表单的参数合并到当前提交的数据中。

添加JS代码（可放在视图底部或单独JS文件）：

document.addEventListener('DOMContentLoaded', function() {
  // 获取两个表单
  const formQ = document.querySelector('form[action="<%= url %>"][name="q"]');
  const formF = document.querySelector('form[action="<%= url %>"][name="f"]');

  // 处理q表单提交
  if (formQ) {
    formQ.addEventListener('submit', function(e) {
      e.preventDefault();
      // 获取f表单参数
      const fFormData = new FormData(formF);
      // 合并到当前表单数据
      const qFormData = new FormData(this);
      fFormData.forEach((value, key) => qFormData.append(key, value));
      // 提交合并后的数据
      fetch(this.action, {
        method: this.method,
        body: qFormData,
        headers: {
          'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
        }
      }).then(response => window.location.href = response.url);
    });
  }

  // 处理f表单提交
  if (formF) {
    formF.addEventListener('submit', function(e) {
      e.preventDefault();
      // 获取q表单参数
      const qFormData = new FormData(formQ);
      // 合并到当前表单数据
      const fFormData = new FormData(this);
      qFormData.forEach((value, key) => fFormData.append(key, value));
      // 提交合并后的数据
      fetch(this.action, {
        method: this.method,
        body: fFormData,
        headers: {
          'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
        }
      }).then(response => window.location.href = response.url);
    });
  }
});

注意：若使用Rails 7+ Turbo环境，需调整事件监听逻辑，避免与Turbo默认提交行为冲突。

方法三：统一单个表单（可选） #

若业务允许，可将两个搜索模块合并到一个表单中，用q[xxx]和f[xxx]区分参数，手动构建表单字段替代两个search_form_for。此方式适合参数结构简单的场景。

内容的提问来源于stack exchange，提问作者infernal