它無法使用JS和AJAX自動發布

Question

我有一個formA可以發布並保存到MYSQL DB

<form name="A" id="FormA" 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>

我有一個名為PayForm的隱藏表單，該表單使用隱藏的輸入法存儲了一些var，並從FromA獲取$input_amount作為amount

注意，我還沒有點擊“ submit按鈕。

該表格將發布到EPayment網關。

<form name="payForm" id="payForm" method="post" action=" https://test.paydollar.com/b2cDemo/eng/payment/payForm.jsp">
    <input type="hidden" id="merchantId" value="sth">
    <input type="hidden" id="amount" value="<?php echo $input_amount; ?>" >
    <input type="hidden" id="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>

這是我的想法工作流程：

1）用戶按FormA “提交”按鈕==> FormA信息將存儲到DB 。

2）JS正在運行。 強制PayForm自動過PayForm 。 然后，將用戶定向到支付網關。

簡而言之， FormA的“ Submit按鈕FormA觸發兩個表單發布操作。

這是我的JS

  <script type='text/javascript'>
   var payFormDone = false;
    $('#FormA').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;
            $('#FormA').submit();

        });
    });
    </script>

現在，這個想法行不通。 它只能觸發第二種形式的動作。 不會觸發第一個表單操作。至少， FormA的數據尚未保存到DB。

簡而言之 ，

 posting.done(function( data ) {
        alert('success');
        payFormDone = true;
        $('#payFormCcard').submit();
    });

不起作用。我認為！

更新

這就是我將FormA發布到服務器的方式

<?php
// Include config file
require_once 'database.php';
header("Content-Type:text/html; charset=big5");
print_r($_POST);

// Define variables and initialize with empty values
$CName = $Address = $Phone = $amount= $Purpose= $Ticket = "";
$CName_err = $Address_err = $Phone_err = $amount_err = $Purpose_err = $Ticket_err="";

// Processing form data when form is submitted
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Validate name
    $input_CName = trim($_POST["CName"]);
    if (empty($input_CName)) {
        $CName_err = "Please enter a name.";
    } elseif (!filter_var(trim($_POST["CName"]), FILTER_VALIDATE_REGEXP, array("options" => array("regexp" => "/^[a-zA-Z'-.\s ]+$/")))) {
        $CName_err = 'Please enter a valid name.';
    } else {
        $CName = $input_CName;
    }
......
if (empty($CName_err) && empty($Address_err) && empty($amount_err) && empty($Phone_err)) {
        // Prepare an insert statement
        $pdo = Database::connect();
        $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        $sql = "INSERT INTO donation (CName, Address, Phone, Amount ,Ticket, Purpose) VALUES (?, ?, ?, ? ,?, ?)";

        $q = $pdo->prepare($sql);
        $q->execute(array($CName, $Address, $Phone, $amount ,$Ticket ,$Purpose));
        Database::disconnect();

}

}
?>

Answer 1

您不應該評論event.preventDefault(); 從第二種形式開始。 當前發生的是將其提交為默認操作，並將其提交到url。

Answer 2

FormA的提交處理程序實際上阻止了表單的提交。 這就是為什么數據不保存到數據庫的原因。

$('#FormA').on('submit', function(e){
    if( !payFormDone ) {
        e.preventDefault(); // => HERE you are preventing the form from submitting
        $('#payForm').submit();
    }
});

在這里，您位於表單的提交處理程序中，但是對preventDefault的調用停止了FormA的提交，而是觸發了payForm的提交。 參見https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

另外，除了讓您通過javascript觸發之外，我可能會正常發送第一個。 然后，作為第一種形式的POST響應，您可能會向用戶顯示一條消息，例如：“您將被重定向到付款網關。。”以及一個隱藏的表單，其中包含所有字段，這些表單會在x秒后自動觸發。 恕我直言，這種方法更容易，更可靠。

因此，在第一個html頁面中，我將刪除所有javascript代碼並僅保留以下內容：

<form name="A" id="FormA" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
  ........field inputs. ..... 
  <input type="submit" class="btn btn-primary" value="Submit">
</form>

當用戶單擊按鈕時，他將數據提交到POST中的php頁面。 在服務器上，數據被保存到DB，服務器將向用戶顯示一條消息，並重定向到付款網關（這次是通過javascript）。 就像是：

<?php if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  .... save data to db
?>
<form name="payForm" id="payForm" method="post" action=" https://test.paydollar.com/b2cDemo/eng/payment/payForm.jsp">
  <input type="hidden" id="merchantId" value="sth">
  <input type="hidden" id="amount" value="<?php echo $input_amount; ?>" >
  <input type="hidden" id="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">
  <p>You are being redirected to the payment gateway. If the redirect takes too long</p>
  <input type="submit" value"click here">
</form>
<script>
// submits the form after 5 seconds
setTimeout(function(){ $('#payForm').submit(); }, 5000);
</script>
<?php } // this ends the POST block ?>

Answer 3

在posting.done()內部，請在調用$('#FormA').submit();之前刪除/分離FormA的onSubmit處理函數$('#FormA').submit();

posting.done(function( data ) {
     alert('success'); 
     $('#FormA').off('submit');
     $('#FormA').submit();
    });

編輯：

好了，為什么不把與AJAX的備考領域其內部onSubmit處理程序，並提交formB posting.done()處理程序？

<script type='text/javascript'>
  $('#formA').on('submit', function(e){
     e.preventDefault();

    /* Send the data using post with element id name and name2*/
    var posting = $.post( "<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>", { 
            field1: $('#field1').val(), 
            .....
    } );

    /* Alerts the results */
    posting.done(function( data ) {
        alert('success'); 
        $('#FormB').submit();
    }
});
</script>

Answer 4

如果我正確理解了這個問題：

<script type='text/javascript'>
  $('#FormA').on('submit', function(e){
    e.preventDefault();
    $('input[type="submit"]', $(this)).attr('disabled','disabled');
    $.post( $(this).attr('action'), $(this).serialize(), function() {
        var $payForm = $("#payForm");
        $.post( $payForm.attr('action'), $payForm.serialize(), function(data) {
            alert('success');
            // redirect to whereever you want
        });
    });
  });
</script>

更新：

情況2）重定向到付款網關：

<script type='text/javascript'>
  $("#payForm").submit(function(e) {
     alert('redirecting to payment gateway');
  }); 
  $('#FormA').on('submit', function(e){
    e.preventDefault();
    $('input[type="submit"]', $(this)).attr('disabled','disabled');
    $.post( $(this).attr('action'), $(this).serialize(), function() {
        $("#payForm").submit();
    });
  });
</script>

注意：僅用此腳本替換所有腳本，然后在瀏覽器中檢查是否在發布的數據中提出了請求-F12（開發人員工具）-“網絡”選項卡。 請記住，此代碼是從頭開始編寫的，因此可能會出現一些錯誤，但它只是顯示方式。