5

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
1
  • 1
    En el php, si haces un print_r($_POST) para el paso 2, que parametros te muestra?
    – Juan
    Commented el 28 ago. 2017 a las 22:48

1 respuesta 1

1
+50

Supongamos que tenemos 3 pasos.

  • Utilizaremos las sesiones para guardar los datos de cada paso.
  • Definiremos una variable de sesión para guardar en que paso nos encontramos.
  • Definimos una variable de sesión para almacenar los datos del form.
  • Solo tendremos un formulario.
  • Cada vez que cambiemos de paso guadaremos los datos del form y el paso en sesión con una peticion ajax.
  • Si se actualiza los datos se recuperan desde la sesión.

He simplificado el form para hacerlo lo más entendible posible, he comentado el código de forma que se pueda entender el motivo de cada línea

formulario.php

<?php
// Iniciamos la sessión
session_start();

// comprobamos si existe paso previo
if ( !empty($_SESSION['datos_form']['__paso__']) ) {
    $paso = $_SESSION['datos_form']['__paso__'];
}
// si no hay paso previo establecemos el paso 1
else{
    $paso = '1';
}

?><!DOCTYPE html>
<html>
<head>
    <title>Form por pasos</title>
<style type="text/css">
/* establecemos todos los paso a none, para que esten ocultos al inicio */
.step{
    display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    // definimos el paso que se va a mostrar al cargar la pagina
    // la variable $paso la definimos y recuperamos mas arriba en el PHP
    mostrar_paso(<?= $paso; ?>);        
});

// funcion para guardar los datos del form y cambiar el paso
function mostrar_paso(paso)
{
    // recuperamos los datos del form con id=form
    var data = $( "#form" ).serialize();
    // definimos la url donde almacenaremos en sesion los datos
    // le concatenamos en GET el paso que se debe mostrar
    var url = 'saveTemp.php?paso=' + paso;
    // recuperamos el lavel del radio button seleccionado
    var valor_radio = $('input:radio[name=radio]:checked').next("label").text();

    // realizamos la peticion ajax
    $.ajax({
      type: "POST",
      url: url,
      data: data
    })
    .done(function( resp ) {
        // si todo va bien
        // ocultamos todos los pasos
        $('.step').css( "display", "none" );
        // mostramos el paso correspondiente
        $('#paso'+paso).css( "display", "block" );
        // mostramos el radio button seleccionado
        $('#div_producto').html(valor_radio);
    });
};

</script>

</head>
<body>

