Question

我正在处理一个表单，在该表单上，用户单击了“提交”按钮之后，我正在使用AJAX将数据提交到后端，从而获取了更多的值，然后使用AJAX重定向回了前端。我想通过Jquery提取值并以表单的形式填充。接下来，将值填充回表单，因为我不想通过AJAX提交表单，因为它应该打开iframe 。

表单布局

 <form id="eazzycheckout-payment-form" action="https://*****************************checkout/launch" method="POST">
        <input type="hidden" name="custName" id="custName" value="{{ $first }} {{ $last }}">
        <input type="hidden" id="token" name="token" value="{{ $token}}">
        <input type="hidden" id="amount" name="amount" value="{{ $grossPre }}">
        <input type="hidden" id="orderReference" name="orderReference" value="{{ $quoteRef }}">
        <input type="hidden" id="orderID" name="orderID" value="{{ $quoteRef }}">
        <input type="hidden" id="merchantCode" name="merchantCode" value="*

**********">
        <input type="hidden" id="merchant" name="merchant" value="**********">
        <input type="hidden" id="outletCode" name="outletCode" value="0000000000">

        <div class="card">
            <img class="card-img-top payment" src="{{asset('assets/images-new/mastercard.svg')}}" alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title payment">
                    <button type="submit" id="submit-cg" value="Checkout" style="cursor: pointer;" class="jenga"> Make Payment </button>
                </h5>
            </div>
        </div>
        <!-- End Hidden form-->
    </form>

AJAX可从后端的响应中获取值并填充表单

$.ajax({
    type: 'POST',
    url: 'jengaAPI',
    data: JSON.stringify(type),
    contentType: 'application/json',
    dataType: "json",
    success: function(response) {
        console.log(response);
        //Fetch from response and populate the form values
        var amount = $('#amount').val(response.amount);
        var orderReference = $('#orderReference').val(response.payment_reference);
        var orderID = $('#orderID').val(response.payment_reference);
        //End fetch
    },
    failure: function(errMsg) {
        //alert('Error');
    }
});

Answer 1

请更改此行

  <button type="submit" id="submit-cg" value="Checkout" style="cursor: pointer;" class="jenga"> Make Payment </button>

  <input type="button" id="submit-cg" value="Checkout" style="cursor: pointer;" class="jenga"> Make Payment </button>

当您使用按钮类型“提交”时，它将刷新页面并将html控件设置为其默认值。

从后端获取后以表格形式填充输入值时出现问题

1 个答案: