Student Student - 5 months ago 12
jQuery Question

Submit form via AJAX in jQuery

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?

Answer

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