时间戳

首页 > 解决方案 > 从后端获取后在表单中填充输入值的问题

jquery - 从后端获取后在表单中填充输入值的问题

问题描述

我正在开发一个表单，在用户点击提交按钮后，我使用 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');
    }
});

标签： jqueryajax

解决方案

请更改此行

  <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 控件设置为其默认值。

推荐阅读