Tags: ajax forms, jquery form
With technologies such as AJAX (Asynchronous Javascript And XML) the web is getting many new ways to enhance the user experience. And one way to do this is a simple contact form. Being able to have people contact you online without getting them lost in your website.
This is where AJAX steps in and is our savor. Lets start with compiling what we need. First make sure you have the latest jQuery edition. Then you will also need jQuery Form to help with the validation and submission of the form. Now that we have our libraries. Let’s start coding!
1. Add a form to your page. Just a normal form, no special markup required:
<form id="myForm" action="sendmail.php" method="post"> Name: <input name="name" type="text" /> E-Mail: <input name="email" type="text" /> Comment: <textarea name="comment"></textarea> <input type="submit" value="Submit Comment" /> </form>
2. Include the jQuery and Form Plugin files and a short script to initialize the form when the DOM is ready:
<script src="path/to/jquery.js" type="text/javascript"><!--mce:0--></script> <script src="path/to/jquery.form.js" type="text/javascript"><!--mce:1--></script> <script type="text/javascript"><!--mce:2--></script>
That’s It! Now let’s customize and make this more advanced.
We start with our jQuery code on our submission page. I will try to explain the code in detail at each line to help you understand the process.
<script src="path/to/jquery.js" type="text/javascript"><!--mce:3--></script> <script src="path/to/jquery.form.js" type="text/javascript"><!--mce:4--></script> <script type="text/javascript"><!--mce:5--></script>
Now lets write out the sendmail.php file:
// Check that there is content being submitted to this file.
if(!empty($_POST['name']) && !empty($_POST['email'])) {
// Put submitted values into variables to use in the build out of the email.
$name = $_POST['name'];
$email = $_POST['email'];
$comment = $_POST['comment'];
$to = "receiver@email.com"; // Who the email goes to
$subject = "Your Email Subject"; // Your mail subject
// Build the headers to help avoid going to spam folder
$headers = "From: sender@email.com\r\n";
$headers .= "Reply-To: ".$email."\r\n";
$headers .= "Return-Path: sender@email.com\r\n";
$html = "Name: ".$name."\r\n"; // Add name
$html .= "Email: ".$email."\r\n"; // Add email
$html .= "Comment: ".$comment."\r\n\r\n"; // Add form comments
$html .= "IP Address: ".$_SERVER['REMOTE_ADDR']."\r\n"; // Add IP Address
$html .= "Date: ".date('m/d/y g:i:s a')."\r\n"; // Add Date this was created
// Send mail and check to see if it was successful or not
if(mail($to,$subject,$html,$headers)) {
// The mail was sent successfully
die("success"); // This is the value returned
} else {
// The mail failed to send due to either your server settings or incorrect headers or email address.
die("fail"); // This is the value returned
}
} else {
// No values were submitted... exit
die("exit"); // This is the value returned
}We’re Done! This is a bit more advanced tactic for using jQuery Form and has a very easy user interface experience with a message fading in and out with a success or failure. I hope this helps you create jQuery Forms easier and more efficient.
2 Responses to Advanced jQuery Form with Validation
網站製作學習誌 » [Web] 連結分享
September 21st, 2009 at 11:05 pm
[...] Advanced jQuery Form with Validation [...]
October 15th, 2009 at 10:14 pm
Hi there guys, thanks for the pingback! I took a look at your page and noticed that your example contact form is a little wonky from my view in Firefox on my Mac. See the link: http://emberapp.com/ivannovak/images/littlesnapper-2
Otherwise, good article!
-Ivan Novak