<!-- definimos un unico form global -->
<form id="form" action="procesar.php">
    <!-- definimos un div por cada paso  con el id=paso+(numero de paso) -->
    <div id="paso1" class="step">
        paso 1
        <!-- rellenamos el value con $_SESSION['datos_form']['name_campo']; -->
        <input type="text" name="campo1" value="<?= $_SESSION['datos_form']['campo1']; ?>">

        <select class="form-select" name="sexo">
            <?php 
                // para recuperar los datos de un select
                if( !empty($_SESSION['datos_form']['sexo']) ) {
                    $sexo = $_SESSION['datos_form']['sexo'];
                    echo '<option value="'.$sexo.'" selected="selected">'.$sexo.'</option>';
                }
                else{
                    echo '<option disabled selected="selected">Soy...</option>';
                }
            ?>
            <option value="Hombre">Hombre</option>
            <option value="Mujer">Mujer</option>
            <option value="Prefiero no decirlo">Prefiero no decirlo</option>        
        </select>

        <?php 
            // para recuperar los datos del checkbox
            if( !empty($_SESSION['datos_form']['condiciones']) ) {
                echo '<input type="checkbox" name="condiciones" checked>';
            }
            else{
                echo '<input type="checkbox" name="condiciones">';
            }
        ?>
        He leído y acepto bla bla bla...


        <!-- Creamos un link para ir al paso deseado con onclick="mostrar_paso('numero de paso') -->
        <a href="#2" onclick="mostrar_paso('2')">continuar</a>
    </div>
    <div id="paso2" class="step">
        paso 2

        <?php
            //opciones radio button
            $r =array(
                    1 => 'Producto 1',
                    2 => 'Producto 2',
                    3 => 'Producto 3',
                );

            // recorremos las opciones del radio button
            // y comprobamos si se selecciono antes comparando los key
            foreach ($r as $key => $value) 
            {
                // para recuperar los datos de un radio button
                if( $_SESSION['datos_form']['radio'] == $key ) {
                    echo '<input name="radio" type="radio" id="'.$key.'" value="'.$key.'"  checked="checked" >';
                    echo '<label for="'.$key.'" title="'.$value.'">'.$value.'</label>';
                }
                else{
                    echo '<input name="radio" type="radio" id="'.$key.'" value="'.$key.'" >';
                    echo '<label for="'.$key.'" title="'.$value.'">'.$value.'</label>';
                }
            }
        ?>

        <a href="#1" onclick="mostrar_paso('1')">Atras</a>
        <a href="#3" onclick="mostrar_paso('3')">continuar</a>
    </div>
    <div id="paso3" class="step">
        <!-- Aque se mostraran los datos del label del radio seleccionado -->
        <div id="div_producto"></div><br>
        paso 3

        <input type="text" name="campo3" value="<?= $_SESSION['datos_form']['campo3']; ?>">
        <a href="#2" onclick="mostrar_paso('2')">Atras</a>
        <!-- en el ultimo paso añadimos el submit -->
        <input type="submit" name="Terminar">
    </div>
</form>

</body>
</html>

saveTemp.php

Este archivo se encargará de guardar el paso y los datos del form

<?php
// Iniciamos la sessión
session_start();
// Guardamos los datos del formulario en una variable de session
$_SESSION['datos_form'] = $_POST;
// añadimos tambien al array el paso, no se puede utilizar este nombre (__paso__) como name en el formulario
$_SESSION['datos_form']['__paso__'] = $_GET['paso'];


Edito:

Te añado el código con la animación como pedias, he rehecho tu función para simplificarlo y adaptarlo al código anterior.

formulario.php

<?php
// Iniciamos la sessión
session_start();

// comprobamos si existe paso previo
if ( !empty($_SESSION['datos_form']['__paso__']) ) {
    $paso = $_SESSION['datos_form']['__paso__'];
}
// si no hay paso previo establecemos el paso 1
else{
    $paso = '1';
}

?><!DOCTYPE html>
<html>
<head>
    <title>Form por pasos</title>
<style type="text/css">
.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;
}

/* establecemos todos los paso a none, para que esten ocultos al inicio */
.step{
    display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    // definimos el paso que se va a mostrar al cargar la pagina
    // la variable $paso la definimos y recuperamos mas arriba en el PHP
    mostrar_paso(<?= $paso; ?>);        
});

// funcion para mover la imagen
function animacion(caso){
    switch(caso) {
        case 1:
            $(".backdrop").css("background-position", `0px 0px`);
            break;
        case 2:
            $(".backdrop").css("background-position", `0px -16px`);
            break;
        case 3:
            $(".backdrop").css("background-position", `0px -32px`);
            break;
        default:
            $(".backdrop").css("background-position", `0px 0px`);
    };
};

// funcion para guardar los datos del form y cambiar el paso
function mostrar_paso(paso)
{
    // recuperamos los datos del form con id=form
    var data = $( "#form" ).serialize();
    // definimos la url donde almacenaremos en sesion los datos
    // le concatenamos en GET el paso que se debe mostrar
    var url = 'saveTemp.php?paso=' + paso;
    // recuperamos el lavel del radio button seleccionado
    var valor_radio = $('input:radio[name=radio]:checked').next("label").text();

    // realizamos la peticion ajax
    $.ajax({
      type: "POST",
      url: url,
      data: data
    })
    .done(function( resp ) {
        // si todo va bien
        // ocultamos todos los pasos
        $('.step').css( "display", "none" );
        // mostramos el paso correspondiente
        $('#paso'+paso).fadeIn("slow");
        // mostramos el radio button seleccionado
        $('#div_producto').html(valor_radio);
        //movemos la imagen
        animacion(paso);
    });
};

