"AJAX / DIV Wizard "
Bootstrap 3.0.0 Snippet by Cyruxx

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">
<div class="col-md-4">
<div class="list-group wizard-menu">
<a href="#" class="list-group-item active step-1-menu" data-for=".step-1">
<h4 class="list-group-item-heading">1. Load from DIV</h4>
<p class="list-group-item-text">Load your data from a div.</p>
</a>
<a href="#" class="list-group-item step-2-menu" data-for=".step-2">
<h4 class="list-group-item-heading">2. Load from DIV</h4>
<p class="list-group-item-text">Load your data from a div.</p>
</a>
<a href="#" class="list-group-item step-3-menu" data-for=".step-3">
<h4 class="list-group-item-heading">3. AJAX Load</h4>
<p class="list-group-item-text">AJAX-load your data. (Attribute: data-load)</p>
</a>
</div>
</div>
<div class="col-md-8">
<!-- Load content in-->
<div class="well wizard-content">
</div>
<!-- Content to load-->
<div class="hide">
<div class="step-1">
<div class="row">
<div class="col-md-12">
<!-- add attribute data-action="" and data-method="" with path to file and form-method to submit form -->
<form method="post" action="#" data-action="index.php">
<div class="form-group">
<label for="inputEx1">E-Mail</label>
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
.container {
margin-top: 1%;
}
/*Wizard*/
.list-group-item.success,
.list-group-item.success:hover,
.list-group-item.success:focus {
background-color: #7aba7b;
border-color: #7aba7b;
color: #ffffff;
}
.list-group-item.success > h4 {
color: #ffffff;
}
.list-group-item.error,
.list-group-item.error:hover,
.list-group-item.error:focus {
background-color: #d59392;
border-color: #d59392;
color: #ffffff;
}
.list-group-item.error > h4 {
color: #ffffff;
}
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
/**
* Created by: Alexander Mahrt
* Date: 20.11.13
* Time: 03:00
*/
$(document).ready(function() {
loadDataOnReady();
loadDataOnClick();
changeSteps();
nextStep();
finishWizard(function() {
//ON FINISH EVENT
});
});
function finishWizard(onFinish) {
var wizardContent = $('.wizard-content');
var wizardButtons = $('.wizard-menu .list-group-item');
var currForm = $('.wizard-content form');
//Use document.body for dynamically loaded content listening
$(document.body).on('click', '.wizard-fin', function(event) {
var finButton = $(this);
event.preventDefault();
var currStep = parseInt($(this).attr('data-current-step'));
//Get previous elements
var nextStep = $('.step-' + (currStep + 1));
var nextMenu = $('.step-' + (currStep + 1) + '-menu');
var thisMenu = $('.step-' + currStep + '-menu');
var thisStep = $('.step-' + currStep);
//Update menu
wizardButtons.removeClass('active');
nextMenu.addClass('active');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

e

xhat007 (1) - 3 years ago - Reply 0


Nice Wizard - Having some issues with processing - When navigating the wizard, how do i make the form input values and selections maintain their state? Seems as if the Next/Previous buttons are clearing out the remainder of the form inputs....

Marc () - 10 years ago - Reply 0


e

xhat007 (1) - 3 years ago - Reply 0


Hi, thank you. For that you'll have to edit the functionality of the wizard. It currently saves the states of the steps ( the inside html ) and display them to you.
It's been a while since I've programmed this. I would do it different now. :-)

Alex () - 10 years ago - Reply 0


e

xhat007 (1) - 3 years ago - Reply 0


Alex () - 11 years ago - Reply 0


e

xhat007 (1) - 3 years ago - Reply 0