It is not able to auto-post with ajax form submit function

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>

How? A form doesn't submit by itself, it needs someone to submit it, either manually or via script — Yuri, Jun 27 '18 at 11:19
Your `$("#payForm").submit(..);` is an handler for `submit` event. But who is firing that event? — Yuri, Jun 27 '18 at 11:20
I see .Then any functions of js or Ajax can perform the auto submit function ? — evabb, Jun 27 '18 at 11:25
Just do `$('#myform').submit();` https://api.jquery.com/submit/ — Yuri, Jun 27 '18 at 11:38
Sir, would you mind build the sample solution for this case . I seldom work with js — evabb, Jun 27 '18 at 11:46

Yuri · Answer 1 · 2018-06-28T05:46:07.930

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..

`From what I understood, on submit of form-A, you want to prevent it and submit another (hidden) form named PayForm` --> I think you have misunderstood have meaning .The process is : User press Form-A submit button--> post form A and store in DB -->trigger PayForm --> user direct to another PayForm POST URL — evabb, Jun 28 '18 at 01:17
in short , I want the user press `Form-A` and trigger both form .Lastly , the user will process user direct to `Payform` POST URL — evabb, Jun 28 '18 at 01:18
Check edited answer. Variable `payFormDone ` will check whether `payForm` has been already submitted before submitting `myFormA` — Yuri, Jun 28 '18 at 05:49
Now , it can trigger the second form action .But the first form action(storing to DB) is not triggered — evabb, Jun 28 '18 at 05:56
You can't because `myFormA` will reload the page and `payForm` is submitted via ajax, so you need to handle the submit sequence. If `myFormA` get submitted in the middle of your `$.post()` or at the beginning, then you have error — Yuri, Jun 28 '18 at 06:04
The first form action, that of `myFormA` is triggered by clicking on submit button on page — Yuri, Jun 28 '18 at 06:05
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/173941/discussion-between-yuri-and-evabb). — Yuri, Jun 28 '18 at 06:06

It is not able to auto-post with ajax form submit function

1 Answers1