las validaciones del formulario y del proceso del Wizard es en la misma página, el Wizard jQuery no refresca la página al continuar con cada paso de la misma, el contenedor de cada
step
se oculta al continuar con cada proceso.
El error es que si refrescamos la página en el paso 2
o el paso 3
, automáticamente regresamos al inicio (paso 1
), lo ideal sería que se muestre en el proceso en el que se encuentra, que la única forma de retroceder es utilizando los botones atrás y continuar y a la vez ir alamacenando en una sesión
los datos del form
.
Mi codigo
Wizard jQuery
$(document).ready(function() {
var posY = 0;
$(".wizard.next").click(function () {
var step = $(this).parents(".step");
if (step.next().length) {
step.fadeOut("slow", function () {
step.next().fadeIn("slow");
/* posicionas la imagen 16 pixeles mas abajo de la posicion actual */
posY = posY - 16;
$(".backdrop").css("background-position",`0px ${posY}px`);
});
}
return false;
});
$(".wizard.prev").click(function () {
var step = $(this).parents(".step");
if (step.prev().length) {
step.fadeOut("slow", function () {
step.prev().fadeIn("slow");
/* posicionas la imagen 16 pixeles mas arriba de la posicio actual */
posY = posY + 16;
$(".backdrop").css("background-position",`0px ${posY}px`);
});
}
return false;
});
});
.backdrop {
position: absolute;
width: 630px;
height: 16px;
background: url(//drh.img.digitalriver.com/DRHM/Storefront/Site/avast/cm/images/avast/2014/breadcrumb-3.png) no-repeat;
list-style-type: none;
text-transform: uppercase;
}
.step {
padding-top: 30px;
display: none;
}
.step-1 {
display: block;
}
.setup {
width: 100%;
height: 100px;
padding: 50px 0px 0px 50px;
background-color: rgba(29, 36, 36, 0.25);
}
.process {
position: absolute;
top: -30px;
color: #e8e8e8;
font-size: 1.1em;
}
.process.item2 {
padding-left: 190px;
}
.process.item3 {
padding-left: 400px;
}
.process.item4 {
padding-left: 580px;
}
.process.item5 {
padding-left: 690px;
}
.process.item6 {
padding-left: 790px;
}
ul li {
margin: 0;
padding: 0;
border: none;
list-style: none;
list-style-type: none;
white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="setup">
<ul class="backdrop">
<li class="process item1">PASO 1</li>
<li class="process item2">PASO 2</li>
<li class="process item3">FINALIZAR</li>
</ul>
</div>
<div class="step step-1">
<div class="register relative MaZeroAuto">
<form action="#" method="post">
<input type="text" class="form-two" name="First Name" placeholder="Nombres">
<input type="text" class="form-two" name="Last Name" placeholder="Apellidos">
<input type="text" class="form-two" placeholder="dd-mm-yyyy">
<select class="form-select">
<option disabled selected="selected" value>Soy...</option>
<option value="">Hombre</option>
<option value="">Mujer</option>
<option value="">Otro</option>
<option value="">Prefiero no decirlo</option>
</select>
<input type="text" class="form-two" name="Phone Number" placeholder="Teléfono">
<select class="form-select">
<option value="">País</option>
<option value="">America</option>
<option value="">Bhutan</option>
<option value="">China</option>
<option value="">Europe</option>
<option value="">Other</option>
</select>
<input type="text" class="form-two" name="city" placeholder="City Name">
<input type="text" class="form-two" name="postal_code" min="4" max="10" placeholder="Código postal eg. 90210">
<input type="text" class="form-two" name="address" placeholder="123 Mockingjay Rd.">
<select class="form-select">
<option value="">Estado</option>
<option value="">America</option>
<option value="">Bhutan</option>
<option value="">China</option>
<option value="">Europe</option>
<option value="">Other</option>
</select>
<input type="email" class="form-two" name="email" placeholder="Email">
<input type="email" class="form-two" name="Confirm email" placeholder="Confirmar Email">
<input type="password" class="form-two" name="password" placeholder="Password">
<input type="password" class="form-two" name="Confirm Password" placeholder="Confirmar Password">
<ul class="terms">
<li>
<input class="checkbox-two" type="checkbox" id="brand1" value="">
<label for="brand1"><span></span>He leído y acepto los <a href="#">términos y condiciones y la política de privacidad.</a>
</label>
</li>
</ul>
<input class="btnAccess wizard next" type="submit" value="Continuar">
</form>
</div>
</div>
<div class="step step-2">
<div class="relative center MaZeroAuto">
<h2> Seleccione Un producto </h2>
<form method="post" action="">
<input name="radio" type="radio" id="1" value="1">
<label for="1" title="Producto 1" class="pay-1"><span style="margin-left: -2px;">Producto 1</span></label>
<input name="radio" type="radio" id="2" value="2">
<label for="2" title="Producto 2" class="pay-2"><span style="margin-left: 30px;">Producto 2</span></label>
<input name="radio" type="radio" id="3" value="3">
<label for="3" title="Producto 3" class="pay-3"><span style="margin-left: -16px;">Producto 3</span></label>
<div class="wrapper">
<input class="btnAccess wizard prev inline" type="submit" value="<atras">
<input class="btnAccess wizard next inline" type="submit" value="Continuar">
</div>
</form>
</div>
</div>
<div class="step step-3">
<?php include 'productoseleccionado.php'; ?>
<div class="wrapper">
<input class="btnAccess wizard prev inline" type="submit" value="<atras">
<input class="btnAccess wizard next inline" type="submit" value="Continuar">
</div>
</div>
¿Cómo guardar el paso actual del Wizard en una sesión - PHP?
- Me pueden explicar el proceso