<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="stepwizard">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
<a href="#step-1" type="button" class="btn btn-primary btn-circle">1</a>
<p>Datos postulante</p>
</div>
<div class="stepwizard-step">
<a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a>
<p>Datos Curso</p>
</div>
<div class="stepwizard-step">
<a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a>
<p>Confirmación</p>
</div>
</div>
</div>
<form role="form">
<div class="row setup-content" id="step-1">
<div class="col-xs-12">
<div class="col-md-12">
<h3>Datos postulante</h3>
<div class="form-group">
<label class="control-label col-md-12">Rut</label>
<input type="Text" id="rut_postulante" class="form-control input-sm floatlabel" placeholder="<?php echo $resultado['rut']; ?>" readonly/>
</div>
<div class="form-group">
<label class="control-label col-md-12">Nombre</label>
<input type="Text" id="nombre_postulante" class="form-control input-sm floatlabel" placeholder="<?php echo $resultado['nombre_postulante']; ?>" readonly/>
</div>
<div class="form-group col-md-6">
<label class="control-label">Apellido Paterno</label>
<input type="Text" class="form-control input-sm floatlabel" placeholder="<?php echo $resultado['apellidoP']; ?>" readonly/>
</div>
<div class="form-group col-md-6">
<label class="control-label">Apellido Materno</label>
<input type="Text" class="form-control input-sm floatlabel" placeholder="<?php echo $resultado['apellidoM']; ?>" readonly/>
</div>
<div class="col-xs-6 col-sm-4">
<label class="control-label">Sexo</label>
<a class="btn btn-primary btn-select">
<input type="hidden" class="btn-select-input" id="lstSexo" name="sexo" />
<span class="btn-select-value">Select an Item</span>
<span class='btn-select-arrow glyphicon glyphicon-chevron-down'></span>
<ul>
<li>Femenino</li>
<li class="selected">Masculino</li>
</ul>
</a>
</div>
<div class="form-group col-md-4">
<label class="control-label">Teléfono</label>
<input type="Text" class="form-control input-sm floatlabel" placeholder="Numero de Teléfono" readonly/>
</div>
<div class="form-group registration-date col-md-4">
<label class="control-label" for="registration-date">Fecha de Nacimiento</label>
<div class="input-group registration-date-time" required="required">
<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span></span>
<input class="form-control" name="registration_date" id="registration-date" type="date">
</div>
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Siguiente</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-2">
<div class="col-xs-12">
<div class="col-md-12">
<h3>Datos Curso</h3>
<div class="form-group">
<label class="control-label">Curso</label>
<select class="selectpicker form-control">
<option value="">Seleccione Curso</option>
<?php
while($row = mysql_fetch_array($listarCurso))
{
?>
<option value="<?php echo $row['idCurso']; ?>">
<?php echo $row['nombre_curso'];?>
</option>
<?php
}
?>
</select>
</div>
<div class="form-group">
<label class="control-label">Modalidad Curso</label>
<select class="selectpicker form-control">
<option value="">Seleccione Modalidad</option>
<?php
while($row = mysql_fetch_array($listarModalidad))
{
?>
<option value="<?php echo $row['idmodalidad']; ?>">
<?php echo $row['jornada'];?>
</option>
<?php
}
?>
</select>
</div>
<div class="form-group">
<label for="validate-email">E-mail</label>
<div class="input-group" data-validate="email">
<input type="text" class="form-control" name="validate-email" id="validate-email" placeholder="Validate Email" required>
<span class="input-group-addon danger"><span class="glyphicon glyphicon-remove"></span></span>
</div>
</div>
<button class="btn btn-default prevBtn btn-lg pull-left" type="button" >Anterior</button>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Siguiente</button>
</div>
</div>
</div>
</form>
</div
body{
/* Safari 4-5, Chrome 1-9
background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727));
/* Safari 5.1+, Chrome 10+
background: -webkit-radial-gradient(circle, #1a82f7, #2F2727);
/* Firefox 3.6+
background: -moz-radial-gradient(circle, #1a82f7, #2F2727);
/* IE 10
background: -ms-radial-gradient(circle, #1a82f7, #2F2727);*/
height:600px;
margin-top:40px;
}
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
display: table;
width: 100%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
}
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
.btn-select {
position: relative;
padding: 0;
min-width: 236px;
width: 100%;
border-radius: 0;
margin-bottom: 20px;
}
.btn-select .btn-select-value {
padding: 6px 12px;
display: block;
position: absolute;
left: 0;
right: 34px;
text-align: left;
text-overflow: ellipsis;
overflow: hidden;
border-top: none !important;
border-bottom: none !important;
border-left: none !important;
}
.btn-select .btn-select-arrow {
float: right;
line-height: 20px;
padding: 6px 10px;
top: 0;
}
.btn-select ul {
display: none;
background-color: white;
color: black;
clear: both;
list-style: none;
padding: 0;
margin: 0;
border-top: none !important;
position: absolute;
left: -1px;
right: -1px;
top: 33px;
z-index: 999;
}
.btn-select ul li {
padding: 3px 6px;
text-align: left;
}
.btn-select ul li:hover {
background-color: #f4f4f4;
}
.btn-select ul li.selected {
color: white;
}
/* Default Start */
.btn-select.btn-default:hover, .btn-select.btn-default:active, .btn-select.btn-default.active {
border-color: #ccc;
}
.btn-select.btn-default ul li.selected {
background-color: #ccc;
}
.btn-select.btn-default ul, .btn-select.btn-default .btn-select-value {
background-color: white;
border: #ccc 1px solid;
}
.btn-select.btn-default:hover, .btn-select.btn-default.active {
background-color: #e6e6e6;
}
/* Default End */
/* Primary Start */
.btn-select.btn-primary:hover, .btn-select.btn-primary:active, .btn-select.btn-primary.active {
border-color: #286090;
}
.btn-select.btn-primary ul li.selected {
background-color: #2e6da4;
color: white;
}
.btn-select.btn-primary ul {
border: #2e6da4 1px solid;
}
.btn-select.btn-primary .btn-select-value {
background-color: #428bca;
border: #2e6da4 1px solid;
}
.btn-select.btn-primary:hover, .btn-select.btn-primary.active {
background-color: #286090;
}
/* Primary End */
/* Success Start */
.btn-select.btn-success:hover, .btn-select.btn-success:active, .btn-select.btn-success.active {
border-color: #4cae4c;
}
.btn-select.btn-success ul li.selected {
background-color: #4cae4c;
color: white;
}
.btn-select.btn-success ul {
border: #4cae4c 1px solid;
}
.btn-select.btn-success .btn-select-value {
background-color: #5cb85c;
border: #4cae4c 1px solid;
}
.btn-select.btn-success:hover, .btn-select.btn-success.active {
background-color: #449d44;
}
/* Success End */
/* info Start */
.btn-select.btn-info:hover, .btn-select.btn-info:active, .btn-select.btn-info.active {
border-color: #46b8da;
}
.btn-select.btn-info ul li.selected {
background-color: #46b8da;
color: white;
}
.btn-select.btn-info ul {
border: #46b8da 1px solid;
}
.btn-select.btn-info .btn-select-value {
background-color: #5bc0de;
border: #46b8da 1px solid;
}
.btn-select.btn-info:hover, .btn-select.btn-info.active {
background-color: #269abc;
}
/* info End */
/* warning Start */
.btn-select.btn-warning:hover, .btn-select.btn-warning:active, .btn-select.btn-warning.active {
border-color: #eea236;
}
.btn-select.btn-warning ul li.selected {
background-color: #eea236;
color: white;
}
.btn-select.btn-warning ul {
border: #eea236 1px solid;
}
.btn-select.btn-warning .btn-select-value {
background-color: #f0ad4e;
border: #eea236 1px solid;
}
.btn-select.btn-warning:hover, .btn-select.btn-warning.active {
background-color: #d58512;
}
/* warning End */
/* danger Start */
.btn-select.btn-danger:hover, .btn-select.btn-danger:active, .btn-select.btn-danger.active {
border-color: #d43f3a;
}
@import url("http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.css")
.btn-select.btn-danger ul li.selected {
background-color: #d43f3a;
color: white;
}
.btn-select.btn-danger ul {
border: #d43f3a 1px solid;
}
.btn-select.btn-danger .btn-select-value {
background-color: #d9534f;
border: #d43f3a 1px solid;
}
.btn-select.btn-danger:hover, .btn-select.btn-danger.active {
background-color: #c9302c;
}
/* danger End */
.btn-select.btn-select-light .btn-select-value {
background-color: white;
color: black;
}
.input-group-addon.primary {
color: rgb(255, 255, 255);
background-color: rgb(50, 118, 177);
border-color: rgb(40, 94, 142);
}
.input-group-addon.success {
color: rgb(255, 255, 255);
background-color: rgb(92, 184, 92);
border-color: rgb(76, 174, 76);
}
.input-group-addon.info {
color: rgb(255, 255, 255);
background-color: rgb(57, 179, 215);
border-color: rgb(38, 154, 188);
}
.input-group-addon.warning {
color: rgb(255, 255, 255);
background-color: rgb(240, 173, 78);
border-color: rgb(238, 162, 54);
}
.input-group-addon.danger {
color: rgb(255, 255, 255);
background-color: rgb(217, 83, 79);
border-color: rgb(212, 63, 58);
}
$(document).ready(function () {
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn'),
allPrevBtn = $('.prevBtn');
allWells.hide();
navListItems.click(function (e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-primary').addClass('btn-default');
$item.addClass('btn-primary');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
}
});
allNextBtn.click(function(){
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for(var i=0; i<curInputs.length; i++){
if (!curInputs[i].validity.valid){
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid)
nextStepWizard.removeAttr('disabled').trigger('click');
});
allPrevBtn.click(function(){
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
prevStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().prev().children("a");
$(".form-group").removeClass("has-error");
prevStepWizard.removeAttr('disabled').trigger('click');
});
$('div.setup-panel div a.btn-primary').trigger('click');
});
$(document).ready(function () {
$(".btn-select").each(function (e) {
var value = $(this).find("ul li.selected").html();
if (value != undefined) {
$(this).find(".btn-select-input").val(value);
$(this).find(".btn-select-value").html(value);
}
});
});
$(document).on('click', '.btn-select', function (e) {
e.preventDefault();
var ul = $(this).find("ul");
if ($(this).hasClass("active")) {
if (ul.find("li").is(e.target)) {
var target = $(e.target);
target.addClass("selected").siblings().removeClass("selected");
var value = target.html();
$(this).find(".btn-select-input").val(value);
$(this).find(".btn-select-value").html(value);
}
ul.hide();
$(this).removeClass("active");
}
else {
$('.btn-select').not(this).each(function () {
$(this).removeClass("active").find("ul").hide();
});
ul.slideDown(300);
$(this).addClass("active");
}
});
$(document).on('click', function (e) {
var target = $(e.target).closest(".btn-select");
if (!target.length) {
$(".btn-select").removeClass("active").find("ul").hide();
}
});
$(document).ready(function() {
$('.input-group input[required]').on('keyup change', function() {
var $form = $(this).closest('form'),
$group = $(this).closest('.input-group'),
$addon = $group.find('.input-group-addon'),
$icon = $addon.find('span'),
state = false;
if (!$group.data('validate')) {
state = $(this).val() ? true : false;
}else if ($group.data('validate') == "email") {
state = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test($(this).val())
}
if (state) {
$addon.removeClass('danger');
$addon.addClass('success');
$icon.attr('class', 'glyphicon glyphicon-ok');
}else{
$addon.removeClass('success');
$addon.addClass('danger');
$icon.attr('class', 'glyphicon glyphicon-remove');
}
if ($form.find('.input-group-addon.danger').length == 0) {
$form.find('[type="submit"]').prop('disabled', false);
}else{
$form.find('[type="submit"]').prop('disabled', true);
}
});
$('.input-group input[required], .input-group textarea[required], .input-group select[required]').trigger('change');
});
