当用户单击“转到第 2 步”时如何显示第 2 步 div？

Question

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

当用户点击“转到第 2 步”时，网址更改为“store.test/product/5/a-5/payment/paymentMethods”，用户仍然在同一个支付页面，但如何从第 2 步更改多步表格中的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>

在 paymentcontroller 我有 storeUserInfo 来收集 step1 中引入的用户数据并重定向到同一页面（我的疑问是如何重定向到同一页面但显示 step2 div）：

public function storeUserInfo(Request $request, $id, $slug = null){
        //dd($request);
        $request->validate([
            'name' => 'required|max:255|string',
            'surname' => 'required|max:255|string',
            'email' => 'required|max:255|string',
        ]);
        Session::put('name' ,  $request->name);
        Session::put('surname' ,  $request->surname);
        Session::put('email' ,  $request->email);
        return redirect(route('products.presentPaymentMethods',['id' => $id, 'slug' => $slug]));
    }

    public function presentPaymentMethods(Request $request, $id, $slug=null){
        $productQuantities =  Session::get('productQuantities');
        return view('products.registration',
            ['productQuantities' => $productQuantities, 'id' => $id, 'slug' => $slug]);
    }

路线：

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();
        }
});

Answer 1

你为什么不直接用 js 收集所有数据并一次性发布到服务器，我觉得你正在以一种非常复杂的方式处理这个问题。

或者，为第一步收集数据，发布到服务器，将用户重定向到第 2 步，然后重复。

例如

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');
}

我相信你明白了。就个人而言，我会一次发布所有数据，并使用 ajax 验证每个页面。

Answer 2

我想这就是你要找的东西

$(function(){
 $('.next_step').click(function(){
    var tab = $(this).attr('data-nexttab');
    $('.tabs').hide().removeClass('show').addClass('hide');
    $(tab).show().removeClass('hide').addClass('show');
  });
});

.hide{
 display:none;
}
.show{
display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs show" id="tabs1">
Continue Here
<button type="button" data-nexttab="#tabs2" class="next_step">next</button>
</div>
<div class="tabs hide" id="tabs2">
Continue Here 2
<button type="button" data-nexttab="#tabs3" class="next_step">next</button>
</div>
<div class="tabs hide" id="tabs3">
Continue Here 3
<button type="submit" class="next_step">finish</button>
</div>