Submit form via AJAX in jQuery

Question

I am using following jQuery code to submit a form via AJAX.

jQuery('form.AjaxForm').submit( function() {            
        $.ajax({
            url     : $(this).attr('action'),
            type    : $(this).attr('method'),
            dataType: 'json',
            data    : $(this).serialize(),
            success : function( data ) {
                        alert('Submitted')
                      },
            error   : function( xhr, err ) {
                        alert(''Error);     
                      }
        });    
        return false;
    });

Code is working perfectly with no ajax. But does not work if I load form via ajax. I think it is because of loading form via ajax after JavaScript load.

Any solution?

Ehm ... go and learn how it works ? No, really, if you first bind event to all form with AjaxForm class and then load another form with this class (Without binding submit event), it will not work (That is really strange :-) ) — SergeS
– SergeS, Commented Mar 4, 2012 at 18:50

adeneo · Accepted Answer · 2012-03-04 18:58:07Z

43

If using jQuery 1.7+ you could try using .on() to delegate the event and bind to all future forms with the same class. Try finding the closest parent that is not inserted dynamicly instead of $(document).

$(document).on('submit', 'form.AjaxForm', function() {            
        $.ajax({
            url     : $(this).attr('action'),
            type    : $(this).attr('method'),
            dataType: 'json',
            data    : $(this).serialize(),
            success : function( data ) {
                         alert('Submitted');
            },
            error   : function( xhr, err ) {
                         alert('Error');     
            }
        });    
        return false;
    });

edited Mar 4, 2012 at 18:58

answered Mar 4, 2012 at 18:51

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

Comments

charlietfl · Accepted Answer · 2012-03-04 18:58:14Z

You can't attach handlers directly to html that doesn't exist

There are 2 ways to handle it.

Bind the handlers within success callback of ajax.

    $(formParentSelector).load(formFileUrl, function() {
        /* within this success callback the new html exists and can run code*/
        AjaxForm();
    });

function    AjaxForm(){
    jQuery('form.AjaxForm').submit( function() {            
        $.ajax({
            url     : $(this).attr('action'),
            type    : $(this).attr('method'),
            dataType: 'json',
            data    : $(this).serialize(),
            success : function( data ) {
                        alert('Submitted');
                      },
            error   : function( xhr, err ) {
                        alert('Error');     
                      }
        });    

                                             })
 }

The other way is to delegate the handler to a higher level in the document so it is avalibale for future matching elements

 jQuery(document).on('submit','form.AjaxForm').submit( function() {            
        $.ajax({
            url     : $(this).attr('action'),
            type    : $(this).attr('method'),
            dataType: 'json',
            data    : $(this).serialize(),
            success : function( data ) {
                        alert('Submitted');
                      },
            error   : function( xhr, err ) {
                        alert('Error');     
                      }
        });    

                                             })

Collectives™ on Stack Overflow

Submit form via AJAX in jQuery

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related