Trigger a form submit from within an AJAX callback using jQuery

Question

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.

have you tried logging $("#submit") to console to see if it actually contains the form? — gpasci
– gpasci, Commented Mar 20, 2012 at 0:06

Yarin · Accepted Answer · 2012-03-20 00:08:29Z

2

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"  />

edited Mar 20, 2012 at 0:08

Yarin

186k156 gold badges414 silver badges527 bronze badges

answered Mar 19, 2012 at 23:37

Simon Edström

6,6178 gold badges34 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Simon Edström Over a year ago

Hm, you don't get rid off the error? I got exactly the same error as you in this version: jsfiddle.net/vW322/1 but when i changed the name of the submit button it works jsfiddle.net/vW322/2 (But you cannot post to Google inside jsfiddle so it will apper another message)

Yarin Over a year ago

SON OF A BITCH- that's 4 hours of life I won't get back. Thank you Simon you're a gentleman and a scholar!

Adriano Repetti · Accepted Answer · 2012-03-19 23:36:05Z

1

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?

answered Mar 19, 2012 at 23:36

Adriano Repetti

67.5k20 gold badges144 silver badges215 bronze badges

1 Comment

Yarin Over a year ago

Adriano- these suggestions don't solve the problem. My code is simplified for example's sake- See my edits I've commented the code to make the purpose clear: Perform an AJAX function before the form is submitted.

Philip · Accepted Answer · 2012-03-20 00:08:17Z

0

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);

edited Mar 20, 2012 at 0:08

answered Mar 19, 2012 at 23:52

Philip

4,5822 gold badges22 silver badges28 bronze badges

1 Comment

Yarin Over a year ago

Thanks, but my brain can only process 3 levels of nested functions. ;)

Collectives™ on Stack Overflow

Trigger a form submit from within an AJAX callback using jQuery

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related