它無法使用ajax表單提交功能自動發布

Question

在此網頁中，我有一個帶有提交按鈕的可見表單，稱為表單A。它具有發布操作。

<form name="payFormCcard" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">

我想做一個不可見的表單，使用隱藏輸入按鈕的方法從表單A提取一些數據，它將自動執行第二個表單payForm並使用JS發布到另一個地方。

現在，它僅執行Form-A並將其發布到DB。

它無法執行第二個表單payForm自動過帳。

~~備注，我沒有為payForm添加提交按鈕，因為我想在填寫第一個表單后自動執行第二個不可見表單。

這是我的代碼：

<form name="A"  action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">  <== first visable form ,Submitting the data into DB
    ........field inputs. ..... 
    <input type="submit" class="btn btn-primary" value="Submit">
</form>

---

 //invisible table
<form name="payForm" method="post" action=" https://test.paydollar.com/b2cDemo/eng/payment/payForm.jsp">
    <input type="hidden" name="merchantId" value="sth">
    <input type="hidden" name="amount" value="</?php echo $input_amount; ?>" >
    <input type="hidden" name="orderRef" value="<?php  date_default_timezone_set("Asia/Taipei");  $date = date('m/d/Y h:i:s a', time()); echo $date ; ?>">
    <input type="hidden" id="currCode" value="sth" >
    <input type="hidden" id="mpsMode" value="sth" >
    <input type="hidden" id="successUrl" value="http://www.yourdomain.com/Success.html">
    <input type="hidden" id="failUrl" value="http://www.yourdomain.com/Fail.html">
    <input type="hidden" id="cancelUrl" value="http://www.yourdomain.com/Cancel.html">
    ...
</form>

<script type='text/javascript'>
/* attach a submit handler to the form */
$("#payForm").submit(function(event) {
    /* stop form from submitting normally */
    event.preventDefault();

    /* get the action attribute from the <form action=""> element */
    var $form = $( this ),
    url = $form.attr( 'action' );

    /* Send the data using post with element id name and name2*/
    var posting = $.post( url, { merchantId: $('#merchantId').val(), amount: $('#amount').val(), orderRef: $('#orderRef').val() , currCode: $('#currCode').val() , mpsMode: $('#mpsMode').val(), successUrl: $('#successUrl').val(), failUrl: $('#failUrl').val(), cancelUrl: $('#cancelUrl').val(), payType: $('#payType').val(), lang: $('#lang').val(), payMethod: $('#payMethod').val(), secureHash: $('#secureHash').val()} );

    /* Alerts the results */
    posting.done(function( data ) {
        alert('success');
        else('gg');
    });
});
</script>

Answer 1

這是一個示例代碼（根據注釋）。

你有你的表格-A

<form name="A" id="myFormA" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">  <== first visable form ,Submitting the data into DB
    ........field inputs. ..... 
    <input type="submit" class="btn btn-primary" value="Submit">
</form>

據我了解，在提交A表格時，您想阻止它並提交另一個名為PayForm的（隱藏）表格

<form name="payForm" id="payForm" method="post" action=" https://test.paydollar.com/b2cDemo/eng/payment/payForm.jsp">
    <input type="hidden" name="merchantId" value="sth">
    <input type="hidden" name="amount" value="<?php echo $input_amount; ?>" >
    <input type="hidden" name="orderRef" value="<?php  date_default_timezone_set("Asia/Taipei");  $date = date('m/d/Y h:i:s a', time()); echo $date ; ?>">
    <input type="hidden" id="currCode" value="sth" >
    <input type="hidden" id="mpsMode" value="sth" >
    <input type="hidden" id="successUrl" value="http://www.yourdomain.com/Success.html">
    <input type="hidden" id="failUrl" value="http://www.yourdomain.com/Fail.html">
    <input type="hidden" id="cancelUrl" value="http://www.yourdomain.com/Cancel.html">
    ...
</form>

您可以使用以下腳本執行此操作：

var payFormDone = false;
$('#myFormA').on('submit', function(e){
    if( !payFormDone ) {
        e.preventDefault(); // THIS WILL TRIGGER THE NEXT CODE
        $('#payForm').submit();
    }
});

$("#payForm").submit(function(event) {
    /* stop form from submitting normally */
    event.preventDefault();

    /* get the action attribute from the <form action=""> element */
    var $form = $( this ),
    url = $form.attr( 'action' );

    /* Send the data using post with element id name and name2*/
    var posting = $.post( url, { 
            merchantId: $('#merchantId').val(), 
            amount: $('#amount').val(), 
            orderRef: $('#orderRef').val(), 
            currCode: $('#currCode').val(), 
            mpsMode: $('#mpsMode').val(), 
            successUrl: $('#successUrl').val(), 
            failUrl: $('#failUrl').val(), 
            cancelUrl: $('#cancelUrl').val(), 
            payType: $('#payType').val(), 
            lang: $('#lang').val(), 
            payMethod: $('#payMethod').val(), 
            secureHash: $('#secureHash').val()
    } );

    /* Alerts the results */
    posting.done(function( data ) {
        alert('success');
        payFormDone = true;
        $('#myFormA').submit();
    });
});

注意：您正在使用$('#payForm')但未在表單上定義ID屬性。