Need help improving my web form which uses JQuery and PHP

webguync · November 12, 2011

I have a form, that used JQuery for some effects and PHP to submit the form. It works fine, but I want to make some improvements. For one, the highlight class is added when you try and submit without filling in the fields which is great,but I would like that class to be removed when you click within a form field after it was added. Another improvement is I would like to add some text when you submit without filling in the fields and then subsequently remove when you click inside a field element. Something like "Please fill in the name field" etc.

Here is my JQuery code.

<script type="text/javascript">
	/* <![CDATA[ */
var J = jQuery.noConflict();

J(document).ready(function() {

//if submit button is clicked
J('#submit').click(function () {		

	//Get the data from all the fields
	var name = J('input[name=name]');
	var email = J('input[name=email]');
	var website = J('input[name=website]');
	var comment = J('textarea[name=comment]');

	//Simple validation to make sure user entered something
	//If error found, add highlight class to the text field
	if (name.val()=='') {
		name.addClass('highlight');
		return false;
	} else {name.removeClass('highlight')};

	if (email.val()=='') {
		email.addClass('highlight');
		return false;
	} else {email.removeClass('highlight')};

	if (website.val()=='') {
		website.addClass('highlight');
		return false;
	} else {website.removeClass('highlight')};

	if (comment.val()=='') {
		comment.addClass('highlight');
		return false;
	} else {comment.removeClass('highlight')};

	//organize the data properly
	var data = 'name=' + name.val() + '&email=' + email.val() + '&website=' + 
	website.val() + '&comment='  + encodeURIComponent(comment.val());

	//disabled all the text fields
	J('.text').attr('disabled','true');

	//show the loading sign
	J('.loading').show();

	//start the ajax
	J.ajax({
		//this is the php file that processes the data and send mail
		url: "process.php",	

		//GET method is used
		type: "GET",

		//pass the data			
		data: data,		

		//Do not cache the page
		cache: false,

		//success
		success: function (html) {				
			//if process.php returned 1/true (send mail success)
			if (html==1) {					
				//hide the form
				J('.form').fadeOut('slow');					

				//show the success message
				J('.done').fadeIn('slow');
				//add height to element

			//if process.php returned 0/false (send mail failed)
			} else alert('Sorry, unexpected error. Please try again later.');				
		}		
	});

	//cancel the submit button default behaviours
	return false;
});	
});	
/* ]]> */
</script>

here is the php portion

<?php

//Retrieve form data. 
//GET - user submitted data using AJAX
//POST - in case user does not support javascript, we'll use POST instead
$name = ($_GET['name']) ? $_GET['name'] : $_POST['name'];
$email = ($_GET['email']) ?$_GET['email'] : $_POST['email'];
$website = ($_GET['website']) ?$_GET['website'] : $_POST['website'];
$comment = ($_GET['comment']) ?$_GET['comment'] : $_POST['comment'];

//flag to indicate which method it uses. If POST set it to 1
if ($_POST) $post=1;

//Simple server side validation for POST data, of course, you should validate the email
if (!$name) $errors[count($errors)] = 'Please enter your name.';
if (!$email) $errors[count($errors)] = 'Please enter your email.'; 
if (!$comment) $errors[count($errors)] = 'Please enter your comment.'; 

//if the errors array is empty, send the mail
if (!$errors) {

//recipient
$to = 'Bruce Gilbert <webguync@gmail.com>';	
//sender
$from = $name . ' <' . $email . '>';

//subject and the html message
$subject = 'Comment from ' . $name;	
$message = '
<!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></head>
<body>
<table>
	<tr><td>Name</td><td>' . $name . '</td></tr>
	<tr><td>Email</td><td>' . $email . '</td></tr>
	<tr><td>Website</td><td>' . $website . '</td></tr>
	<tr><td>Comment</td><td>' . nl2br($comment) . '</td></tr>
</table>
</body>
</html>';

//send the mail
$result = sendmail($to, $subject, $message, $from);

//if POST was used, display the message straight away
if ($_POST) {
	if ($result) echo 'Thank you! I have received your message.';
	else echo 'Sorry, unexpected error. Please try again later';

//else if GET was used, return the boolean value so that 
//ajax script can react accordingly
//1 means success, 0 means failed
} else {
	echo $result;	
}

//if the errors array has values
} else {
//display the errors message
for ($i=0; $i<count($errors); $i++) echo $errors[$i] . '<br/>';
echo '<a href="index.php">Back</a>';
exit;
}


//Simple mail function with HTML header
function sendmail($to, $subject, $message, $from) {
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=iso-8859-1" . "\r\n";
$headers .= 'From: ' . $from . "\r\n";

$result = mail($to,$subject,$message,$headers);

if ($result) {return 1;}
else {return 0;}
}

?>

essentially I just need to remove the class highlight after it has been applied when a user clicks in a form field and also add some text indicating which fields were missed or no filled in properly.

Sign In

Need help improving my web form which uses JQuery and PHP

Recommended Posts

webguync

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information