Tutorials

Create a Ajax based Form Submission with jQuery

Written by Kevin Liew on 01 Apr 2009
331,084 Views • Shares
312 comments

AJAX

AJAX has changed the world of web development. Look at digg, facebook and gmail, thery are good examples to show the capability of AJAX. AJAX can create a highly responsive web interface and increase the user experience.

AJAX is abbrieviated from Asynchrounous javascript and XML. It's not a new technology, but the implementation of a group of technologies to achieve a seamless interaction between client and server.

Typically, xhtml and css to present the information, javascript is used to handle user interactions, and a server side language to perform the users' requests (and normally return data in XML format, in this tutorial, we won't do that), and it all is happening in the background using the Javascript XMLHttpRequest. Javascript plays a main role tie all these technologies together and create the asynchronous interaction between client ans server.

Advantages:
  • Reduce connections and bandwidth to the server, images, scripts, stylesheets only need to be downloaded once
  • Reduce loading timew. User doesnt have to load pages again and again, it all happens in a same page!
  • Increase responsiveness and end user experiences.
Usability Guidelines:
  • Always provide feedback to user. Let user know the server is processing the request. Indicate that using message or loading icon.
  • Prepare a plan to those users without Javascript support.
Advertisement

Introduction

So, you know about the goodness of AJAX. Let's learn a simple way to implement it.

In this tutorial, we will learn form submission using jQuery without navigate out from the page. It accepts user input, processes it and sends it to a php file called "process.php". The PHP script will send a notification email to the recipient. Of course, in case browser couldn't support javascript/XMLHttpRequest, we have a second plan ready, the form will submit the data using the normal form submission.

How do we do that? Easy, we specified POST and ACTION attributes in the FORM element, if browsers couldn't support it, that will submit the form straight away. If the browsers could support it, the javascript will cancel the submit button default behaviour. And we need to code the PHP script to support both GET and POST methods and produce the result accordingly.

1. HTML

In this sample, I'll keep everything as simple as possible. This is how it looks like

<div class="block">
<div class="done">
<b>Thank you !</b> We have received your message. 
</div>
	<div class="form">
	<form method="post" action="process.php">
	<div class="element">
		<label>Name</label>
		<input type="text" name="name" class="text" />
	</div>
	<div class="element">
		<label>Email</label>
		<input type="text" name="email" class="text" />
	</div>
	<div class="element">
		<label>Website</label>
		<input type="text" name="website" class="text" />
	</div>
	<div class="element">
		<label>Comment</label>
		<textarea name="comment" class="text textarea" /></textarea>
	</div>
	<div class="element">
		
		<input type="submit" id="submit"/>
		<div class="loading"></div>
	</div>
	</form>
	</div>
</div>
<div class="clear"></div>

2. CSS

I'm using CSS to make the 2 columns layout - LABEL and Form Elements. Also, some important classes:

  • .hightlight: Error indicator. if user had not entered anything in the textfield, it will highlight it and display an error icon
  • .loading: Loading animation icon. After user clicked on submit, if no errors were found, this icon will be displayed next to the submit button
  • .done: Success message. If the form is submitted successfully, display show this class
body{text-align:center;}

.clear {clear:both}

.block {
	width:400px;
	margin:0 auto;
	text-align:left;
}
.element * {
	padding:5px; 
	margin:2px; 
	font-family:arial;
	font-size:12px;
}
.element label {
	float:left; 
	width:75px;
	font-weight:700
}
.element input.text {
	float:left; 
	width:270px;
	padding-left:20px;
}
.element .textarea {
	height:120px; 
	width:270px;
	padding-left:20px;
}
.element .hightlight {
	border:2px solid #9F1319;
	background:url(iconCaution.gif) no-repeat 2px
}
.element #submit {
	float:right;
	margin-right:10px;
}
.loading {
	float:right; 
	background:url(ajax-loader.gif) no-repeat 1px; 
	height:28px; 
	width:28px; 
	display:none;
}
.done {
	background:url(iconIdea.gif) no-repeat 2px; 
	padding-left:20px;
	font-family:arial;
	font-size:12px; 
	width:70%; 
	margin:20px auto; 
	display:none
}

