它无法使用ajax表单提交功能自动发布

Question

In this webpage , I have a visible form with a submit button ,called form A.It has a post action.

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

I want to do an invisible form that extract some of the data from form-A , with the method of hidden input button .It will automatically execute the second form called payForm and post to the another place with the JS.

Now , it only execute the form-A and post to the DB.

It cannot do the second form - payForm auto posting .

~~Remark , I didn't add the submit button for payForm because I want to execute the second invisible form automatically after filling the first form .

Here is my code:

<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

This is a sample code (according to comments).

You have your form-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>

From what I understood, on submit of form-A, you want to prevent it and submit another (hidden) form named 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>

You can do this with the following script:

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();
    });
});

NOTE: you were using $('#payForm') but the ID attribute was not defined on the form..