多步骤表单php和jquery

您好，我正在使用step表格step1、step2等

在这里，我应用jquery并转到下一页，但我的问题是，在下一步中，我并没有获得请求中第一步的数据。这里是sinlge页面上的步骤，它们只是显示隐藏和块。我应该怎么做才能在php中获取所有步骤数据，直到最后一步完成

<form>
<div class="step1">
<input type="text" name="firstname">
</div>

<div class="step2">
<input type="text" name="lastname">
<div>

<input type="submit" name="sub">
<input type="button" name="next">
<input type="button" name"previous">

</form>

---

这里的时间取决于您的php实现，但这里有两个选项：

1-在每个步骤后使用ajax将数据发送回服务器。

---

2-对每个步骤使用单独的页面。

同时单击步骤1中的按钮

您将插入到相应的表中并获取插入的id

将插入的id值保存在表单中的某个隐藏类型中

单击步骤2中的按钮时

需要使用表单中保留的id更新插入表行数据中的相应列及其值

继续相同的过程，直到完成所有步骤

    <script>
        $(document).ready(function() {
           $("#next").click(function() {
             var currentStep = $('#currentStep').val(); // based on the step you need use some switch or conditional block to pass data and store it accordingly.
            // insertedId ==0 means you need to insert into table, if it not you need update the column in table

              var formdata = {insertedId:$("#insertedId").val(),currentStep:currentStep, first:$("#first").val()};

               $.ajax({
                 type: "POST",
                 url: "form.php",
                 dataType:'json',
                 data: formdata
                 })
                 .done(function( data ) {

                     var NextStep =parseInt(currentStep)+1;
                     $("#currentStep").val(NextStep);

                     $("#insertedId").val(data.insertedId);
                     $("#step"+currentStep).hide();
                     $("#step"+NextStep).show();

                 });
            });         
        });


    </script>

$（文档）.ready（函数（）{
$（“#下一步”）。单击（函数（）{
var currentStep=$（'#currentStep'）.val（）；//根据需要使用的步骤，使用一些开关或条件块来传递数据并相应地存储它。
//insertedId==0意味着您需要插入到表中，如果不是，则需要更新表中的列
var formdata={insertedId:$（“#insertedId”）.val（），currentStep:currentStep，first:$（“#first”）.val（）；
$.ajax({
类型：“POST”，
url:“form.php”，
数据类型：'json'，
数据：formdata
})
.完成（功能（数据）{
var NextStep=parseInt（currentStep）+1；
$（“#当前步骤”）.val（下一步）；
$（“#insertedId”）.val（data.insertedId）；
$（“#步骤”+当前步骤）.hide（）；
$（“#步骤”+NextStep.show（）；
});
});         
});

HTML:

        <div id="step1">Step 1:

            <input type="text" name="first" id="first" value="">

        </div>

         <div id="step2" style="display:none;">Step 2:

            <input type="text" name="last" id="last" value="">

        </div>

        <input type="hidden" name="insertedId" id="insertedId">
        <input type="hidden" name="currentStep" id="currentStep" value="1">
        <button id="next">Next</button>

步骤1：
步骤2：
下一个

感谢您的回复。您有什么建议？如果您了解javascript，最好使用ajax将数据发送回服务器，您还可以找到一些用于多步骤表单的jQuery插件，这些插件可以自动执行此过程。我在每个步骤中都有30到35个字段，因此如果我使用隐藏字段，则会很长。我要求您仅隐藏当前行的插入id。我正在使用该插件，它允许我通过适当的验证转到下一个和上一个，但唯一的问题是表单数据在所有阶段都不会通过。什么是最简单和最好的解决方案？你能给我一个例子吗？具体说明我建议的原因，同时单击“下一步”按钮本身，将其存储到数据库并进入另一个步骤$（#next'）。单击（function（）{$.ajax（function（）{}）；}）；