CODEWITHSUNDEEP
jqueryhtmlajaxform-submit
Yarin
Yarin

Reputation: 183569

Trigger a form submit from within an AJAX callback using jQuery

I want to perform an ajax request right before my form is submitted, and then trigger the form submission from my ajax callback. But when I try to trigger the submit, I get the following error:

Uncaught TypeError: Property 'submit' of object # is not a function

Here is the entire code:

    <form id="myform" method="post" action="http://www.google.com"  >
        <input type="text" name="email" id="test" size="20"  />
        <input id="submit" name="submit" type="submit" value="Submit"  />
    </form>

    <script>

    function do_ajax() {

        var jqxhr = $.get("#", function(){

            // Once the ajax function is complete, I want to submit my form:
            $('#myform').submit();

        });
    }

    $(function() {

        $('#submit').click(function (e) {


            // When the user clicks submit, I want to perform an ajax request first:
            e.preventDefault();
            do_ajax();

        });
    });

</script>

Stumped.

Upvotes: 0

Views: 3874

Answers (3)

Simon Edstr&#246;m
Simon Edstr&#246;m

Reputation: 6619

I think the problem is that the submit button is interfering by its name. I have read something about this, will Google a link.

Just change the name and ID and it will work:

    <input id="submit2" name="submit2" type="submit" value="Submit"  />

Upvotes: 2

Philip
Philip

Reputation: 4592

This should work as your calling the function inside your ajax callback, not tested and may not be the most elegant solution but here goes...

(function($){

    $(function(){

        var evtListner = function(){
            $("#submit").on('click', function(e){
                e.preventDefault();
                do_ajax($(this));
            });
        }

        var do_ajax = function(scope){
             var scope = scope;
             $.get('#', function(){
                 submit_it(scope);
             });
        }

        var submit_it = function(scope){
            scope.submit(function(){
                //
            });
        }

        evtListner();//initial call
    });

})(jQuery);

Upvotes: 0

Adriano Repetti
Adriano Repetti

Reputation: 67090

From the example I don't have really clear what you want to do anyway to handle the submit event:

$("#formId").submit(function() {
  // Do here whatever you want
  return false;
});

And to fire the submit with click on another object (not the submit button).

$("#another").click(function() {
  $('#formId').submit();
});

I suggest you give an ID to your form (a page can have multiple forms) and that you check your line with get("#"). What should it do?

Upvotes: 1

Related Questions