0

我有一个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$input_amount并amount从FromA

请注意，我没有制作submit按钮。

此表格将发布到 EPayment Gateway 。

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

这是我的想法工作流程：

FormA1）用户在==> 中按下“提交”按钮，信息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();

}

}
?>
4

4 回答 4

0

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 页面。在服务器上，数据被保存到数据库中，服务器向用户打印一条消息并重定向到支付网关（这次通过 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 ?>
于 2018-06-28T08:48:18.657 回答
0

您不应该event.preventDefault();从第二种形式发表评论。目前发生的事情是将其作为默认操作提交到 url。

于 2018-06-28T08:40:26.967 回答
0

内部posting.done()请在调用之前删除/分离onSubmitFormA 的处理程序$('#FormA').submit();

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

编辑：

好的，为什么不在其处理程序中发送带有 AJAX的formA字段并从处理onSubmit程序提交formBposting.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>
于 2018-06-28T08:51:01.663 回答
0

如果我正确理解了这个问题：

<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（开发人员工具） - 网络选项卡。请记住，此代码是草稿编写的，因此可能存在一些错误，但它显示了方法。

于 2018-06-28T11:27:36.907 回答