jQuery and php Progressive Form Example


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:







Progressive Enhancement


   

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 = <<

Progressive Enhancement






$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


5 responses to “jQuery and php Progressive Form Example”

  1. I admire what you have done here. I love the part where you say you are doing this to give back but I would assume by all the comments that is working for you as well. Do you have any more info on this?

  2. I simply enrolled in your newsletter and may definitely keep coming back for further. You can do the identical for my blog when you buy the chance!

  3. Thank you for this kind of a excellent blog. In which else could one get this kind of data written in this kind of an incite full way? I have a presentation that I am just now working on, and I had been trying to find these kinds of information.