Question

我已经使用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循环之外移动提交按钮以及如何用一个按钮提交三个表单？

Answer 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| %>

Answer 2

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

在form_for循环外面提交按钮

2 个答案: