【发布时间】：2018-02-11 22:01:42
【问题描述】：
简单解释一下这个简单的 jQuery 向导是如何工作的
- 会话用于保存每个步骤的数据。
- 由一个会话变量组成，用于保存我们在哪一步。
- 由一个用于存储表单数据的会话变量组成。
- 每次更改步骤时，我们都会使用 ajax 请求保存表单数据和会话中的步骤。
- 如果数据更新，则从会话中检索数据。
此向导表单包含 3 个步骤。
因为我可以更正错误并使用 php 验证表单，如果存在没有数据的字段，请不要放弃下一步，直到用户填写表单的所有字段。
每个文本输入中的每个表单字段都存在警告错误，向我显示警告消息。
注意：未定义索引：C:\xampp\htdocs\prueba\wizar.php 第 229 行中的 datos_form
我想在保存步骤的会话中添加一个cookie，以避免在浏览器错误关闭的情况下擦除会话中存储的数据，创建一个验证时间为30天的会话cookie。
现在要从用户保存的数据中删除cookie创建一个取消按钮，取消按钮将删除cookie，包括会话中保存的数据。
我的完整代码：
wizar.php
<?php
session_start();
// check if there is a previous step.
if ( !empty($_SESSION['datos_form']['__paso__']) ) {
$paso = $_SESSION['datos_form']['__paso__'];
}
// if there is no previous step we set step 1.
else{
$paso = '1';
}
?><!DOCTYPE html>
<html>
<head>
<title>Form por pasos</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
mostrar_paso(<?= $paso; ?>);
});
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`);
};
};
function mostrar_paso(paso)
{
var data = $( "#form" ).serialize();
var url = 'saveTemp.php?paso=' + paso;
var valor_radio = $('input:radio[name=radio]:checked').next("label").text();
$.ajax({
type: "POST",
url: url,
data: data
})
.done(function( resp ) {
$('.step').css( "display", "none" );
$('#paso'+paso).fadeIn("slow");
$('#div_producto').html(valor_radio);
animacion(paso);
});
};
</script>
</head>
<body>
<div class="setup">
<ul class="backdrop">
<li class="process item1">step 1</li>
<li class="process item2">step 2</li>
<li class="process item3">FINALIZE</li>
</ul>
</div>
<form id="form" action="procesar.php">
<div id="paso1" class="step">
<input type="text" name="campo1" value="<?= $_SESSION['datos_form']['campo1']; ?>">
<select class="form-select" name="sexo">
<?php
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">I am...</option>';
}
?>
<option value="Mem">Men</option>
<option value="Woman">Woman</option>
<option value="I prefer not to say">I prefer not to say</option>
</select>
<?php
if( !empty($_SESSION['datos_form']['condiciones']) ) {
echo '<input type="checkbox" name="condiciones" checked>';
}
else{
echo '<input type="checkbox" name="condiciones">';
}
?>
...
onclick="mostrar_paso('numero de paso') -->
<a href="#2" onclick="mostrar_paso(2)">continuar</a>
</div>
<div id="paso2" class="step">
<?php
$r =array(
1 => 'Product 1',
2 => 'Product 2',
3 => 'Product 3',
);
foreach ($r as $key => $value)
{
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">
<div id="div_producto"></div><br>
<input type="text" name="campo3" value="<?= $_SESSION['datos_form']['campo3']; ?>">
<input type="submit" name="cancel">
<a href="#2" onclick="mostrar_paso(2)">Atras</a>
<input type="submit" name="Terminar">
</div>
</form>
</body>
</html>
saveTemp.php
注意：该文件负责保存表单的步骤和数据。
<?php
session_start();
// We save the form data in a session variable
$_SESSION['datos_form'] = $_POST;
// we added the step also to the array, you can not use this name (__paso__) as name in the form
$_SESSION['datos_form']['__paso__'] = $_GET['paso'];
【问题讨论】：
-
@mplungjan 我不明白，我在我的问题中详细说明了必要的内容，它是如何工作的，以便他们得出我提出的想法和错误。不清楚？
-
发布您的 wizar.php 而不是 form.php
标签： php jquery session cookies