"Multi Step Form New - Working"
Bootstrap 3.0.0 Snippet by VishwanathKD

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row form-group">
<div class="col-xs-12">
<ul class="nav nav-pills nav-justified thumbnail setup-panel">
<li class="active"><a href="#step-1">
<h4 class="list-group-item-heading">Step 1</h4>
<p class="list-group-item-text">First step description</p>
</a></li>
<li class="disabled"><a href="#step-2">
<h4 class="list-group-item-heading">Step 2</h4>
<p class="list-group-item-text">Second step description</p>
</a></li>
<li class="disabled"><a href="#step-3">
<h4 class="list-group-item-heading">Step 3</h4>
<p class="list-group-item-text">Third step description</p>
</a></li>
<li class="disabled"><a href="#step-4">
<h4 class="list-group-item-heading">Step 4</h4>
<p class="list-group-item-text">Second step description</p>
</a></li>
</ul>
</div>
</div>
</div>
<form class="container">
<div class="row setup-content" id="step-1">
<div class="col-xs-12">
<div class="col-md-12 well text-center">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
body{ margin-top:20px; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// Activate Next Step
$(document).ready(function() {
var navListItems = $('ul.setup-panel li a'),
allWells = $('.setup-content');
allWells.hide();
navListItems.click(function(e)
{
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this).closest('li');
if (!$item.hasClass('disabled')) {
navListItems.closest('li').removeClass('active');
$item.addClass('active');
allWells.hide();
$target.show();
}
});
$('ul.setup-panel li.active a').trigger('click');
// DEMO ONLY //
$('#activate-step-2').on('click', function(e) {
$('ul.setup-panel li:eq(1)').removeClass('disabled');
$('ul.setup-panel li a[href="#step-2"]').trigger('click');
$(this).remove();
})
$('#activate-step-3').on('click', function(e) {
$('ul.setup-panel li:eq(2)').removeClass('disabled');
$('ul.setup-panel li a[href="#step-3"]').trigger('click');
$(this).remove();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

how to submit data in database in php because multiple form tag is used

aks university () - 7 years ago - Reply 0


Hi. Thanks. I have implemented this successfully. I had to make a change in the <select> for it to work. in the HTML, I had to remove the "name=xxx" from each of the the <option> list and then in the JS I had to change the name='Male"+i+ "'name='Female"+i+"' and name='3rdgen"+i+"' to name='gender"+i+". Then it sends the correct information to my php file'.

The only other thing I would like to do but can't work out is for the page to jump to a missing required field. Currently it just highlights it, but in other forms I have, the page jumps to the first input where the validation is missing.

One more tip - if you want a text field NOT to be validated (such as, in my case, Middle Name), change the type="text" to type="tel" as it seems to want to validate all text inputs

Joel Malach () - 7 years ago - Reply 0


if we need to validate form, if field is empty show msg please enter the text and not jump to another step.

Dilip paswan () - 7 years ago - Reply 0


Hello. What if i want not to remove buttons after click on Activate next step?
I tried remove $(this).remove(); , but after that the form crashed.
Do you have any solution? Thank you

Lukáš Staroň () - 8 years ago - Reply 0


Ok, i know the answer. For each button should be defined type="button", then you can remove all $(this).remove();.
It's based on default behavior of HTML5 buttons :)

Lukáš Staroň () - 8 years ago - Reply 0