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

Question

我有一个页面，上面有两个表单，第一个表单是用户输入姓名、地址等详细信息的地方（没有提交按钮）。第二个表单将购买详细信息提交到贝宝。 我目前正在使用带有 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 中进行了测试，并且没有捕获用户详细信息，用户在没有输入详细信息的情况下被发送到贝宝？ - 编辑：如果我在函数中放置一个 alert()，这会触发，所以它没有记录细节似乎很奇怪。

我用谷歌搜索并搜索了这个网站，发现了类似的问题/答案，但它们都不适用于我的脚本。我什至安装了 firebug 并尝试通过它，但老实说，作为一个 PHP 人，调试 jQuery/javascript 有点令人困惑，看看它呈现给我的所有信息 - 尽管错误窗口总是空的？

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

提前致谢。

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

谁能解释为什么它在 Chrome 中有效但在 Firefox 中无效？我想尝试了解发生了什么（或没有发生），以便再次避免此类情况。

Answer 1

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

<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();
});
  });
});