Menu
How to have one form one several Twitter Bootstrap tabs?
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
<a href="#1" data-toggle="tab">Tab1</a>
</li>
<li>
<a href="#2" data-toggle="tab">Tab2</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="1">
<form id="personal-data" class="form-horizontal">
...
</div>
<div class="tab-pane" id="2">
<!-- form controls to be continued here -->
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
674
To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a . tab-pane class with a unique ID for every tab and wrap them inside a <div> element with class . tab-content .
The base .nav component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling. The base .nav component does not include any .active state.
Approach: To create a tabbed navigation menu, create a basic unordered list with list items as links. Then add classes nav and nav-tabs of bootstrap to unordered list and nav-items class to list items.
tab=x (where x=tab number) to the URL to display the specific tab. For example: https://demo.dj-extensions.com/dj-tabs/?tab=4 will open 4th tab on the demo site, you can try changing the number to another one to see how it works.
What's wrong of having one <form> that wraps everything up?
<form id="personal-data" class="form-horizontal" method="POST" action="#">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
<a href="#1" data-toggle="tab">Tab1</a>
</li>
<li>
<a href="#2" data-toggle="tab">Tab2</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="1">
...
</div>
<div class="tab-pane" id="2">
<!-- form controls to be continued here -->
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
</form>
are you submitting tab by tab or once on the last tab?
if one-by-one (for exemple, validation), simply use $.post to send data back and forward on-the-fly (in other words, make ajax calls).
131
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
