I have set up some horizontal tabs using twitter bootstrap and I am rendering a form inside each of
the tabs:
<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>
Then in shipdr/websites/form I have:
<%= 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 %>
I want to move
the submit button outside of
the "tab-content" area so when a user clicks
the submit button, all three forms area submitted. All forms will use that same model and
the same action but will have different
field.
The idea is similar to a wizard except I am using tabs.
Does anyone have any idea how I can move
the submit button outside of
the form_for loop and how I can submit
the three forms with a single button?
