, değeri aşağıdaki değişken $stepajax jquery ve php ile çoklu form sürecini nasıl canlandırırsınız? adımlar sayfasını güncellemek veya ferahlatıcı durumunda başlangıcına dönen önlemek için bir oturumda sayılır ve eklenen PHP ile
<?php
session_start();
if (!empty($_SESSION['datos_form']['__step__'])) {
$step = $_SESSION['datos_form']['__step__'];
} else {
$step = '1';
}
?>
Biz alma değeri vasıtasıyla elde edilir jQuery javascript kodundaki değişkenin. (Varsayılan değer aldığı için)
show_step(1);
Daha önce de vurgulandığı gibi sürecin her adım, JavaScript koduna PHP alınan değere göre gösterilmiştir: eşit olacaktır
show_step(<?= $step; ?>);
. gibi ek denetimler eklemek gerek olmadan
aşağıdadır:
current = $(this).parent();
next = $(this).parent().next();
Ben ajax uyarlamak için gerekiyor
https://jsfiddle.net/2LL8x1sm/
CSS ile aşağıdaki basit sihirbaz javascript kodu böylece adımı canlandırır.
geçerli kod zaten sprite adı verilen bir teknik kullanarak bir animasyon vardıfunction animacion(caso){}
Benim ihtiyacım sürecin animasyon adapte edebilmek ve gider bir simge (like this one) kullanarak etmektir
Bu animasyon geri bağlantıları ile birlikte çalışır ve devam aşağıdaki kodda fuction içinde bir örnek eklemek fonksiyonu animacion(caso) {} içine eklenmesi gerekir:
$(".test").animate({ "left": "-=50px" }, "slow");
Ve yürürlükte o testle, div çalışır sınıf, her adımda devam ederek sol stili değiştiriyordu.
Benim html kodunun css işlemini nasıl canlandırabilirim?
$(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">
\t <li class="active"><span>Step 1</span></li>
\t <li><span>Step 2</span></li>
\t <li><span>Step 3</span></li>
</ul>
</div>
<form id="form" action="procesar.php">
<div id="step1" class="step">
\t <h1>step 1</h1>
\t <a data-ref="#" onclick="show_step(2)">continue</a>
</div>
<div id="step2" class="step">
\t <h1>step 2</h1>
\t <a data-ref="#" onclick="show_step(1)">after</a>
<a data-ref="#" onclick="show_step(3)">continue</a>
</div>
<div id="step3" class="step">
\t <h1>step 3</h1>
\t <a data-ref="#" onclick="show_step(2)">after</a>
\t <button>Send</button>
</div>
</form>
Sadece animasyon yapmak için ne yaparsınız? –
@BASEERHAIDERJAFRI Evet arkadaşım, ve eğer mümkünse bir sonraki adımı takip etmekten kaçınmak için olası formları nasıl doğrulayacağınıza dair bir örnek. Form doğrulama kullanımı için – gPH
Jquery Validator (https://jqueryvalidation.org/documentation/) –