Question

我有一个包含3个步骤的多步骤表单。

当用户处于“＃step2”并点击“转到步骤3”时，向storePaymentMethods()发出ajax请求。在此storePaymentMethod payment_method字段已经过验证，需要它。如果它是有效的，那就是用户选择了一种付款方式，当用户点击“转到第3步”时我想在“＃step3”div中显示payment_method是“credit_card”某些特定的HTML ，如果是“转移”我想显示其他HTML。

你知道如何正确实现这一目标吗？如何在“step3”div中获取上一步中所选payment_method的值？

多步骤表单的所有步骤都在同一页面上。

    public function storePaymentMethods(Request $request){
           $request->validate([
                'payment_method' => 'required',
            ]);
            return response()->json([
                'success' => true,
                'message' => 'success'
            ], 200);


}

// step 2 html

   <form method="post" id="step2form" action="">

    <h6>Select the payment method</h6>

    <div class="form-group">
        <div class="form-check">
            <input class="form-check-input" type="radio" name="payment_method" value="transfers">
            <label class="form-check-label d-flex align-items-center" for="exampleRadios1">
                <span class="mr-auto">Transfers</span>
            </label>
        </div>
        <br>
        <div class="form-check">
            <input class="form-check-input" type="radio" name="payment_method" value="credit_card">
            <label class="form-check-label d-flex align-items-center" for="exampleRadios1">
                <span class="mr-auto">Credit card</span>
            </label>
        </div>
    </div>
    <br>
    <div class="text-right">
        <button type="button" href="#step3" data-toggle="tab" role="tab"
                class="btn btn-outline-primary prev-step mr-2">
            Go back to step 2
        </button>
        <input type="submit" href="#step3" id="goToStep3"
               class="btn btn-primary float-right next-step"
               value="Go to step 3"/>
    </div>
</form>

// step 3 html

<form method="post" id="step3form" action="">
     <div class="tab-pane clearfix fade" id="step3" role="tabpanel" aria-labelledby="contact-tab">
           @if($paymentMethod == "credit_card")
           //show the appropriate info for this payment method
           @else
           // show the approprate info for this payment method
           @endif
    </div>
</form>

//转到第3步jquery ajax

var page_form_id_step2 = "step2form";

    $('#goToStep3').on('click', function (event) {
        event.preventDefault();

        var custom_form = $("#" + page_form_id_step2);

        $.ajax({
            method: "POST",
            url: '{{ route('confs.storePaymentMethods', compact('id','slug') ) }}',
            data: custom_form.serialize(),
            datatype: 'json',

            success: function (data, textStatus, jqXHR) {
                var $active = $('.nav-pills li a.active');
                nextTab($active);
                $('html, body').animate({
                    scrollTop: $("#registration_form").offset().top
                }, 1000);
            },
            error: function (data) {
                $('html, body').animate({
                    scrollTop: $("#registration_form").offset().top
                }, 1000);
                var errors = data.responseJSON;
                var errorsHtml = '';
                $.each(errors['errors'], function (index, value) {
                    errorsHtml += '<ul class="alert alert-danger mt-3"><li class="text-danger">' + value + '</li></ul>';
                    console.log(errorsHtml);
                });

                $('#step2errors').show().html(errorsHtml);
            }

        });
    });

根据选定的付款方式显示一些HTML

0 个答案: