$.post works in Chrome but not Firefox

Question

I have a page with two forms on, the first form is where users enter details such as name, address etc. (no submit button.) The second form submits the purchase details to paypal. I am currently using the paypal form submit button with an onClick event to call a function which enters the users details into my database via $.post to a php script.

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

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

I built the site in Chrome and everything works fine, when the user hits the paypal button, the details are recorded in my database and the user is sent to paypal to make payment. However, I just tested in Firefox and the users details are not captured, the user is sent to paypal without the details being entered? - Edit: if i put an alert() inside the function, this fires ok so it seems odd that it's not recording the details.

I have googled and searched this site and have found similar problems/answers but none of them work on my scripts. I even installed firebug and tried through that but to be honest as a PHP guy, debugging jQuery/javascript is a bit confusing looking at all the info it is presenting to me - although the error window is always empty?

Can anyone shed any light on this for me, or point me in the right direction please as I can't get my head around it.

Thanks in advance.

Edit: The answer posted by awl fixed my problem, thanks ;) I did try and vote his answer but it seems my rep is too low to do so.

Can anyone shed any light as to why it worked in Chrome but not in Firefox? I'd like to try and understand what happened (or not) so I avoid situations like this again.

Answer 1

It seems like there may be a race condition between the click event of the button and submitting the form. You might want to explicitly chain those events so that they always occur in the order you want. This code submits your RegisterCustomer and then only after it finishes, submits the paypal form. Wrote this off the top of my head, my not be proper:

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