简而言之，

Question

我有一个formA发布并保存到MYSQL数据库

<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的隐藏表单，该表单使用隐藏的输入法存储了一些变量，并从$input_amount获得amount作为FromA

请注意，我没有按下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自动发布。然后，将用户定向到支付网关。

简而言之，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中的数据尚未保存到数据库。

简而言之，

 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()内部，请在调用onSubmit

之前为FormA删除/分离$('#FormA').submit();处理程序。

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

编辑：

好吧，为什么不在其onSubmit处理程序中发送带有AJAX的 formA 字段，并从posting.done()处理程序提交 formB ？

<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（开发人员工具）-“网络”标签。请记住，此代码是从头开始编写的，因此可能会出现一些错误，但它只是显示方式。

它无法使用JS和AJAX自动发布

简而言之，

更新

4 个答案:

编辑：