如何使用 1 个提交按钮提交 3 个表单？答案

【问题标题】：How do I submit 3 forms with 1 submit button?如何使用 1 个提交按钮提交 3 个表单？
【发布时间】：2018-06-16 08:47:10
【问题描述】：

我有一个有 X 行的表。我使用迭代器迭代集合中的每个对象并连续渲染它。

每个对象/行也与它自己的表单相关联。

但我想一次保存整个集合，并在用户点击 1 个提交按钮时更新所有子表单，而不是每个表单实例 1 个。

这是代码的示例：

<% @port_stocks.each do |port_stock| %>
          <tr>
            <td><%= number_to_currency(port_stock.purchase_price) %></td>
            <td><%= port_stock.volume %></td>
            <td>
              <% cp = ClosedPosition.new %>
              <%= simple_form_for cp, url: port_stocks_sell_order_path, method: :post, html: { class: "form-inline" } do |f| %>
                <div class="form-group">
                  <%= f.input_field :num_units, id: "sell-ps-#{port_stock.id}", class: "form-control mx-sm-3" %>
                </div>
                <%= f.submit "Save", class: "btn btn-primary" %>
              <% end %>
            </td>
          </tr>
<% end %>

如果@port_stocks 集合中有3 个port_stock 对象，则上面的表单会呈现3 个提交按钮——这正是我不想要的。

我只想要 1 个提交按钮，为集合中的每个 port_stock 对象提交一个 cp 相关信息。

【问题讨论】：

您是否可以考虑用 form_tag（或简单表单）包装整个表格并构建自定义字段名称，然后在控制器中管理自定义保存过程？我的意思是参数可能类似于"closed_position"=>{"port_stock_id"=>{"1"=>{"num_units"=>"999"}, "2"=>{"num_units"=>"888"}}}。这样一键提交即可。

标签： ruby-on-rails ruby-on-rails-5 simple-form

【解决方案1】：

您可以在 simple_form 中隐藏提交按钮，如下所示：

<% @port_stocks.each do |port_stock| %>
  <tr>
    <td><%= number_to_currency(port_stock.purchase_price) %></td>
    <td><%= port_stock.volume %></td>
    <td>
      <% cp = ClosedPosition.new %>
      <%= simple_form_for cp, url: port_stocks_sell_order_path, method: :post, html: {class: "form-inline"} do |f| %>
        <div class="form-group">
          <%= f.input_field :num_units, id: "sell-ps-#{port_stock.id}", class: "form-control mx-sm-3" %>
        </div>
        <%= f.submit "", class: "click-me", style: "display: none;" %>
      <% end %>
    </td>
  </tr>
<% end %>

然后在循环外有一个按钮，如下所示：

<button type="button" class='btn btn-primary' onclick="submit()">Submit!</button>

该按钮的Onclick使用JS触发隐藏提交按钮的点击。

<script>
    function submit(){
      var el = document.getElementsByClassName('click-me');
      for (var i=0;i<el.length; i++) {
        el[i].click();
      }
    }
</script>

【讨论】：

有趣的想法。不过，理想情况下，我希望有一个非 JS 解决方案。但我确实喜欢这个作为备份，以防我买不到。谢谢！
我很高兴看到您最终会得到什么样的解决方案。您正在寻找的解决方案是客户端，只有 JS 可以在客户端运行。

【解决方案2】：

只是一个想法，使用标准表单助手跟进我的评论。用表格包裹表格：

<%= form_for :closed_position, url: {action: :port_stocks_sell_order_path, method: :post} do |form|%>
  <table>
      <% @port_stocks.each do |port_stock| %>
        <tbody>
            <tr>
              <td><%= port_stock.volume %></td>
              <td><%= port_stock.purchase_price %></td>
              <td>
                  Num: <%= form.text_field "port_stock_id[#{port_stock.id}][num_units]" %>
              </td>
            </tr>
        </tbody>
      <% end %>
  </table>
  <%= form.submit "save" %>
<% end %>

参数应该是这样的：

{"utf8"=>"✓", "authenticity_token"=>"blahblah", "closed_position"=>{"port_stock_id"=>{"1"=>{"num_units"=>"999"}, "2"=>{"num_units"=>"888"}}}, "commit"=>"save", "method"=>"post", "controller"=>"port_stocks", "action"=>"port_stocks_sell_order_path"}

然后设法将每个ClosedPosition 保存在控制器中。

【讨论】：