首页 > 解决方案 > 如何在 ID 为“#step3form”的表单中显示 $reference 数组的值?

问题描述

我有这个表格供用户选择付款方式:

<form method="post" id="step2form" action="">
        {{ csrf_field() }}
        <h6>Select payment method</h6>
        <div class="form-group">
            <div class="form-check">
                <input class="form-check-input" type="radio" name="payment_method" value="references">
                 <span class="mr-auto">References</span>
            </div>
             <div class="form-check">
                <input class="form-check-input" type="radio" name="payment_method" value="credit_card">
                 <span class="mr-auto">Credit Card</span>
            </div>
        </div>
        <button type="button" href="#step3" data-toggle="tab" role="tab"
                class="btn btn-outline-primary prev-step mr-2">
            Voltar ao passo 1
        </button>
            <input type="submit" href="#step3" id="goToStep3" class="btn btn-primary float-right next-step" value="Go to step 3"/>
        </div>
    </form>

当用户选择付款方式并单击“转到第 3 步”时,代码将handlePaymentMethods()通过 ajax 请求转到。在此方法中,如果选择的付款方式是“参考”,则会生成一些参考。此代码“ $reference = $payment->generateRerences();”返回一个数组,其中包含一些供用户用于支付的引用。

我的疑问是如何以 ID 为“#step3form”的形式显示此 $reference 数组中的信息。你知道如何实现吗?

public function handlePaymentMethods(Request $request){
       $request->validate([
            'payment_method' => 'required',
        ]);

        if($request->payment_method == "references"){
            $payment_info = [
                't_value' => '10',
                'o_obs' => ''
            ];

            $payment = new Payment($payment_info);
            $reference = $payment->generateReferences();
        }
        else{
        }
        return response()->json([
            'success' => true,
            'message' => 'success',
            'payment_method' => $request->payment_method,
        ], 200);
    }

向 handlePaymentMehods() 发出 ajax 请求并在返回代码 200 时显示下一个选项卡(步骤 3)的 jQuery 和 ajax 代码:

$("#credit_card_section").hide();
$("#references_section").hide();

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('conferences.storePaymentMethods', compact('id','slug') ) }}',
            data: custom_form.serialize(),
            datatype: 'json',
            success: function (data, textStatus, jqXHR) {
                var result = data;
                if(result['payment_method'] == 'credit_card'){
                    $("#credit_card_section").show();
                    $("#references_section").hide();
                }else{
                    $("#references_section").show();
                    $("#credit_card_section").hide();
                }
                var $active = $('.nav-pills li a.active');
                nextTab($active);
            },
            error: function (data) {
               // show errors
            }
        });
    });

The step3 form has the div "#references_section" that is visible when the payment method selected is references and the values of the $reference array should be presented here:

<div>
    <form method="post" id="step3form" action="">
            {{csrf_field()}}
            <div id="credit_card_section">

            </div>
              <div id="references_section">
        <!-- how to show the values of the $reference array here?-->
            </div>
    </form>
</div>

标签: phpjquerylaravel

解决方案


我认为在这里使用会话变量不是最佳选择。我建议只通过 AJAX 将数据发回。

首先,您需要在隐藏的 div 中创建表单元素。在您将 $reference 数组发送到页面之前,它不会有任何选项。就像是:

<div id="references_section">
    <select class="form-control" name="references" id='references'></select>
</div>

一旦你有了这个,你可以使用 jquery 将新数组附加到这个 select 语句中。就像是:

success: function (newArray) {
    $("#references").empty();

    var list = '<option value="">Please Select</option>';

    $.each(newArray, function(value,key) {
        list += "<option value='" +value + "'>" + key + "</option>";
    });

    $("#references").html(list);
    $("#references").trigger('change');
}

必须进行调整以适应...但是与此类似的操作将通过 jquery 将数组放入表单的 select 语句中。


推荐阅读