Question

I have a form that has an onsubmit function call that attempts to add a few conversion pixels to the page using .append().

The form submit is firing and redirecting the user off the page before the pixels get a chance to fire (shows as a cancelled request in chrome network debugger).

I have tried a few things with setTimeout() etc, but I can’t seem to get anything working.

I know I could use an onclick event combined with a check for enter key, then submit the form on a setTimeout call. However, this seems somewhat hacky.

Also, I do not have access to the page which the form is submitted to. Adding the pixels to this page is not possible.

Is there any better method?

Answer 1

I think the best option to track conversion is to request these pixels from the page displayed after your form has been submitted. But if you have no control over that page, here goes:

$('form').submit( function(e){
    e.preventDefault(); // do not submit the form just yet
    var $t = $(this), 
        trackingUrl = 'http://placekitten.com/20/10'; 
        $('<img />')
            .on('load', function(){ // when the image loads...
                $t.unbind('submit')  // ...unbind the event listener preventing an endless loop
               .submit() // and submit the form
        }).attr('src', trackingUrl );
});

Edit: you should also add some precautions (for example onerror event) in case of the tracking image failing to load, otherwise the form won’t get submitted at all.