Question

我有一个包含两个表单的页面，第一个表单是用户输入详细信息，例如姓名，地址等。（没有提交按钮。）第二个表单将购买详细信息提交给paypal。我目前正在使用带有onClick事件的paypal表单提交按钮来调用一个函数，该函数通过$ .post将用户详细信息输入我的数据库到php脚本。

HTML：

    <form id="regcust">
    <input type="text" name="fName" id="fName">
    <input type="text" name="lName" id="lName">
    </form>

    <form id="paypal_button_form" action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <input type="image" src="/img/buynow.gif" onClick="registerCustomer()" name="submit">
    </form>

jQuery：

    function registerCustomer() {
        var form = document.getElementById("regcust");
        var fn   = $("input[name='fName']").val();
        var ln   = $("input[name='lName']").val();

        $.post("RegisterCustomer.php", {  
            fName: fn, 
            lName: ln 
        });
    };

Note: I have stripped this right down for clarity.

我在Chrome中构建了网站，一切正常，当用户点击paypal按钮时，详细信息会记录在我的数据库中，并且用户会被发送到PayPal进行付款。但是，我刚刚在Firefox中测试并且没有捕获用户详细信息，用户被发送到PayPal而没有输入详细信息？ - 编辑：如果我在函数中放了一个alert（），这就好了，所以它没有记录细节似乎很奇怪。

我搜索了这个网站并搜索了类似的问题/答案，但它们都没有在我的脚本上运行。我甚至安装了firebug并尝试了这一点，但说实话，作为一个PHP人，调试jQuery / javascript有点令人困惑，看着它呈现给我的所有信息 - 虽然错误窗口总是空的？

任何人都可以为我阐明这一点，或者指出我正确的方向，因为我无法理解它。

提前致谢。

编辑：awl发布的答案解决了我的问题，谢谢;）我确实尝试过投票，但似乎我的代表太低了，不能这样做。

有人能否解释为什么它在Chrome中有效但在Firefox中无效？我想尝试了解发生了什么（或不发生），所以我再次避免这样的情况。

Answer 1

似乎按钮的点击事件和提交表单之间可能存在竞争条件。您可能希望显式链接这些事件，以便它们始终按您想要的顺序出现。此代码提交您的RegisterCustomer，然后只有在完成后，才提交paypal表单。把它写在我的头顶，我不合适：

<form id="regcust">
<input type="text" name="fName" id="fName">
<input type="text" name="lName" id="lName">
</form>

<form id="paypal_button_form" action="https://www.paypal.com/cgi-bin/webscr" method="post">
</form>

<a href="javascript:;" id="buyNow"><img src="/img/buynow.gif"></a>

JS：

$(document).ready(function() {
  $("#buyNow").click(function() {
    var form = $("#paypal_button_form");
    var fn   = $("#fName").val();
    var ln   = $("#lname").val();

    $.post("RegisterCustomer.php", {  
        fName: fn, 
        lName: ln 
    }, function() {
         form.submit()
    });
  });
});

Answer 2

$(document).ready(function() {
  $("#buyNow").click(function() {
    var form = $("#paypal_button_form");
    var fn   = $("#fName").val();
    var ln   = $("#lname").val();

    $.post("RegisterCustomer.php", {  
        fName: fn, 
        lName: ln 
    }).done( function() {
    form.submit();
});
  });
});

$ .post适用于Chrome，但不适用于Firefox

2 个答案: