jQuery and php Progressive Form Example

Posted: December 22nd, 2009 | Author: jriggs | Filed under: php | Tags: jquery, php, progressive enhancement | No Comments »

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:

 
<?php
function DisplayForm($values, $errors){
?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Progressive Enhancement</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="progressive.js"></script> 
</head>
<body>
<div id="contact_form">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" id="contact">
 
	<div id="top_message" class="top_message">
	<?php echo (count($errors)>0) ? '<span class="required_show">Please enter required information</span>' : 'Enter Your Information Below' ?>
	</div>
 
	<div class="container">
 
		<div class="spacer" id="spacer">
		&nbsp;
		</div>
 
		<div id="form">
			<div class="row">
			  <span class="label">Name:</span>
			  <span class="input_span"><input size="30" <?php echo (ISSET($errors['name_check'])) ? 'class="missing"' : '' ?> maxlength="30" name="name" id="name" value="<?php echo htmlentities($values['name']) ?>" ></span>
			  <span id="name_error" <?php echo (ISSET($errors['name_check'])) ? 'class="required_show"' : 'class="required_hide"' ?> >(required)</span>
			</div>
 
			<div class="row">
			  <span class="label">Email:</span>
			  <span class="input_span"><input size="30" <?php echo (ISSET($errors['email_check'])) ? 'class="missing"' : '' ?> maxlength="30" name="email" id="email" value="<?php echo htmlentities($values['email']) ?>"></span>
			  <span id="email_error" <?php echo (ISSET($errors['email_check'])) ? 'class="required_show"' : 'class="required_hide"' ?> >(required)</span>
			</div>
 
			<div class="row">
			  <span class="label">Phone:</span>
			  <span class="input_span"><input size="15" <?php echo (ISSET($errors['phone_check'])) ? 'class="missing"' : '' ?> maxlength="15" name="phone" id="phone" value="<?php echo htmlentities($values['phone']) ?>"></span>
			  <span id="phone_error"  <?php echo (ISSET($errors['phone_check'])) ? 'class="required_show"' : 'class="required_hide"' ?> >(required)</span>
			</div>
 
			<div class="row">
			  <span class="submit_span">
			  <input type="image" id="submit" value="submit" name="submit" src="submit.gif" alt="Submit" /></span>
			</div>
		</div>
 
		<div class="spacer" id="spacer">
		&nbsp;
		</div>
 
	</div>
 
</form>
</div>
</body>
</html>
 
<?php
}
 
