1

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

4

2 回答 2

2

我不知道你是否可以一次提交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| %>
于 2012-06-21T22:41:22.613 回答
0

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

于 2012-06-21T22:30:55.380 回答