Home / Questions / 96689
Accepted
Otto
Asked: 2020-08-23 14:02:31 +0800 CST 2020-08-23 14:02:31 +0800 CST

How to save current Wizard step in a session - PHP?

  • 772

the validations of the form and the process of the Wizard is on the same page, the Wizard jQuery does not refresh the page when continuing with each step of it, the container of each stepis hidden when continuing with each process.

The bug is that if we refresh the page in step 2or step 3, we automatically go back to the start (step 1) , ideally it would show in the process it is in, that the only way to go back is by using the back and continue and at the same time store sesiónthe data of the form.

My code

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>

How to save current Wizard step in a session - PHP?

  • Can you explain the process to me?
jquery

1 Answers

  1. Best Answer

    Suppose we have 3 steps.

    • We will use the sessions to save the data of each step.
    • We will define a session variable to save which step we are in.
    • We define a session variable to store the form data.
    • We will only have one form.
    • Every time we change the step we will save the data of the form and the step in session with an ajax request.
    • If it is updated the data is retrieved from the session.

    I have simplified the form to make it as understandable as possible, I have commented the code so that the reason for each line can be understood

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

    This file will be responsible for saving the pasoform and data

    <?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'];

    edit:

    I add the code with the animation as you asked, I have redone your function to simplify it and adapt it to the previous code.

    form.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>
    • 1