3. Javascript

Finally, the Javascript code. I have added comments in each line to explain what it does.

First, we need a simple validation to ensure user has key in something. We can add more validations, like, email validation, valid character validation, length validation and so on. And it's a good practise to encode the data into URL friendly format as well.

What the code does:

  • Get user's input
  • Validate the data, if error found, add the hightlight class, and stop the script
  • If no errors were found, all text field will be disabled and format the data to be passed to jQuery ajax method
  • jQuery will appened the data to process.php, so it will look something like this:

    http://[your-website-url]/process.php?name=kevin&email=kevin@test.com&website=http://www.queness.com&comment=Testing%20of%20Ajax%20Form%20Submission

    in fact, you can execute the process.php with that url.
  • process.php will return either 1 or 0, if 1 it meant mail was sent successfully, otherwise, mail was not sent.
  • If suceed, the form will be hidden and a message is displayed.
$(document).ready(function() {
	
	//if submit button is clicked
	$('#submit').click(function () {		
		
		//Get the data from all the fields
		var name = $('input[name=name]');
		var email = $('input[name=email]');
		var website = $('input[name=website]');
		var comment = $('textarea[name=comment]');

		//Simple validation to make sure user entered something
		//If error found, add hightlight class to the text field
		if (name.val()=='') {
			name.addClass('hightlight');
			return false;
		} else name.removeClass('hightlight');
		
		if (email.val()=='') {
			email.addClass('hightlight');
			return false;
		} else email.removeClass('hightlight');
		
		if (comment.val()=='') {
			comment.addClass('hightlight');
			return false;
		} else comment.removeClass('hightlight');
		
		//organize the data properly
		var data = 'name=' + name.val() + '&email=' + email.val() + '&website='
		+ website.val() + '&comment='  + encodeURIComponent(comment.val());
		
		//disabled all the text fields
		$('.text').attr('disabled','true');
		
		//show the loading sign
		$('.loading').show();
		
		//start the ajax
		$.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
					$('.form').fadeOut('slow');					
					
					//show the success message
					$('.done').fadeIn('slow');
					
				//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;
	});	
});	

4. PHP

This PHP code can accomodate different type of submissions (POST and GET). If the user submitted the form using jQuery, process.php will get the data from GET. and if the browser couldn't run javascript, the data will be sent using POST. What it does:

  • Retrieve user's input from either GET or POST method
  • If POST, set the $post variable to 1. This is to display the message instead of return the result
  • Then, perform the server side validation if the form was submitted using POST
  • If no errors were found, organize the data into a html email template and send it to the email we have specified.
  • Display the message if POST is used. Display result (either 1 or 0) if GET is used
<?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 - change this to your name and email
	$to = 'Your Name <your@email.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! We 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="form.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;
}
?>

Conclusion

Now you know how to build a ajax based form submission that will work even if the browser doesnt support javascript using jQuery. Make sure you check out the demo and download the source code to play with it. Last but not least, I need your support :) If you like this article, please help me to promote it by adding this post into your bookmark. Or you can subscribe to my RSS for more posts. Thanks!

Demo Download
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

312 comments
Jo 6 years ago
Is it possible to also send a auto response email to the sender as well, containing a message?
Reply
gunjan 6 years ago
Website Designing Noida, Website Design, Website Designing Company
Website Designing Company Create Your Web Identity in just Rupees 999, BrainGuru offers you Microsite with. in Domain and Hosting With Email ids for you Business. Web Designing india, Best Web Designing Delhi, Web Designing Company india.
Keywords-> Website Designing Company, Website Designing Noida, Website Design, Web Designing india, Web Designing Company india, Web Design Company
http://www.website999.in
Reply
gunjan 6 years ago
Website Designing Noida, Website Design, Website Designing Company
Website Designing Company Create Your Web Identity in just Rupees 999, BrainGuru offers you Microsite with. in Domain and Hosting With Email ids for you Business. Web Designing india, Best Web Designing Delhi, Web Designing Company india.
Keywords-> Website Designing Company, Website Designing Noida, Website Design, Web Designing india, Web Designing Company india, Web Design Company
http://www.website999.in
Reply
Saad Nisar 6 years ago
Great Post I have never seen such a good post for the past few years. Thanks again for your kind work.
Reply
john 6 years ago
Hi, I love the form and tutorial, but I am unable to form to work. I did not edit any of the code, but just uploaded the files to my local server, http://johnny565.atwebpages.com/form/jquery-ajaxform.php /. I fill out the form and just keep getting a spinning circle when I click submit. Any ideas??
Reply
Ryan 5 years ago
great but .. how to make it an array? in my case i hve more than 20 field in form1 so i want to make an array.
ex:
<input type="text" name="field[ ]" />
<input type="text" name="field[ ]" />
...
<input type="text" name="field[ ]" />

