Easy Ajax Submit With Form.js Plugin Tutorial

View Demo

Here is the jQuery Form Plugin. Ajax submit means, submit a form without page refresh. I don't claim to be a PHP or JS guru (far from it actually). There are probably better ways to submit a form without page refresh. But, I will claim this... this is the easiest method you will likely find! That is, and also provides full support for server-side validation (PHP), and client-side validation (JS). Furthermore, I might note, that this method also works within jQuery Tabs/Fancybox/etc, which was a must for me on my last project.

I wanted to include all the bells (full PHP validation) and whistles (full JS validation) within this tut as well. But let's be honest, when it comes to putting all the pieces together, this stuff is complicated! So, I thought it best, and easiest, to just focus on the Ajax Submit for now. Once you've wrapped your brain around this part (and got it working!), then move on to adding fancy client side validation, and a stronger set of server side validation rules if you'd like.

A little explanation: The form.js displays the messages (via error.php or thankyou.php page) in the div#message which lies within the html form. Upon the forms successful submittal, the form is hidden by simply placing div#success over the top of it. And if you don't want to show the error message, but would prefer to display errors in another way (e.g. jQuery validation plugin), then simply add #ajaxsubmit #error {display:none;} to your CSS. As always, just view the demo's source code for clarification on anything.

Within your page that holds the html form, add and implement steps 1 through 5...

Step 1: Download and link to jQuery.

Step 2: Download and link to the jQuery Form plugin.

Step 3: Fire the jQuery Form plugin.

$(document).ready(function() {
		$('#ajaxsubmit').ajaxForm({
			target: '#message',
			success: function() {
			$('#message').fadeIn('slow');
			}
		});
	});

Step 4: jQuery Form CSS.

#ajaxsubmit {
width:300px;
margin:40px auto;
border:1px solid #333;
padding:55px 0 30px 90px;
position:relative;
}
* html #ajaxsubmit { 
overflow:hidden; /* helps hide form in IE6 */
}
label { 
display:block;
padding:0 0 4px;
}
input {
display:block;
padding:6px 4px;
margin:0 0 40px;
width:200px;
}
input[type="submit"] {
width:100px;
cursor:pointer;
}
/* ----- AJAX Submit ----- */
#ajaxsubmit #message {
clear:both; 
display:none; 
}
/* below rules style elements on thank you and error page */ 
#ajaxsubmit #success { /* hides form */
position:absolute;
top:0;left:0;
width:100%;
height:100%;
background:#fff;
}
* html #ajaxsubmit #success { /* hides form in IE6 */
height:999px;
width:999px;
}
#ajaxsubmit #success p {  /* thank you message */
position:absolute;
top:120px;left:45px; 
font-size:120%;
width:330px;
line-height:48px;
}
#ajaxsubmit #success p img {
float:left;
padding:0 10px 120px 0;
}
#ajaxsubmit #error { /* error message */
position:absolute;
bottom:12px;
left:90px;
color:red;
font-weight:bold;
}

Step 5: jQuery Form HTML.

<form id="ajaxsubmit" method="post" action="path-to-your-formmail.php">
   <label for="firstname">First Name</label>
   <input type="text" id="firstname" name="firstname">
		
   <label for="lastname">Last Name</label>
   <input type="text" id="lastname" name="lastname">

   <input type="submit" id="submit" value="Submit">
   
   <div id="message"></div>
</form>

...Now create 3 more pages: thankyou.php, error.php, and formmail.php, and copy/paste the below corresponding code into them. The thankyou.php page displays the thank you message. The error.php page displays the error message. And the formmail.php page validates the form and sends the email to you.

Step 6: thankyou.php

<html>
<head>
<title>Thank You Page</title>
</head>
<body>
<div id="success">
<p><img src="images/check.jpg" alt="">Thank you - message recieved!</p>
</div>
</body>
</html>

Step 7: error.php

<html>
<head>
<title>Error Page</title>
</head>
<body>
<p id="error">Complete both fields please.</p>
</body>
</html>

Step 8: formmail.php

<?php
// Insert your email/web addresses and correct paths
$mailto = 'your@email.com' ;
$from = "http://www.yourwebsite.com" ;
$formurl = "http://www.yourwebsite.com/formmail.php" ;
$errorurl = "http://www.yourwebsite.com/error.php" ;
$thankyouurl = "http://www.yourwebsite.com/thankyou.php" ;

// Place Your Form info here...
$firstname = ($_POST['firstname']);
$lastname = ($_POST['lastname']);

// Check If Empty
if (empty($firstname) || empty($lastname)) {
   header( "Location: $errorurl" );
   exit ;
}
// Add more Validation/Cleaning here...

// Place your Corresponding info here...
$message =
	
	"First Name: $firstname\n\n" .
	"Last Name: $lastname\n\n" 
;

// Leave Alone
mail($mailto, $from, $message,
	"From: \"$name\" <$email>" . $headersep . "Reply-To: \"$name\" <$email>" . $headersep );
header( "Location: $thankyouurl" );
exit ;

?>

ADVERTISE HERE