Многошаговая форма php и jquery

Question

Здравствуйте, я использую пошаговые формы 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>

здесь когда

Answer 1

Это зависит от вашей реализации PHP, но у вас есть два варианта:

1 - использование ajax для отправки данных обратно на сервер после каждого шага. 2- использовать отдельную страницу для каждого шага.

Answer 2

Нажав кнопку на шаге 1,

1. Вы вставляете в соответствующую таблицу и получаете вставленный идентификатор

2. Держите это вставленное значение id в каком-то скрытом типе в форме.

Нажав кнопку на шаге 2,

1. вам нужно обновить соответствующий столбец и его значение во вставленных данных строки таблицы, указав свой идентификатор, который вы указали в форме.

Продолжайте в том же порядке, пока все ваши шаги не будут завершены.

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

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>