jquery - $.post 在 Chrome 中有效，但在 Firefox 中无效

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