How to animate multi form process with ajax jquery and php? - php

Question

Through PHP the steps are counted and added in a session to avoid returning to the beginning in case of updating or refreshing the page, the value is obtained by means of the following variable $step
<?php
session_start();
if ( !empty($_SESSION['datos_form']['__step__'])) {
$step = $_SESSION['datos_form']['__step__'];
} else {
$step = '1';
}
?>
We receive the value of the variable in the jQuery javascript code.
show_step(<?= $step; ?>);
That would be equal to: (for the default value received)
show_step(1);
Each step of the process is shown according to the value received from PHP to the Javascript code as it was already mentioned.
Without the need to add additional controls like the following:
current = $(this).parent();
next = $(this).parent().next();
I have the following simple wizard with CSS
https://jsfiddle.net/2LL8x1sm/
I need to be able to adapt it to the ajax javascript code so that it animates the step in which it is.
The current code already had an animation using a technique called sprite
function animacion(caso){}
What I need is to be able to adapt the animation of the process, and using an icon (like this one) that goes sliding with the bar of progress similar to the following image:
This animation must be added inside the function animacion(caso) {} that works together with the back links and continue, add an example within the fuction in the following code:
$( ".test" ).animate({ "left": "-=50px" }, "slow" );
And in effect it works, the div with the test class was modifying the left style by continuing in each step.
How can I animate the process of my html code css?
$(function() {
show_step(<?= $step; ?>);
});
function animacion(caso){
//$( ".test" ).animate({ "left": "-=50px" }, "slow" );
};
// function to save the form data and change the step
function show_step(step){
var data = $( "#form" ).serialize();
var url = 'saveTemp.php?step=' + step;
$.ajax({
type: "POST",
url: url,
data: data
})
.done(function( resp ) {
$('.step').css( "display", "none" );
$('#step'+step).fadeIn("slow");
//animation of each step
animacion(step);
});
};
.container {
width: 100%;
padding-top: 20px;
}
.progressbar li {
list-style-type: none;
float: left;
width: 33.33%;
position: relative;
text-align: center;
}
.progressbar li > * {
position: relative;
padding-bottom: 20px;
display: inline-block;
font-size: 1.4rem;
color: #2c3f4c;
top: -45px;
}
.progressbar li:before {
content: '';
width: 12px;
height: 12px;
display: block;
text-align: center;
margin: 0 auto;
border-radius: 50%;
background-color: #edeff0;
}
.progressbar li:after {
content: '';
position: absolute;
width: 100%;
height: 4px;
background-color: #edeff0;
top: 4px;
left: -50%;
z-index: -1;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: green;
}
.progressbar li.active:before {
background-color: green;
}
.progressbar li.active + li:after {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- <div class="test"></div> -->
<div class="container">
<ul class="progressbar">
<li class="active"><span>Step 1</span></li>
<li><span>Step 2</span></li>
<li><span>Step 3</span></li>
</ul>
</div>
<form id="form" action="procesar.php">
<div id="step1" class="step">
<h1>step 1</h1>
<a data-ref="#" onclick="show_step(2)">continue</a>
</div>
<div id="step2" class="step">
<h1>step 2</h1>
<a data-ref="#" onclick="show_step(1)">after</a>
<a data-ref="#" onclick="show_step(3)">continue</a>
</div>
<div id="step3" class="step">
<h1>step 3</h1>
<a data-ref="#" onclick="show_step(2)">after</a>
<button>Send</button>
</div>
</form>

Answer 1

Is this correct understanding of what you need?
function animacion(caso) {
if (!caso) {
document.getElementsByClassName("progressbar")[0].setAttribute("data-active", "");
} else {
document.getElementsByClassName("progressbar")[0].setAttribute("data-active", caso);
}
var items = document.getElementsByTagName("li");
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (!caso) {
item.className = "";
} else if (i < caso) {
item.className = "active";
} else {
item.className = "";
}
}
}
setTimeout(function () {
animacion(1);
}, 1000);
setTimeout(function () {
animacion(2);
}, 2000);
setTimeout(function () {
animacion(3);
}, 3000);
setTimeout(function () {
animacion(2);
}, 4000);
setTimeout(function () {
animacion(1);
}, 5000);
setTimeout(function () {
animacion(null);
}, 6000);
.container {
width: 100%;
}
.progressbar {
counter-reset: step;
}
.progressbar li {
list-style-type: none;
float: left;
width: 33.33%;
position: relative;
text-align: center;
}
.progressbar li > * {
position: relative;
padding-bottom: 20px;
display: inline-block;
font-size: 1.4rem;
color: #2c3f4c;
top: -45px;
/* new code start */
top: -65px;
/* new code end */
}
.progressbar li:before {
content: '';
width: 12px;
height: 12px;
display: block;
text-align: center;
margin: 0 auto;
border-radius: 50%;
background-color: #edeff0;
}
.progressbar li:after {
content: '';
position: absolute;
width: 100%;
height: 4px;
background-color: #edeff0;
top: 4px;
left: -50%;
z-index: -1;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: green;
}
.progressbar li.active:before {
background-color: green;
/* new code start */
-webkit-transition: background 300ms ease;
transition: background 300ms ease;
-webkit-transition-delay: 300ms;
transition-delay: 300ms;
/* new code end */
}
/* removed code start */
/*
.progressbar li.active + li:after {
background-color: green;
}
*/
/* removed code end */
/* new code start */
.progressbar {
position: relative;
padding: 0;
margin: 0;
}
.progressbar:after {
content: "";
height: 4px;
left: 16.666%;
background: green;
top: 4px;
position: absolute;
-webkit-transition: width 300ms ease;
transition: width 300ms ease;
}
.progressbar[data-active="1"]:after {
width: 0;
}
.progressbar[data-active="2"]:after {
width: 33%;
}
.progressbar[data-active="3"]:after {
width: 66%;
}
.progressbar[data-active=""]:before {
opacity: 0;
}
.progressbar:not([data-active=""]):before {
opacity: 1;
-webkit-transition: left 300ms ease, opacity 300ms ease;
transition: left 300ms ease, opacity 300ms ease;
}
.progressbar[data-active="1"]:before {
left: 16.666%;
}
.progressbar[data-active="2"]:before {
left: 50%;
}
.progressbar[data-active="3"]:before {
left: 83.333%;
}
.progressbar:before {
content: "";
height: 16px;
width: 16px;
margin-top: -24px;
margin-left: -8px;
left: 16.666%;
background: khaki;
top: 4px;
position: absolute;
-webkit-transition: left 300ms ease;
transition: left 300ms ease;
}
/* new code end */
<div class="container">
<br><br><br><br><br><br>
<ul class="progressbar" data-active="">
<li><span>Step 1</span></li>
<li><span>Step 2</span></li>
<li><span>Step 3</span></li>
</ul>
</div>
There is minor change in markup and style. Rectange indicates block where you can insert your icons.