if ($_SERVER['REQUEST_METHOD'] == 'POST'){
	//$formValues = $_POST;
 
	include ('process.php');
 
	if (count($return_arr)>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:

<?php
//requires php 5.2 or greater
//sleep(2);  // use to mimic delayed response from server
 
if (empty($_POST)){exit;}
 
$return_arr = array();
 
if (isset($_POST['email']) && !isEmail(trim($_POST['email']))){ //validate value posted from email input box
	$return_arr["email_check"] = 'invalid';
}
 
if (isset($_POST['name']) && !isName(trim($_POST['name']))){
	$return_arr["name_check"] = 'invalid';
}
 
if (isset($_POST['phone']) && !isPhone(trim($_POST['phone']))){
	$return_arr["phone_check"] = 'invalid';
}
 
if (count($return_arr) == 0 && !isset($_POST['single_field'])){	//if no validation errors try to process the data and not single field flag set
 
	$process_errors = processData($_POST);
 
	if (!$process_errors){ //mail function returns 1
		$return_arr["process_check"] = 'invalid';
	}
}
 
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest')){
		//data posted using jquery framework
		echo json_encode($return_arr);
 
	}else{
		//data posted using traditional form post
		return $return_arr;
}
 
function processData($formValues){
 
  $subject = "Contact Information Submitted";
  $message = 'Name: ' . $formValues['name']."\r\n" ;
  $message .= 'Email: ' . $formValues['email']."\r\n" ;
  $message .= 'Phone: ' . $formValues['phone']."\r\n" ;
 
//ini_set("SMTP","smtp.example.com"); //if you are using an smtp server add it here
//return mail("me@example.com", "Subject: $subject", $message, "From: contact-form@example.com");
//return 0; //test fail use this if you dont want to actually send an email while testing
return 1; //test success
}
 
 
//validation functions
function isEmail($email){
	return(preg_match("/^[-_.[:alnum:]]+@((([[:alnum:]]|[[:alnum:]][[:alnum:]-]*[[:alnum:]])\.)+(ad|ae|aero|af|ag|ai|al|am|an|ao|aq|ar|arpa|as|at|au|aw|az|ba|bb|bd|be|bf|bg|bh|bi|biz|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|com|coop|cr|cs|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|edu|ee|eg|eh|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gh|gi|gl|gm|gn|gov|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|in|info|int|io|iq|ir|is|it|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|mg|mh|mil|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|museum|mv|mw|mx|my|mz|na|name|nc|ne|net|nf|ng|ni|nl|no|np|nr|nt|nu|nz|om|org|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|pro|ps|pt|pw|py|qa|re|ro|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|um|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw)$|(([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5])\.){3}([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5]))$/i"
			,$email));
}
 
function isPhone($phone){
	return(preg_match( "/(\d)?(\s|-)?(\()?(\d){3}(\))?(\s|-|\.)?(\d){3}(\s|-|\.)?(\d){4}$/"
			,$phone));
}
 
function isName($name){
	return strlen($name) > 2;
}
 
function displaySubmit($message){
 
$data_posted = <<<EOT
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Progressive Enhancement</title>
<meta content="" name="description"/>
<meta content="" name="keywords"/>
<link media="screen" type="text/css" href="style.css" rel="stylesheet">
</link>
</head>
<body>
<div id="contact_form">
<form id="contact">
<div id="top_message" class="top_message error"> </div>
<div class="container">
<div id="spacer" class="spacer">$message</div>
</div>
</form>
</div>
</body>
</html>
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('&nbsp;');
					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

Address Standardization & Verification with USPS web tools and PHP

Posted: October 27th, 2009 | Author: jriggs | Filed under: php | Tags: address, php, standard, usps, web tools, zip code | No Comments »

Before using this code you will need to sign up for an account with USPS webtools here.

Class, save as ‘usps_address_class.php’

 
<?php
 
class usps {
 
		public $account = 'xxxxxxx'; //you need to register for this
		public $url = 'http://production.shippingapis.com/ShippingAPI.dll';
		public $address1, $address2, $city, $state, $zip;
		public $ship_address1, $ship_address2, $ship_city, $ship_state, $ship_zip;
 
	function toXML() {
		$xml = ' <AddressValidateRequest USERID="' . $this->account . '"><Address ID="1">';
		$xml .= '<Address1>' . $this->address1 . '</Address1>';
		$xml .= '<Address2>' . $this->address2 . '</Address2>';
		$xml .= '<City>' . $this->city . '</City>';
		$xml .= '<State>' . $this->state . '</State>';
		$xml .= '<Zip5>' . $this->zip . '</Zip5>';
		$xml .= '<Zip4></Zip4></Address>';
 
		if ($this->ship_address2 <> ''){
			//shipping address
			$xml .= '<Address ID="2">';
			$xml .= '<Address1>' . $this->ship_address1 . '</Address1>';
			$xml .= '<Address2>' . $this->ship_address2 . '</Address2>';
			$xml .= '<City>' . $this->ship_city . '</City>';
			$xml .= '<State>' . $this->ship_state . '</State>';
			$xml .= '<Zip5>' . $this->ship_zip . '</Zip5>';
			$xml .= '<Zip4></Zip4></Address>';
			}
 
		$xml .= '</AddressValidateRequest>';
 
     return $xml;
     }
 
	function submit_request() {
 
		$ch = curl_init($this->url);
		curl_setopt($ch, CURLOPT_POST, 1);
		curl_setopt($ch, CURLOPT_POSTFIELDS, "API=Verify&XML=" . $this->toXML());
		curl_setopt($ch, CURLOPT_TIMEOUT, 60);
		curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
		//curl_setopt($ch, CURLOPT_SSL_VERIFYPEER,false);
 
		$result = curl_exec($ch);
		$error = curl_error($ch);
 
		if(empty($error)) {
			return $result;
		}else{
			die(curl_error($ch));
		}
	}
}
 
?>

And a sample page accessing it:

 
<?php
 
 
require("usps_address_class.php");
$uspsRequest = new usps(); //class instantiation
$uspsRequest->address1 = 'suite 321';
$uspsRequest->address2 = '1600 Pennsylvania Ave NW';
$uspsRequest->city = 'Washington';
$uspsRequest->state = 'DC';
$uspsRequest->zip = '20500';
/*
//optional second address
$uspsRequest->ship_address1 = '';
$uspsRequest->ship_address2 = '';
$uspsRequest->ship_city = '';
$uspsRequest->ship_state = '';
$uspsRequest->ship_zip = '';
*/
 
$result = $uspsRequest->submit_request();
 
if (!empty($result)){
		$xml = new SimpleXMLElement($result);
	}else{
		die;
	}
 
 
if(isset($xml->Address[0]->Error)) { echo ' Error Address 1';}
if(isset($xml->Address[1]->Error)) { echo ' Error Address 2';}
 
echo $xml->Address[0]->Address2 . ' ' . $xml->Address[0]->Address1 ;
echo '<br />';
echo $xml->Address[0]->City. ' ' . $xml->Address[0]->State  . ' ' . $xml->Address[0]->Zip5;
echo '<br />';
echo $xml->Address[1]->Address2 . ' ' . $xml->Address[1]->Address1 ;
echo '<br />';
echo $xml->Address[1]->City. ' ' . $xml->Address[1]->State  . ' ' . $xml->Address[1]->Zip5;
 
?>

php: Create Url Safe Encrypted String

Posted: August 6th, 2009 | Author: jriggs | Filed under: php | Tags: encrypt, php, string | 1 Comment »

The following code represents an easy way to create an encrypted string that can be passed in an URL. While this method is adequate for email addresses, user names, and the like – it should not be used to encrypt mission-critical info or personal data such as Social Security numbers or credit card information.

Also, you will need to have the ‘mcrypt’ module enabled. You can do this by opening your php.ini file and removing the ‘;’ just before ‘extension=php_mcrypt.dll’.

<?php
 
$cc=mencrypt("This is the string to be encrypted","key-change-this");
 
 
echo $cc.'<br />';
$dd=mdecrypt($cc,"key-change-this");
echo $dd.'<br />';
 
//encrypted value passed in url ie:
//http://yoursite.com/crypted.php?id=encrypted_string
if (isset($_GET["id"])){
$ee=$_GET["id"];
echo $ee.'<br />';
echo mdecrypt($ee,"key-change-this");
}
 
function mencrypt($input,$key){
$key = substr(md5($key),0,24);
$td = mcrypt_module_open ('tripledes', '', 'ecb', '');
$iv = mcrypt_create_iv (mcrypt_enc_get_iv_size ($td), MCRYPT_RAND);
mcrypt_generic_init ($td, $key, $iv);
$encrypted_data = mcrypt_generic ($td, $input);
mcrypt_generic_deinit ($td);
mcrypt_module_close ($td);
return trim(chop(url_base64_encode($encrypted_data)));
}
 
function mdecrypt($input,$key){
$input = trim(chop(url_base64_decode($input)));
$td = mcrypt_module_open ('tripledes', '', 'ecb', '');
$key = substr(md5($key),0,24);
$iv = mcrypt_create_iv (mcrypt_enc_get_iv_size ($td), MCRYPT_RAND);
mcrypt_generic_init ($td, $key, $iv);
$decrypted_data = mdecrypt_generic ($td, $input);
mcrypt_generic_deinit ($td);
mcrypt_module_close ($td);
return trim(chop($decrypted_data));
}
 
function url_base64_encode($str){
return strtr(base64_encode($str),
array(
'+' => '.',
'=' => '-',
'/' => '~'
)
);
}
 
function url_base64_decode($str){
return base64_decode(strtr($str,
array(
'.' => '+',
'-' => '=',
'~' => '/'
)
));
}
?>

End Code.

Create Blank Page for Wordpress Blog Using Your Theme Template

Posted: July 8th, 2009 | Author: jriggs | Filed under: php, wordpress | 5 Comments »

There may come a time when you need to create a blank page on your Wordpress site that still uses your template’s header, footer and sidebar. For example, if you incorporate your own custom search from google, you will need to specify a landing page where the search results will be displayed.

You could use Wordpress to create a new page, but this has some problems.

Wordpress tends to add code to the page the you don’t need or want
You will need to recreate this file whenever you switch themes or upgrade.
You cannot easily control where this file is created.

To avoid these problems we can use some built-in functions to display a blank page that uses your template and gives you greater control of the page’s content.

First, create a new file in the root directory of your blog. Name it whatever makes sense to you but make sure to give it the ‘.php’ extension. Copy the following into the file you have just created:

<?php
define('WP_USE_THEMES', false);
require('wp-blog-header.php');
get_header();
get_sidebar();
?>

<p>Hello!</p>

<?php
get_footer();
?>

You can see an example of this page here – http://joe-riggs.com/blog/blank.php. You can add any valid html or javascript to the section between the php tags and will be displayed. If you don’t want to display the header, sidebar or footer you can simply comment out or remove that particular line – ie : delete entire “get_sidebar();” line to remove the sidebar.

Joe Riggs Bloggs

simple man/complex world

jQuery and php Progressive Form Example

Address Standardization & Verification with USPS web tools and PHP

php: Create Url Safe Encrypted String

Create Blank Page for Wordpress Blog Using Your Theme Template

Recent Posts

Blogroll