pls hlp .. anyone ??
Reply
shekar 5 years ago
Hi,

This post seems to be place to solve my problem, i have a requirement to upload the file to server and store the path in the database ,

i could able to do the half of the requirement like i could upload the file to file system using AJAX without page refresh.

Now the issue is i have to store the file path to database for this i know the username from index.html from the HTML form i need to send it to PHP using same post method where the file attributes are being sent, and i need to capture this value in PHP using $_POST['username'] something like this without page refresh.

Thanks in advance,
Sekar

Reply
Kevin Liew Admin 5 years ago
I assume you want to store the file and username in the same time by using AJAX call? Are you using ajax uploader plugin?
Reply
John 5 years ago
Hi Kevin,

Congratulations on a good post and better still supporting it for several years :)

I'm in the process of adapting your solution for my needs.

Before starting I had a read through all the comments and have been making the recommended changes to the code (POST instead of GET, use serialize etc.) and I noticed that there have been quite a few questions about spam and I didn;t see any that got a response. Have you ever looked into this at all? Any recommendations?

thanks

John
Reply
Kevin Liew Admin 5 years ago
Hi John, yea, serialize and POST are definitely the way to go. When I was writing this, I was quite a novice in jquery. For Spam control, I think we can use recaptcha.

http://snipplr.com/view/15563/
Reply
Esther Lee 5 years ago
Okay, I'm no genius when it comes to jQuery, much less Ajax or PHP. I've been climbing the walls and crawling the internet looking for a clean, clear bundle of scripts that will allow me to do client-side validation and server-side processing using AJAX. My jQuery validation seems to be working fine, but I have tried about a dozen (not kidding!) different PHP mail processing scripts including yours, and I just cannot get any of the PHP scripts to actually send me email from the processed form.

Any way I can get a truly barebones way of checking if the PHP script is working? When I press "submit" the jQuery returns success but then...no email, no nothing, no console log error messages.

Follow the link and click on "Contact" for my (non)working example:
http://www.estherlee.co/tests/index.html

As you can see, the user shouldn't leave the page or get a redirect which is why I have to use jQuery and AJAX. Any light you could shed on what I'm doing wrong would be so very much appreciated. I'm just about ready to throw in the towel and do a stupid mailto link instead...

Thanks.
Reply
DAN 5 years ago
Great Post.
Reply
Tony 5 years ago
How do you fix the validation error "Sorry, unexpected error. Please try again later." when users input the # sign for a field containing an address with apartment number?
Reply
Harsimran Kaur 5 years ago
Hi:

Above all thanks for a great post.

My question is:
I did everything you instructed in the following comments to make this code working but whenever I rename the process (working-version).php to process.php, it only gives message: Sorry, unexpected error. Please try again later. I have put my id to send mail as well. So my code looks like:

if (!$errors) {

//recipient
$to = 'Harsimran Kaur <simar006@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/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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! We 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
}


Can you please let me know if something is wrong here. Your help will be much appreciated. Thanks once again for the post.
Reply
Kevin Liew Admin 5 years ago
You can enable PHP error message and make sure your server support sendmail().
Reply
Mitchell 5 years ago
Thank you, thank you. This was exactly what I needed, for a project that all other tutorials made very difficult.

Tip for everyone, use the download zip for the code. Copy paste from the website gave me errors.
Reply