Question

HIHO，

我目前正在编制一个班次刨床并遇到了我的复选框问题。

我有一个复选框来选择我想要显示的部门。它看起来像这样：

<%= form_tag("planers", method: :get) do %>

<%= select_tag "department", options_from_collection_for_select(@departments, "id", "name")%>

<%= submit_tag "go", name: nil, class: 'btn' %>

这完全没问题。但它创造了丑陋的URL。

e.g。本地主机：3000 /刨床UTF8 =✓＆安培;部门= 1

但我想将我的网址改为这样的网址。 localhost：3000/1，ID为1的部门。这很容易。

我将其更改为我的routes.rb

get ':department(/:week)' => 'planers#index', as: :week_planer

我为部门选择了1个参数，并且为该部分显示了一个可选的参数。

我调整了显示下周的按钮

<%= link_to "prev", week_planer_path(department: params['department'],week: @week+1) , class: 'btn btn-default' %>

这也完美无缺。最大的问题是：

如何调整我的form_tag以调用已选定字段作为参数的已定义路线？

我肯定想使用get，因为每个部门都应该直接链接到他们的轮班机。（我想如果这只能通过帖子完成，我可以定义与post相同的路由并获取并给它不同的路径名，所以localhost：3000/1仍然可以工作）

<%= form_tag week_planer_path([:department]), method: :get do %>
  <%= select_tag "department", options_from_collection_for_select(@departments, "id", "name")%>
  <%= submit_tag "go", name: nil, class: 'btn' %>
 <% end %>

但它产生了这样的东西：

http://localhost:3000/department?utf8=%E2%9C%93&department=1

我花了6h +来研究这个，但我无法想出一个解决方案。我希望有人知道一个解决方案，如果可能的话，没有js。

如果有人想看看我的回购，请转到：

https://github.com/Elux91/shift-planer

Answer 1

Javascript是您唯一的选择，因为您根据用户在下拉菜单中选择的内容动态更改表单操作。这是客户端DOM操作，因此无法在纯HTML中完成。

我认为最优雅的方法是将所需的路径放入select中每个选项的数据属性中。像这样：

<%= form_tag "", id: "department-form", method: :get do %>
  <%= select_tag "department", options_for_select(@departments.map {|department| [department.name, department.id, { 'data-url' => week_planer_path(department: department.id) }] })
  <%= submit_tag "go", name: nil, class: 'btn' %>
<% end %>

现在将表单的action属性设置为该data-url属性的值：

$("#department").change(function() {
  var form_url = $(this).find(':selected').data('url');
  $('#department-form').prop('action', form_url);
});

现在，当您提交表单时，您将最终到达正确的位置。（希望！）

要删除URL中的表单字段，请将表单设为POST，并设置路由定义以响应POST。

Answer 2

不幸的是，表单提交以这种方式工作。它调用action属性（在本例中为Rails put＆＃39; http://localhost:3000/department＆＃39;作为操作）并将所有输入字段值附加为查询参数。

你只能使用Javascript来做你想做的事情......

Answer 3

来自第一个答案，只有在表单更改后才能使用。但是您可以初始化表单加载时给出的方法，以便它与第一个选定的项目一起正常工作。

<%= form_tag "", id: "department-form", method: :get do %>
  <%= select_tag "department", options_for_select(@departments.map {|department| [department.name, department.id, { 'data-url' => week_planer_path(department: department.id) }] })
  <%= submit_tag "go", name: nil, class: 'btn' %>
<% end %>

$(document).ready(function() {
  var form_url = $('#department').find(':selected').data('url');
  $('#department-form').prop('action', form_url);
});

$("#department").change(function() {
  var form_url = $(this).find(':selected').data('url');
  $('#department-form').prop('action', form_url);
});

使用form_tag创建下拉菜单，并将所选字段传递给路径

3 个答案: