I'm using bootstrap tabs to build a "Create New Consult" form, basic structure as follows:
<div class="tab-content">
<div class="tab-pane fade show active" id="step1">
<form method="post" action="/consults">
</form>
</div>
<div class="tab-pane fade" id="step2">
<form method="post" action="/consults">
</form>
</div>
...etc
</div>
My form has 5 tabbed sections and a form element inside each tab.
Now I want to use a single form element around the whole set of tabs (to submit all my form data to datastore at once). I tried this:
<div class="tab-content">
<form method="post" action="/consults">
<div class="tab-pane fade show active" id="step1">
</div>
<div class="tab-pane fade" id="step2">
</div>
...etc
</form>
</div>
I then found the tabs had issues (eg. rendering multiple tabs at once, etc).
I understand why this is happening but I am unsure of the correct way to implement a form across multiple tabs.
You can try this if your using bootstrap.
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a href="#home">Default</a></li>
<li><a href="#menu1">Menu 1</a></li>
<li><a href="#menu2">Menu 2</a></li>
<li><a href="#menu3">Menu 3</a></li>
</ul>
<form action="demo.php" method="post">
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>Default</h3>
<label>username</label><br/>
<input name="username" type="text" >
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<label>name</label><br/>
<input name="name" type="text" >
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<label>password</label><br/>
<input name="password" type="password" >
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<label>email</label><br/>
<input name="email" type="email" ><br/>
<input name="submit" type="submit" >
</div>
</div>
</form>
</div>
<script>
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
$('.nav-tabs a').on('shown.bs.tab', function(event){
var x = $(event.target).text();
var y = $(event.relatedTarget).text();
$(".act span").text(x);
$(".prev span").text(y);
});
});
</script>
You should be able to wrap all of the tabs in a form..
<form class="tab-content" method="post" id="myForm">
<div class="tab-pane active" id="step1">
<p>Here is the content for the first step...</p>
<input class="form-control" id="input1" name="input1" required="">
<button class="btn btn-default btn-ok" type="button">OK</button>
</div>
<div class="tab-pane" id="step2">
<p>Here is the content for step 2...</p>
<input class="form-control" id="input2" name="input2" required="">
<button class="btn btn-default btn-ok" type="button">OK</button>
</div>
<div class="tab-pane" id="step3">
<p>Here is the content for step 3...</p>
<input class="form-control" id="input3" name="input3" required="">
<input class="form-control" id="input4" name="input4" required="">
<button class="btn btn-default btn-ok" type="button">OK</button>
</div>
<div class="tab-pane" id="step4">
<p>This is the last step. You're done.</p>
<button class="btn btn-default btn-submit" type="submit">Submit</button>
</div>
</form>
Working Demo
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