drf21989 2018-04-19 18:34
浏览 49
已采纳

当用户点击“转到步骤2”时如何显示step2 div?

I have a multi step form using bootstrap and jQuery. The multi step form is for a user to buy a product. There are 4 steps: - Step 1 is for the user insert his info (name, email, etc) - Step 2 the user select the payment method - Step 3 the user introduces the payment data - Step 4 present an invoice for the user.

When the user click "go to step 2" the url changes to "store.test/product/5/a-5/payment/paymentMethods" and the user remains in the same payment page, but how to change from step 1 to step 2 in the multi step form?

The step1 html is like this:

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

In paymentcontroller I have the storeUserInfo to collect the user data introduced in step1 and redirect to the same page (My doubt is how to redirect to the same page but show the 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]);
    }

Routes:

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 to navigatte between steps:

<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();
        }
});
  • 写回答

2条回答 默认 最新

  • dongyan3616 2018-04-19 18:50
    关注

    Why don't you just collect all the data with js and post all at once to the server, I feel like you are going about this in a really complex way.

    Alternatively, collect your data for step one, post to server redirect the user to step 2, and repeat.

    e.g.

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

    I'm sure you get the idea. Personally, I would go with posting all the data at once verifying each page with ajax.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 MATLAB怎么通过柱坐标变换画开口是圆形的旋转抛物面?
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