Timing issue concerning using JSONP on a form submit

Question

I'm attempting to use JSONP to push data to server A upon a form submittal on a page from server B.

Here's my JS -

my.submitOrder = function () {

    var scriptTag = document.createElement('SCRIPT');
    scriptTag.src = ServerAUrl + "?" + urlData;
    scriptTag.type = "text/javascript";
    scriptTag.async = 0;

    document.getElementsByTagName('HEAD')[0].appendChild(scriptTag);

};

I'd like to have this js execute when the user submits the form so here's the HTML that I thought would get the job done -

<form action="http://localhost:3348" onsubmit="return my.submitOrder();" >
    <input type="submit" value="submit"  />
</form>

The submit happens fine, the submitOrder function executes, but my call to the ServerAUrl is "canceled" (according to firebug) before it hits server A. Actually, it succeeds about 1 out of 5 times, but there doesn't seem to be a pattern to it. I know something like this is possible since Google Analytics does it. Any ideas?

Answer 1

You did not prevent the submit event, so the form is sent as usual with loading the target page. In the process of unloading, open requests (such as the JSONP script) are canceled.

To prevent the default action of the event, call its preventDefault method (especially when using advanced event registration or just return false from your inline-handler. Currently, you are returning undefined .