Показать некоторые HTML на основе выбранного способа оплаты

Question

У меня есть многошаговая форма с 3 шагами.

Когда пользователь находится в «# step2» и нажимает «Перейти к шагу 3», выполняется запрос ajax к storePaymentMethods().В этом 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);


}

// шаг 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>

// шаг 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);
            }

        });
    });

Answer 1

Изначально напишите все в шаге 3, как <div id="credit_card_section" style="display:none;"></div> и используйте display:none для этой части.

Затем вы можете передать переменную, связанную с информацией о способе оплаты, например

return response()->json([
                'success' => true,
                'message' => 'success',
                'selected_payment' => 'credit'
            ], 200);

Наконец, в вашем успехе ajax вы можете скрыть / показать любую конкретную часть на основе этих данных ответа.

success: function (data, textStatus, jqXHR) {
                var result = JSON.parse(data);
                if(result['selected_payment'] == 'credit'){
                  $("#credit_card_section").show();
                }

                var $active = $('.nav-pills li a.active');
                nextTab($active);
                $('html, body').animate({
                    scrollTop: $("#registration_form").offset().top
                }, 1000);
            },