</script>

</head>
<body>

<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>


<!-- definimos un unico form global -->
<form id="form" action="procesar.php">
    <!-- definimos un div por cada paso  con el id=paso+(numero de paso) -->
    <div id="paso1" class="step">
        paso 1
        <!-- rellenamos el value con $_SESSION['datos_form']['name_campo']; -->
        <input type="text" name="campo1" value="<?= $_SESSION['datos_form']['campo1']; ?>">

        <select class="form-select" name="sexo">
            <?php 
                // para recuperar los datos de un select
                if( !empty($_SESSION['datos_form']['sexo']) ) {
                    $sexo = $_SESSION['datos_form']['sexo'];
                    echo '<option value="'.$sexo.'" selected="selected">'.$sexo.'</option>';
                }
                else{
                    echo '<option disabled selected="selected">Soy...</option>';
                }
            ?>
            <option value="Hombre">Hombre</option>
            <option value="Mujer">Mujer</option>
            <option value="Prefiero no decirlo">Prefiero no decirlo</option>        
        </select>

        <?php 
            // para recuperar los datos del checkbox
            if( !empty($_SESSION['datos_form']['condiciones']) ) {
                echo '<input type="checkbox" name="condiciones" checked>';
            }
            else{
                echo '<input type="checkbox" name="condiciones">';
            }
        ?>
        He leído y acepto bla bla bla...


        <!-- Creamos un link para ir al paso deseado con onclick="mostrar_paso('numero de paso') -->
        <a href="#2" onclick="mostrar_paso(2)">continuar</a>
    </div>
    <div id="paso2" class="step">
        paso 2

        <?php
            //opciones radio button
            $r =array(
                    1 => 'Producto 1',
                    2 => 'Producto 2',
                    3 => 'Producto 3',
                );

            // recorremos las opciones del radio button
            // y comprobamos si se selecciono antes comparando los key
            foreach ($r as $key => $value) 
            {
                // para recuperar los datos de un radio button
                if( $_SESSION['datos_form']['radio'] == $key ) {
                    echo '<input name="radio" type="radio" id="'.$key.'" value="'.$key.'"  checked="checked" >';
                    echo '<label for="'.$key.'" title="'.$value.'">'.$value.'</label>';
                }
                else{
                    echo '<input name="radio" type="radio" id="'.$key.'" value="'.$key.'" >';
                    echo '<label for="'.$key.'" title="'.$value.'">'.$value.'</label>';
                }
            }
        ?>

        <a href="#1" onclick="mostrar_paso(1)">Atras</a>
        <a href="#3" onclick="mostrar_paso(3)">continuar</a>
    </div>
    <div id="paso3" class="step">
        <!-- Aque se mostraran los datos del label del radio seleccionado -->
        <div id="div_producto"></div><br>
        paso 3

        <input type="text" name="campo3" value="<?= $_SESSION['datos_form']['campo3']; ?>">
        <a href="#2" onclick="mostrar_paso(2)">Atras</a>
        <!-- en el ultimo paso añadimos el submit -->
        <input type="submit" name="Terminar">
    </div>
</form>

</body>
</html>
2
  • @Xerif Excelente pregunta aprendí una segunda forma de conservar datos, tienes buenas respuestas puedes darme alguna solución a la mía Bloquear Cuenta
    – J. Mick
    Commented el 30 ago. 2017 a las 17:05
  • @Xerif Gracias, si bastante temario, bastante historia, pero es debido a los comentarios actualizo la pregunta.
    – J. Mick
    Commented el 31 ago. 2017 a las 1:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.