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

15,872

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/

Share:
15,872
Hansen
Author by

Hansen

Updated on July 16, 2022

Comments

  • Hansen
    Hansen almost 2 years

    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

    • John x
      John x almost 13 years
      does the ajax call success callback executes? or it gives error?
    • John x
      John x almost 13 years
      @Hansen: please update your question and paste the html there