在 form_for 循环外提交按钮答案

【问题标题】：Submit button outside form_for loop在 form_for 循环外提交按钮
【发布时间】：2012-06-21 22:01:44
【问题描述】：

我已经使用 twitter bootstrap 设置了一些水平选项卡，并且我在每个选项卡中呈现了一个表单：

<div class="tab-content">
  <div id="tab1" class="tab-pane active">
      <%= render :partial => "shipdr/websites/form", locals: {:@shipdr_website => shipdr_website} %>
  </div>
  <div id="tab2" class="tab-pane">
    Another form (not yet implemented)
  </div>
  <div id="tab3" class="tab-pane">
    Another form (not yet implemented).
  </div>
</div>

然后在 shipdr/websites/form 我有：

<%= simple_form_for(@shipdr_website) do |f| %>
  <% if @shipdr_website.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@shipdr_website.errors.count, "error") %> prohibited this shipdr_website from being saved:</h2>

      <ul>
      <% @shipdr_website.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.input :name %>
  </div>
  <div class="field">
    <%= f.input :url %>
  </div>
  <div class="field">
    <%= f.input :api_key %>
  </div>
  <div class="actions">
    <%= f.submit nil, :class => "btn btn-primary" %>
  </div>
<% end %>

我想将提交按钮移到“选项卡内容”区域之外，因此当用户单击提交按钮时，所有三个表单区域都已提交。所有表单都将使用相同的模型和相同的操作，但具有不同的字段。这个想法类似于向导，只是我使用的是选项卡。

有谁知道如何将提交按钮移到 form_for 循环之外，以及如何使用一个按钮提交三个表单？

【问题讨论】：

标签： ruby-on-rails forms tabs twitter-bootstrap form-for

【解决方案1】：

我不知道您是否可以一次提交 3 个表单。但你可以这样做：

<div class="tab-content">
  <%= simple_form_for(@shipdr_website) do |f| %>
    <div id="tab1" class="tab-pane active">
      <%= render :partial => "shipdr/websites/form", locals => {:f => f, :shipdr_website => @shipdr_website} %>
    </div>
    <div id="tab2" class="tab-pane">
      Another form (not yet implemented)
    </div>
    <div id="tab3" class="tab-pane">
      Another form (not yet implemented).
    </div>
  <% end %>
</div>

然后从您的部分中删除它，只留下输入。

<%= simple_form_for(@shipdr_website) do |f| %>

【讨论】：

太好了，谢谢。当我将表单移出部分时，它似乎正在工作。但是，当我按照您的描述调用部分时，我收到“f”的未定义变量错误。你知道这是为什么吗？
我编辑了答案。渲染中的一些格式错误的代码：partial.
我也在使用一个类似的系统，它的大表单分布在多个选项卡上。然而，一种“大”形式有一些缺点。在某些选项卡中，您可能希望能够插入一些与表单无关的内容，或者为另一个 POST 路径插入一些 button_to。通过数据属性生成模态和传输数据是一种解决方法。

【解决方案2】：

我认为最好的方法是使用 Javascript：您可以移动按钮并通过 Ajax 一次发送 3 个表单。如果你使用 Jquery，你可以使用http://jquery.malsup.com/form

【讨论】：