Question

I am using jQuery 1.7.2 version and I am submitting my form using Ajax like that

$("input#addPostSubmit").click( function(){
    $.ajax({
            //this is the php file that processes the data and send mail
            url: BASE_URL+"post/ajaxcreate",    
            //POST method is used
            type: "POST",
            //pass the data         
            data: $("#addImage").serialize(),       
            //Do not cache the page
            cache: false,
            //success
            success: function (html) {
                         var obj = jQuery.parseJSON(html);          
                    if(obj.Status == 'Success'){
                        $("#error").removeClass('hide');
                        $("#error").addClass('success');
                        $("#error").html(obj.Message);
                        $.fn.colorbox.resize();
                        setTimeout(function(){$.fn.colorbox.close()},5000);
                        window.parent.location.reload();    
                    }
                    if(obj.Status == 'Fail'){
                        $('.add_post_submit').html('<input type="button" id="addPostSubmit" value="Create" />');
                        $("input#addPostSubmit").removeAttr('disabled');
                        $("#error").removeClass('hide');
                        $("#error").addClass('error');
                        error = obj.Message.split(';');
                        html = '<ul>';
                        for(a=0;a<error.length;a++){
                            html += '<li>'+error[a]+'</li>';
                        }
                        html += '</ul>';    
                        $("#error").html(html);
                        $('html').css({overflow: 'hidden'});
                        $.fn.colorbox.resize();
                    }
            }       
    });
}); 

For example, null is not allowed on one of the form field. When server validate form and returns errors I show it, when I again click the button it not worked.

It is working fine but the problem is when ajax request is completed and server returns any form error then submit button did not work.

Answer 1

i’d recommend listening to the submit event on the document, instead of the click handler.

$(document).on('submit','form',function(e){
  e.preventDefault();
  $.ajax({
          //this is the php file that processes the data and send mail
          url: BASE_URL+"post/ajaxcreate",    
          //POST method is used
          type: "POST",
          //pass the data         
          data: $("#addImage").serialize(),       
          //Do not cache the page
          cache: false,
          //success
          success: function (html) {
              // come code
          }       
  });
});