How to use php and jquery to submit a form. This form features progressive enhancement meaning that if the client has javascript disabled the form will still function.

First the form, written in php:

 





	

	0) ? 'Please enter required information' : 'Enter Your Information Below' ?>
	
	
	

		
		

		 
		
		
		

			

			  Name:
			   maxlength="30" name="name" id="name" value="" >
			   >(required)
			

			

			  Email:
			   maxlength="30" name="email" id="email" value="">
			   >(required)
			

			

			  Phone:
			   maxlength="15" name="phone" id="phone" value="">
			   >(required)
			
			
			

			  
			  
			
		
		
		

		 
		

	






0){

		$formErrors = $return_arr;

		if(isset($formErrors['process_check'])){//error occurred processing data
			displaySubmit("Sorry an error occurred, please try again later.");
			exit;
		}

		DisplayForm($_POST, $formErrors);
		
	}else{
		//success! no validation or processing errors
		displaySubmit("Thank you for submitting your data.");
	}
			
}else{
	DisplayForm(null, null); //form not submitted - typically when page is loaded 1st time
}

?>

Next the php script the handles validation and processing of data:

 2;
}

function displaySubmit($message){

$data_posted = <<










 

$message





EOT;
echo $data_posted;

}

?>

The jQuery file to process ajax requests:

$(document).ready(function(){
	
var bSubmitted = false;
	
	$("#name").focus(); //set focus to first input box
	


	$("#contact").submit(function(){  //form submitted
		//disable submit button and display loading gif to prevent multiple posts
		$('input[id=submit]', this).attr('disabled', 'disabled');
		$("#submit").attr("src", "loading-ani.gif");
	
		$.post("process.php", $("#contact").serialize(),
		function(data){
			var valid ='true';	//function level variable to track if all inputs on the form passed validation
			
			if (data.phone_check == 'invalid'){
				valid = 'false'; 
				$("#phone").addClass('missing'); 
				$("#phone_error").removeClass('required_hide');
				$("#phone_error").addClass('required_show');
				$("#phone").focus(); 
			} else {
				$("#phone_error").removeClass('required_show');
				$("#phone_error").addClass('required_hide');
				$("#phone").removeClass('missing'); 
			}
						
			if (data.email_check == 'invalid'){
				valid = 'false'; 
				$("#email_error").removeClass('required_hide');
				$("#email_error").addClass('required_show');
				$("#email").addClass('missing'); 
				$("#email").focus();
			} else {
				$("#email_error").removeClass('required_show');
				$("#email_error").addClass('required_hide');
				$("#email").removeClass('missing'); 
			}
				
			if (data.name_check == 'invalid'){
				valid = 'false'; 
				$("#name_error").removeClass('required_hide');
				$("#name_error").addClass('required_show');
				$("#name").addClass('missing'); 
				$("#name").focus(); 
			} else {
				$("#name_error").removeClass('required_show');
				$("#name_error").addClass('required_hide');
				$("#name").removeClass('missing'); 
			}

			//re-enable submit button
			$("#submit").removeAttr("disabled");
			$("#submit").attr("src", "submit.gif");
				
			if (valid == 'false'){ 	//if the form contains invalid data notify user else display thank you message	
				$("#top_message").html('Please enter required information');
				$("#top_message").addClass('error'); 
			} else  {  //all form data is valid and has been processed
				$("#form").hide();
				$("#top_message").html(' ');
					if (data.process_check == 'invalid'){  //processing error
						$("#spacer").html('Sorry an error occurred, please try again later.');
					}else{
						$("#spacer").html('Thank you for submitting your data.');
					}
			}
				
		}, "json");
		//prevent default post behavior
		bSubmitted = true;
		return false; 
		
		});
	
	//single field validation functions - fired on key up event
	$("#name").keyup(function(){
		if (bSubmitted == true){ //only validate after the form has been submitted
			val  =  $(this).val();
		//	val  = $("input#name").val();
			what = 'name';
			SingleValidate(val, what);
			}
		});
		
	$("#email").keyup(function(){
		if (bSubmitted == true){ //only validate after the form has been submitted
			val  = $(this).val();
			what = 'email';
			SingleValidate(val, what);
			}
		});

	$("#phone").keyup(function(){
		if (bSubmitted == true){ //only validate after the form has been submitted
			val  = $(this).val();
			what = 'phone';
			SingleValidate(val, what);
			}
		});
		
		
});


function SingleValidate(val, what) {
 
var dataString = what + '=' + val + '&single_field=yes';//single field = tell process script to only validate data
var error = what + "_check";

	$.post("process.php", dataString, function(data){
			if (data[error] == 'invalid'){
				$('#' + [what] + '_error').removeClass('required_hide');
				$('#' + [what] + '_error').addClass('required_show');
				$('#' + what).addClass('missing'); 
			}else{
				$('#' + [what] + '_error').removeClass('required_show');
				$('#' + [what] + '_error').addClass('required_hide');
				$('#' + what).removeClass('missing');
			}
		}, "json");
}

Finally, a style sheet to help with the presentation

input.missing {
 /*background-color: #FFFF77;*/
 border: 2px solid #ff0000;
}

div.row {
 clear: both;
 padding-top: 5px;
}

div.row span.label {
 float: left;
 width: 100px;
 text-align: right;
  }

div.row span.input_span {
 width: 235px;
 text-align: left;
 padding-right: 0px;
 padding-left: 45px;

  } 
  
div.row span.submit_span {
 padding-right: 0px;
 padding-left: 145px;

  } 

div.spacer {
 clear: both;
 }

.container{
 width: 425px; 
 background-color: #ccc;
 border: 1px dotted #333;
 padding: 5px 5px 5px 5px; 
 margin: 0px auto;
 }
 
.top_message{ 
 width: 360px; 
 margin: 10px auto;
}
  
.error{
 color: #ff0000;
  }
  
.required_hide{
 color: #ff0000;
 display:none;
} 

.required_show{
 color: #ff0000;
 } 

See the form in action here.
Download