How can submit form data to my server and trigger a PayPal Pay Now button at the same time
===

I am using a PayPal Pay Now button to let users pay for a product. I want to also send some data to my server when that button is clicked. Therefore I am sending those values by jQuery Ajax to my server. Unfortunately this works sometimes, sometimes the page goes to PayPal too quickly for the form values to be sent, and they never get saved.

The jQuery code looks like this

    //...
    function sendUserDetailsByAjax(orderId){

	var name = $("#name").val();
	var email = $("#email").val();
	var arrivalTime = $("#arrivalTime").val();
	
	$.ajax({
		type: "POST",
		url: "/order/updateuser",
		data: { 'orderId': orderId, 'name': name, 'email': email, 'arrivalTime': arrivalTime   },
		success: function(data){
		}
	});	
	$('#payWithPaypal').submit();	
    }
    //...

These are the form fields:

    <input id="arrivalTime" type="text" size="12" class="checkoutInput"/>
    <input id="name" type="text" size="32" class="checkoutInput"/>
    <input id="phone" type="text" size="32" class="checkoutInput"/>

And here is the PayPal form (the ${something} elements are variables being apps:

    <form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" id="payWithPaypal">
      <input type="hidden" name="cmd" value="_xclick" />
      <input type="hidden" name="business" value="${place.payPalEmail}" />
      <input type="hidden" name="item_name" value="My Order" /
      <input type="hidden" name="amount" value="${order.total}" />
      <input type="hidden" name="currency_code" value="AUD" />
      <input type="hidden" name="lc" value="AU" />
      <input type="hidden" name="button_subtype" value="products" />
      <input type="hidden" name="return" value="http://mysite.com/${order.id}"/>
      <input type="hidden" name="cancel_return" value="http:/mysite.com/cancel/${order.id}" />
      <input type="hidden" name="notify_url" value="http://mysite.com?oid=${order.id}" />
      <input type="hidden" name="oid" value="${order.id}" />
      <input type="image" onclick="javascript:sendUserDetailsByAjax('${order.id}');" src="https://www.paypal.com/en_US/i/btn/x-click-but5.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" />
    </form>

Do you have any ideas about how I can make sure the `arrivalTime`, `name` and `email` get sent before the button redirects the page to PayPal.