Help with form submission and AJAX

[mdmartiny]

I am trying to add a contact form to a page. i can't get the script to do anything. When I click on the submit button all it does is sit there no error messages or anything.

If the fields are not filled in then there is supposed to be an error message. If everything is ok then there is supposed to be a success message. 

This is the Jquery code that I am using

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
	<script language="javascript" type="text/javascript" >

	$(function(){
		$("#ContactForm").submit(function(){
			$("#submitf").value='Please wait...';
			
			$.post("/contact.php?send=comments", $("#ContactForm").serialize(),
			function(data){
				if(data.frm_check == 'error'){ 
						$("#message_post").html("<div class='errorMessage'>ERROR: " + data.msg + "!</div>"); 
						document.ContactForm.submitf.value='Resend >>';
						document.ContactForm.submitf.disabled=false;
				} else {
					$("#message_post").html("<div class='successMessage'>Your message has been sent successfully!</div>"); 
					$("#submitf").value='Send >>';
					}
			}, "json");
			
			return false;
			
		});
	});

	</script>

 

 

Here is the contact page that I am also using

<?php
$adminemail = "mail@example.com";
 
if ($_GET['send'] == 'comments'){
 
 $_uname = $_POST['name'];
 $_uemail = $_POST['email'];
 $_comments = stripslashes($_POST['message']);
 
 $email_check = '';
 $return_arr = array();
 
	if($_uname=="" || $_uemail=="" || $_comments==""){
	 	$return_arr["frm_check"] = 'error';
	 	$return_arr["msg"] = "Please fill in all required fields!";
	 } else if(filter_var($_uemail, FILTER_VALIDATE_EMAIL)) {
	 
		 $to = $adminemail;
		 $from = $_uemail;
		 $subject = "New Contact Us Message: " .$_title;
		 $message = $_comments;
		 
		 $headers = "MIME-Version: 1.0\r\n";
		 $headers .= "Content-type: text/html; charset=iso-8859-1\r\n";
		 $headers .= "Content-Transfer-Encoding: 7bit\r\n";
		 $headers .= "From: " . $from . "\r\n";
		 
		@mail($to, $subject, $message, $headers);
	 
	 } else {
	 	$return_arr["frm_check"] = 'error';
	 	$return_arr["msg"] = "Please enter a valid email address!";
	}
 
	echo json_encode($return_arr);
}
 
?> 

This is my form 

textpop-upexpan

<form action='' method='post' name='ContactForm' id='ContactForm' >
                            <fieldset class="info_fieldset">
                                    <input class="textbox" type="text" name="name" value="" placeholder="Name" /><br />
                                    <input class="textbox" type="text" name="email" value="" placeholder="you@email.com" /><br />
                                    <textarea class="textbox2" name="comments" rows="5" cols="25" placeholder="You can say Hi !"></textarea>
                                    <input type='submit' value='Submit' class='myinputbtn' name='submitf' id="submitf">
                                <div id='message_post'></div>
                            </fieldset>
                        </form>

I am trying to learn how to use Jquery so I am not sure what I have going on here or if I am even doing it right.

Edited April 18, 2013 by mdmartiny

[jugesh]

On the form submit event you have to give validation.. If form is validated then only ajax will call