AJAX / DIV Wizard
<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>
<input id="inputEx1" type="text" class="form-control" placeholder="E-Mail" required>
</div>
<hr>
<div class="pull-right wizard-nav">
<button type="submit" class="btn btn-primary wizard-next" data-current-step="1">Next step</button>
</div>
</form>
</div>
</div>
</div>
<div class="step-2">
<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="path/to/action.php" data-method="POST">
<div class="form-group">
<label for="inputEx1">Username</label>
<input id="inputEx1" type="text" class="form-control" placeholder="E-Mail" required>
</div>
<div class="form-group">
<label for="inputEx2">Password</label>
<input id="inputEx2" type="password" class="form-control" placeholder="Password" required>
</div>
<hr>
<div class="pull-right wizard-nav">
<!-- data-current-step is for going back and forward in wizard -->
<a class="btn btn-default wizard-prev" data-current-step="2">Previous step</a>
<button type="submit" class="btn btn-success wizard-fin" data-current-step="2">Finish</button>
</div>
</form>
</div>
</div>
</div>
<div class="step-3" data-load="#"></div>
</div>
</div>
</div>
</div>
.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;
}
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….,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. :-),Github: http://cyruxx.github.io/Boo…,The author is Cyruxx
Loading...
