Php 如何在用户单击时显示step2 div；转到第2步"；？

我有一个使用引导和jQuery的多步骤表单。多步骤表单用于用户购买产品。有4个步骤：-步骤1为用户插入其信息（姓名、电子邮件等）-步骤2为用户选择付款方式-步骤3为用户介绍付款数据-步骤4为用户提供发票

当用户单击“转到步骤2”时，url将更改为“store.test/product/5/a-5/payment/paymentMethods”，用户将保持在相同的付款页面中，但如何在多步骤表单中从步骤1更改为步骤2

step1 html如下所示：

<div class="tab-pane fade show active clearfix" id="step1" role="tabpanel" aria-labelledby="home-tab">
    <h6>User Info</h6>
    <form method="post" action="{{route('products.storeUserInfo', ['id' => $id, 'slug' => $slug])}}">
         {{csrf_field()}}
        <div class="form-group font-size-sm">
            <label for="name" class="text-gray">Name</label>
            <input type="text" required class="form-control"  value="{{ (\Auth::check()) ? Auth::user()->name : old('name')}}">
        </div>
        <!-- other form fields -->
        <input type="submit" href="#step2"
                class="btn btn-primary btn float-right next-step" value="Go to step 2"/>
    </form>
</div>

路线：

Route::post('/product/{id}/{slug?}/payment/storeUserInfo', [
    'uses' => 'PaymentController@storeUserInfo',
    'as'   =>'products.storeUserInfo'
]);

Route::get('/product/{id}/{slug?}/payment/paymentMethods', [
    'uses' => 'PaymentController@presentPaymentMethods',
    'as'   => 'products.presentPaymentMethods'
]);

要在步骤之间导航的jQuery：

<script type="text/javascript">
    $(function(){
        $('a.nav-link').on('show.bs.tab', function(e) {
            var $target = $(e.target);
            if (!divValid($('.nav-pills li a.active').prop('hash'))) {
                e.preventDefault();
            } else

            if ($target.parent().hasClass('disabled')) {
                e.preventDefault();
            }
        });
        $(".next-step").click(function(e) {
            var $active = $('.nav-pills li a.active');
            nextTab($active);
        });

        $(".prev-step").click(function(e) {
            var $active = $('.nav-pills li a.active');
            prevTab($active);
        });

        function nextTab(elem) {
            elem.parent().next().removeClass('disabled').find('a.nav-link').click();
        }

        function prevTab(elem) {
            elem.parent().prev().find('a.nav-link').click();
        }
});

$（函数（）{
$（'a.nav-link'）。打开（'show.bs.tab'，函数（e）{
var$target=$（即target）；
if（！divValid（$（'.nav.a.active'）.prop（'hash'））{
e、 预防默认值（）；
}否则
if（$target.parent（）.hasClass（'disabled'））{
e、 预防默认值（）；
}
});
$（“.next step”）。单击（函数（e）{
var$active=$（'.nav.a.active'）；
nextTab（现行）；
});
$（“.prev步骤”）。单击（函数（e）{
var$active=$（'.nav.a.active'）；
prevTab（活动）；
});
功能nextTab（elem）{
elem.parent（）.next（）.removeClass（'disabled'）。find（'a.nav-link'）。click（）；
}
功能前置选项卡（elem）{
elem.parent（）.prev（）.find（'a.nav-link'）。单击（）；
}
});

我想这就是你要找的

$（函数（）{
$（'.next_step'）。单击（函数（）{
var tab=$（this.attr（'data-nexttab'）；
$（'.tabs'）.hide（）.removeClass（'show'）.addClass（'hide'）；
$（tab）.show（）.removeClass（'hide'）.addClass（'show'）；
});
});
.hide{
显示：无；
}
.表演{
显示：块；
}

继续这里
下一个
继续这里2
下一个
继续这里3
完成
为什么不用js收集所有数据，然后一次发布到服务器上，我觉得这是一种非常复杂的方式

或者，收集第一步的数据，将用户重定向到服务器，然后重复第二步

e、 g

我相信你明白了。就我个人而言，我会一次发布所有数据，用ajax验证每个页面。
谢谢，您的备选示例与我在问题中的示例类似，但您知道如何在将用户重定向到步骤2之后（在您的示例中是step1store（）方法，在问题中是storeUserInfo（）方法）刷新页面后是否在页面中显示步骤2？因为当用户在点击“转到步骤2”后被重定向到同一个支付页面时，可见的步骤仍然是步骤1。我对ajax没有太多的经验，但你说的是使用jquery收集数据，例如在每个步骤中，在每个步骤中发送ajax post请求？但是在每一步中都不需要存储在db中，只需要在第3步中存储在db中。是的，就是这样，让我们在第1步中说你有名字、姓氏和电子邮件。如果数据返回成功，您可以通过ajax将数据传递给验证器，然后使用js存储数据，然后继续下一步，重复所有收集数据的步骤，在最后一步中，第3步通过ajax将所有验证的数据发布到服务器，成功后返回第4步的发票。谢谢，但是，首先必须使用ajax将数据传递给validatior，并且仅在存储在js中之后？不是相反吗？首先需要使用jQuery存储数据，并且只使用ajax发送到验证器？谢谢，但是当用户在单击“转到步骤”后重定向到同一付款页面时，可见的步骤仍然是步骤1。为什么不将数据存储在php会话中，然后在最后一步付款完成后将其清除？谢谢，Im将会话中的数据存储在storeUserInfo（）方法中。问题是，在该方法中，用户被重定向到该url“store.test/product/5/a-5/payment/paymentMethods”的同一支付页面。但在此页面中，仍将步骤1视为默认值，但应显示步骤2，因为用户之前在“转到步骤2”按钮中单击了。请尝试为步骤添加另一个会话名称/值，提交第一步时，将会话设置为
2
，然后在页面中检查会话是否为
2
隐藏第一步并显示步骤
2
<script type="text/javascript">
    $(function(){
        $('a.nav-link').on('show.bs.tab', function(e) {
            var $target = $(e.target);
            if (!divValid($('.nav-pills li a.active').prop('hash'))) {
                e.preventDefault();
            } else

            if ($target.parent().hasClass('disabled')) {
                e.preventDefault();
            }
        });
        $(".next-step").click(function(e) {
            var $active = $('.nav-pills li a.active');
            nextTab($active);
        });

        $(".prev-step").click(function(e) {
            var $active = $('.nav-pills li a.active');
            prevTab($active);
        });

        function nextTab(elem) {
            elem.parent().next().removeClass('disabled').find('a.nav-link').click();
        }

        function prevTab(elem) {
            elem.parent().prev().find('a.nav-link').click();
        }
});

Route::get('step1', 'step3@PaymentController')->name('step1');
Route::post('step1store', 'step1@PaymentController')->name('step1-store');
Route::get('step2', 'step2@PaymentController')->name('step2');
Route::post('step2store', 'step2@PaymentController')->name('step2-store');
Route::get('step3', 'step3@PaymentController')->name('step3');
Route::post('step3store', 'step3@PaymentController')->name('step3-store');

public function step1store(Request $request)
{
    //process your data and store to db
    return redirect()->route('step2');
}

public function step2store(Request $request)
{
    //process your data and store to db
    return redirect()->route('step3');
}

public function step3store(Request $request)
{
    //process your data and store to db
    return redirect()->route('step4');
}