Jquery submit a form via .submit() on AJAX success... how?

Question

I'm trying to send all form data to a script via AJAX by binding a click function to the submit button, setting it to return false so it doesn't submit the form yet. Once AJAX is done with success, I'd like to submit the form by doing: $("#myform").submit(); But nothing happens.

Everything works except for $("#customOrderForm").submit();

This is for a Paypal payment. Form data gets stored in a session, users go make they payment, return to the website once they successfully made the payment, form data gets send to customers and company via email.

$("#submit").click(function () {

    var thedata = $("#customOrderForm").serialize();

    $.ajax({
        type: 'POST',
        url: 'buy-custom-session.php',
        cache: false,
        data: thedata,
        beforeSend: function () {
            $('#sessionholder').append('<div class="loading"><img src="loading.gif" alt="loading..." /></div>');
        },
        success: function (data) {
            //$(".loading").detach();
            //$(".error").detach();
            //$('#sessionholder').append(data);
            $("#customOrderForm").submit();
        },
        error: function () {
            $('#sessionholder').append('<p class="error"><strong>Oops!</strong> Try that again in a few moments.</p>');
        }
    });

    return false;

});

HTML FORM

<form id="customOrderForm" action="https://www.paypal.com/cgi-bin/webscr" method="post">

<!-- form fields etc -->

<input type="image" name="submit" id="submit" src="https://www.paypalobjects.com/en_AU/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" />

</form>

No ERRORS in Firebug.

AJAX success executes.

Cheers

Answer 1

Change the name and id of the image-input.

From the jQuery-docs: Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method. Name conflicts can cause confusing failures.

Example : http://jsfiddle.net/doktormolle/XNMEF/