Forums

Sumeet Chawla

Am having a very silly problem with Ajax Form Submission after validation of the form is complete... when I remove the ajax form submission, the email works fine, but when i do it, it doesn't :|
Here is a live example of my form :arrow: Contact Form


$(function() {
   			 //find all form with class jqtransform and apply the plugin
   			$('#contactForm').validate({
   				submitHandler: function(form){
           				$(form).ajaxSubmit({
		               		 success: function() {
								$('#contactForm').slideUp(1000);
             		  			$('#page-wrap').append(\"<h1 class='thanks'>Thanks, message sent successfully!<br/> We will get back to you as soon as possible.</h1>\");
             		  			return false;
 		             		}
 		         	 });
 	        	}
     	   });
});

The live example works fine and displays a thank you message but the actual email doesn't go :(

Sumeet Chawla

no one? :|

Sumeet Chawla

Hello friends,
I was having some problem in validating and submitting the form via AJAX as mentioned above, hence I got it working by setting the options for the ajaxForm() method. In the 'beforeSubmit' option I checked for the validation of the code and in the success option I just printed the thank you message..


	$(function() {
    		var options = { 
       				beforeSubmit:  	function(){
        				return $('#contactForm').validate().form();
        			},
        			success:		function(){
        				$('#contactForm').slideUp(1000);
             		   	$('#page-wrap').append(\"<h1 class='thanks'>Thanks, message sent successfully! We will get back to you as soon as possible.</h1>\");
        			}
 
        			// other available options: 
        			//url:       url         // override for form's 'action' attribute 
        			//type:      type        // 'get' or 'post', override for form's 'method' attribute 
        			//dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
        			//clearForm: true        // clear all form fields after successful submit 
        			//resetForm: true        // reset the form after successful submit 
 			        // $.ajax options can be used here too, for example: 
 			       //timeout:   3000 
 		   }; 
 		   $('#contactForm').ajaxForm(options);
 		   $('#contactForm').validate();  			
		});

Hugo

So the problem here is the e-mail not going out? Could you post some PHP?

Sumeet Chawla

Hello hugo,
Well, the php code works just fine, but the problem I was facing was that I was unable to submit the form using AJAX, when I would call it from the call back function of the validation method. Just like Chris did it in one of his form tutorials. But I solved it by setting the options parameter of the ajaxForm() method, and its now working fine :)

treehouse : what would you like to learn today?

Forums

Problem with Validating and Ajax Submission