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

时间:2018-06-27 10:43:33

标签: javascript php ajax html-form html-post

在此网页中,我有一个带有提交按钮的可见表单,称为表单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>

1 个答案:

答案 0 :(得分:0)

这是示例代码(根据注释)。

您有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属性。