Hey guys,

I have a bit of a problem with implementing an ajax based contact form. I am sure I forgot something...does this almost look right? What do you think the problem is, the form still submits but the page refreshes instead of just sliding the form up and fading in my success message. Any help would be greatly appreciated.

$(document).ready(function() {

	//Define URL to PHP mail file
	var url = "contact.php";
	
	//Activate jQuery form validation
	$("#contact").validate({
	
		submitHandler: function() {
		
			//Define data string
			var datastring = $("#contact").serialize();
			
			//Submit form
			$.ajax({
				type: "POST",
				url: url,
				data: datastring,
				success: function(){
					$('#contact').slideUp();
					$('#process_message').fadeIn();
				}
			});
		}
	
	});
			
});

Does your form tag perhaps contain action="contact.php" ?

No, I made sure to keep that blank: action=""

The HTML is below:

<form name="contact" method="post" action="" id="contact">

<fieldset>

<label>Your Name:</label>

   <input type="text" id="fullname" class="text_field" name="fullname" size="19">

<label>Your Email:</label>

   <input type="text" id="email" class="text_field" name="email" size="19">

<label>Your Message:</label>

   <textarea rows="9" id="inquiry" class="text_area" name="inquiry" cols="30"></textarea>

   <input type="submit" class="submit_btn" value="submit" name="submit">

</fieldset>

</form>

                        <div id="process_message">
                            <h3>Thank you for your inquiry!</h3>
                        </div>

Does your form tag perhaps contain action="contact.php" ?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.