Post Pic

Create an Ajax Driven Comment Form

Giving a form the ability to send data asynchronously can give your site an extra degree of professionalism. Plus, it’s not too difficult to pull of with just a few extra lines of code. In today’s post, we’ll create an ajax driven comment form that you can add to your own personal blog. Let’s get started!

Ajax Comment FormView the demo

What We’ll Be Creating


Final

Step One: Building the Base

Before we dive into the code, let’s take a minute and set up our folder structure. In the root of your main project folder, let’s add a few folders: css, images, javascript, and php.

Looking ahead, we know that our form will be running jQuery. At the time of writing this, the current release is at v1.6.2, so make sure you’re running at least that version. Download the minified version and stick it in your javascript folder (rename it to jquery.min.js if it’s not already named that).

Our form will also be using a few small icons. Go ahead the download these images into your images folder.

Special thanks to ajaxload.info for the animated loader and Crystal Clear for our awesome error and success images. Now that we’ve got the foundation for our application, let’s start building the good stuff: the code!

Step Two: Creating the Markup

We’ll get started in our code by creating the markup. In your root project folder, create a new file and name it index.html. Add in the following markup as a base, and we’ll build on it from there.

[code lang=”html”]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ajax Comment Submission Form</title>
</head>
<body>

</body>
</html>
[/code]

Now that we have our basic HTML template, let’s add the form markup. To prevent page bloat, we want to use as little tags as possible while still allowing ourselves enough room to style it up the way we want. Copy the following into your index.html page.

[code lang=”html”]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ajax Comment Submission Form</title>
</head>
<body>
<form id="comment-form" action="php/comment.php" method="POST">
<p>
<label for="email">
<span>*</span> Email:
</label>
<input type="text" id="email" name="email" />
</p>
<p>
<label for="comment">
<span>*</span> Comment:
</label>
<textarea id="comment" name="comment"></textarea>
</p>
<p class="comment-right">
<input type="submit" name="submit" value="Submit" />
</p>
<p class="comment-center" id="loader">
<img src="images/loader.gif" alt="Sending…" border="0" />
</p>
<p class="comment-center" id="success">
<img src="images/success.png" alt="Success!" border="0" /> Your comment has been submitted successfully!
</p>
<p class="comment-center" id="error">
<img src="images/error.png" alt="Error!" border="0" /> Sorry, your comment can’t be added. Please try again later!
</p>
</form>
<br class="clear" />
</body>
</html>
[/code]

Much of what we just added to the HTML might not have a clear purpose just yet, but stick around, everything will soon fall into place. Now that we have our basic markup, we’ll need to add references to our stylesheet and JavaScript that we’ll be creating shortly. So in the header section, let’s add our includes.

[code lang=”html”]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ajax Comment Submission Form</title>
<link rel="stylesheet" type="text/css" href="css/comment.css" />
<script type="text/javascript" src="javascript/jquery.min.js"></script>
<script type="text/javascript" src="javascript/comment.js"></script>
</head>
<body>
<form id="comment-form" action="php/comment.php" method="POST">
<p>
<label for="email">
<span>*</span> Email:
</label>
<input type="text" id="email" name="email" />
</p>
<p>
<label for="comment">
<span>*</span> Comment:
</label>
<textarea id="comment" name="comment"></textarea>
</p>
<p class="comment-right">
<input type="submit" name="submit" value="Submit" />
</p>
<p class="comment-center" id="loader">
<img src="images/loader.gif" alt="Sending…" border="0" />
</p>
<p class="comment-center" id="success">
<img src="images/success.png" alt="Success!" border="0" /> Your comment has been submitted successfully!
</p>
<p class="comment-center" id="error">
<img src="images/error.png" alt="Error!" border="0" /> Sorry, your comment can’t be added. Please try again later!
</p>
</form>
<br class="clear" />
</body>
</html>
[/code]

Once we create the JavaScript for our form, we’re going to need an instantiation for it. So the last thing we’ll want to do in our index.html file is add the instantiation for the plugin that we’ll be creating in a little bit. Just before the closing <body /> tag, add the final code for the plugin.

[code lang=”html”]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ajax Comment Submission Form</title>
<link rel="stylesheet" type="text/css" href="css/comment.css" />
<script type="text/javascript" src="javascript/jquery.min.js"></script>
<script type="text/javascript" src="javascript/comment.js"></script>
</head>
<body>
<form id="comment-form" action="php/comment.php" method="POST">
<p>
<label for="email">
<span>*</span> Email:
</label>
<input type="text" id="email" name="email" />
</p>
<p>
<label for="comment">
<span>*</span> Comment:
</label>
<textarea id="comment" name="comment"></textarea>
</p>
<p class="comment-right">
<input type="submit" name="submit" value="Submit" />
</p>
<p class="comment-center" id="loader">
<img src="images/loader.gif" alt="Sending…" border="0" />
</p>
<p class="comment-center" id="success">
<img src="images/success.png" alt="Success!" border="0" /> Your comment has been submitted successfully!
</p>
<p class="comment-center" id="error">
<img src="images/error.png" alt="Error!" border="0" /> Sorry, your comment can’t be added. Please try again later!
</p>
</form>
<br class="clear" />
<script type="text/javascript">
(function ($) {
$(‘form#comment-form’).commentForm();
}(jQuery));
</script>
</body>
</html>
[/code]

Step Three: Adding the Styles

Now that we have our markup in place, it’s time to style this form up. In your css folder, create a new file called comment.css. We’ll start with a reset to make the styles as uniform as possible across all browsers.

[code lang=”css”]
/* — reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
br.clear {
clear: both;
}
[/code]

Now that we have the reset in place, let’s start styling out the form itself. You’ll notice there are a couple CSS hacks (the asterisk targets IE7 and below), but they are necessary to make sure the form looks the same across all browsers (IE6+). Go ahead and add the following into your comment.css right below your reset code.

[code lang=”css”]
/* — comment form */
body {
background: #597d92;
color: #333333;
font: normal 16px/16px arial, sans-serif;
}
#comment-form {
background: #f2f2f1;
-moz-border-radius: 5px;
border-radius: 5px;
display: inline-block;
padding: 10px 38px;
*display: block;
*float: left;
}
#comment-form p {
padding: 10px 0;
}
#comment-form p.comment-right {
text-align: right;
}
#comment-form p.comment-center {
text-align: center;
}
#comment-form #loader,
#comment-form #success,
#comment-form #error {
display: none;
}
#comment-form label {
display: block;
padding-bottom: 5px;
}
#comment-form label span {
color: #b90202;
}
#comment-form input[type=text],
#comment-form textarea {
width: 320px;
background-color: #FFF;
border: 1px solid #d7d7d5;
padding: 5px 3px;
outline: 0;
}
#comment-form input[type=text].error,
#comment-form textarea.error {
border: 1px solid #b90202;
}
#comment-form textarea {
height: 50px;
width: 500px;
min-height: 50px;
resize: vertical;
font-family: arial, sans-serif;
overflow: auto;
}
#comment-form input[type=submit] {
font: normal 16px/16px arial, sans-serif;
border-width: 0;
background-color: #b90202;
color: #f2f2f1;
font-size: 16px;
padding: 5px 8px;
cursor: pointer;
}
[/code]

If you test your form now, you’ll notice that it looks just about correct, but not exactly the same as the demo. To fix the alignment issue, we’ll add in a little extra code which should only be used for the purpose of this demo. When you add the form into your own blog, you’ll want to remove the “demo only” section.

[code lang=”css”]
/* — demo only */
body {
text-align: center;
}
#comment-form {
text-align: left;
margin: 50px auto 0 auto;
}
[/code]

So your final code in your comment.css should now look like the following. Keep in mind that when you integrate this code into your own blog or website, you may need to tweak some styles to make it play nicely with your other markup.

[code lang=”css”]
/* — reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
br.clear {
clear: both;
}
/* — comment form */
body {
background: #597d92;
color: #333333;
font: normal 16px/16px arial, sans-serif;
}
#comment-form {
background: #f2f2f1;
-moz-border-radius: 5px;
border-radius: 5px;
display: inline-block;
padding: 10px 38px;
*display: block;
*float: left;
}
#comment-form p {
padding: 10px 0;
}
#comment-form p.comment-right {
text-align: right;
}
#comment-form p.comment-center {
text-align: center;
}
#comment-form #loader,
#comment-form #success,
#comment-form #error {
display: none;
}
#comment-form label {
display: block;
padding-bottom: 5px;
}
#comment-form label span {
color: #b90202;
}
#comment-form input[type=text],
#comment-form textarea {
width: 320px;
background-color: #FFF;
border: 1px solid #d7d7d5;
padding: 5px 3px;
outline: 0;
}
#comment-form input[type=text].error,
#comment-form textarea.error {
border: 1px solid #b90202;
}
#comment-form textarea {
height: 50px;
width: 500px;
min-height: 50px;
resize: vertical;
font-family: arial, sans-serif;
overflow: auto;
}
#comment-form input[type=submit] {
font: normal 16px/16px arial, sans-serif;
border-width: 0;
background-color: #b90202;
color: #f2f2f1;
font-size: 16px;
padding: 5px 8px;
cursor: pointer;
}
/* — demo only */
body {
text-align: center;
}
#comment-form {
text-align: left;
margin: 50px auto 0 auto;
}
[/code]

Step Four: Creating the Plugin

Now that we have our form all styled out, it’s time to add some functionality to it. You should have downloaded jQuery (at least version 1.6.2) and have it named jquery.min.js in your javascript folder, so if not, go ahead and do it now.

Next, create a new file named comment.js and place it in your javascript folder. This will contain our jQuery plugin for our form. We’ll start off by creating the base for our plugin. If you’re confused about jQuery plugins or want to learn more about them, take a look at our tutorial “The Basics: Building a jQuery Plugin“.

[code lang=”javascript”]
(function ($) {
$.fn.commentForm = function (opts) {
var options = $.extend({
speed: 200
}, opts);
return this.each(function () {

var base = this,
$base = $(this);

this.init = function () {

};
this.init();
});
};
}(jQuery));
[/code]

Notice we named out plugin “commentForm”, which, if you recall, is what we called at the bottom of our index.html file. We added in a default variable speed which will contain the speed of our animations during the data-sending period. We created 2 private variables: base, which holds a reference to the element passed in during our instantiation, and $base, which holds in a jQuery object of the same element.

The following code will complete the plugin. I’ve commented out each function, so it shouldn’t be too difficult to see the process of the plugin on form submission. In a nutshell, we’ll be doing the following:

  • Catch the form submission to prevent default behavior
  • Process the data to make sure no values are empty
  • Display any errors and stop the submission, or build the query to send to the server
  • Send the data to the server
  • Show a success or error message depending on the message from the server

[code lang=”javascript”]
(function ($) {
$.fn.commentForm = function (opts) {
var options = $.extend({
speed: 200
}, opts);
return this.each(function () {

var base = this,
$base = $(this);

/**
* Initialize the plugin
**/
this.init = function () {
$base.bind(‘submit.commentForm’, base.catchSubmit);
};

/**
* Catch the form submission to prevent the default form action
**/
this.catchSubmit = function () {
base.hideAll();
if (!base.checkErrors()) {
base.showLoader();
base.submitData();
}
return false;
};

/**
* Submit the data to the server
**/
this.submitData = function () {
var query = base.buildQuery();
$.ajax({
type: $base.attr(‘method’),
url: $base.attr(‘action’),
data: query,
success: function (d) {
base.hideLoader();
if (d === ‘true’) {
base.successPost();
} else {
base.failPost();
}
},
error: function () {
base.hideLoader();
base.failPost();
}
});
};

/**
* Show the loader icon
**/
this.showLoader = function () {
$base.find(‘#loader’).slideDown(options.speed);
};

/**
* Hide the loader icon
**/
this.hideLoader = function () {
$base.find(‘#loader’).slideUp(options.speed);
};

/**
* Hide the error and success messages
**/
this.hideAll = function () {
$base.find(‘#success, #error’).slideUp(options.speed);
};

/**
* Show the success message after the data has posted
**/
this.successPost = function () {
setTimeout(function () {
$base.find(‘#success’).slideDown(options.speed);
base.clearForm();
}, options.speed * 2);
};

/**
* Show the error message if something went wrong when submitting the data
**/
this.failPost = function () {
setTimeout(function () {
$base.find(‘#error’).slideDown(options.speed);
}, options.speed * 2);
};

/**
* Clear all data in the form
**/
this.clearForm = function () {
$base.find(‘input[type=text], textarea’).val(”);
};

/**
* Create the query of data to send to the server
* @return (String) the query
**/
this.buildQuery = function () {
var q = ”;
$base.find(‘input, textarea’).each(function () {
q += escape($(this).attr(‘name’)) + ‘=’ + escape($(this).val()) + ‘&’;
});
return q;
};

/**
* Check for any empty values in the form.
* Any other validation should be done in this function.
* @return (Boolean) true if errors, false if none
**/
this.checkErrors = function () {
var errors = false,
$elem;
$base.find(‘input[type!=submit], textarea’).each(function () {
$elem = $(this);
if ($.trim($elem.val()) === ”) {
$elem.addClass(‘error’);
errors = true;
} else {
$elem.removeClass(‘error’);
}
});
return errors;
};
this.init();
});
};
}(jQuery));
[/code]

Step Five: Setting Up the Database

Before we jump into our server-side code, we need to set up the database and table that will hold our data. Hop into your database admin control, create a new database, and give it a name. Then, create a new table in that database and give it a name with 3 fields:

  1. ‘id’ INT NOT NULL AUTO_INCREMENT PRIMARY KEY
  2. ’email’ VARCHAR( 255 ) NOT NULL
  3. ‘comment’ TEXT NOT NULL

Step Six: Catching the Data

Now that we have our plugin created and our form is styled up, it’s time to jump to the server code to catch the data and insert it into the database. In our php folder, let’s create 3 files: conf.php, comment.php, and comment.class.php. Open up conf.php and add the following:

[code lang=”php”]
<?php
define(‘HOST’, ”);
define(‘USERNAME’, ”);
define(‘PASSWORD’, ”);
define(‘DATABASE’, ”);
define(‘TABLE’, ”);
[/code]

This file will contain the values to connect to our database. Add in your personal information for the host, username, password, database, and table. Use the same names of the database and table that you used when creating your database back in step five.

Create another file in your php directory named comment.class.php and add in the following code:

[code lang=”php”]
<?php
class Comment {

}
[/code]

This file will contain all the methods for our application server-side. Let’s add in a function to connect to our server and select the database. Notice we’re using the constants we declared in conf.php.

[code lang=”php”]
<?php
class Comment {
private static function connect() {
mysql_connect(HOST, USERNAME, PASSWORD);
mysql_select_db(DATABASE);
}
}
[/code]

Now that we’ve connected, we can add the method to add the data into the table that we’ve created. Add the following into your file:

[code lang=”php”]
<?php
class Comment {
private static function connect() {
mysql_connect(HOST, USERNAME, PASSWORD);
mysql_select_db(DATABASE);
}
public function postData() {
$this->connect();
$email = mysql_real_escape_string($_POST[’email’]);
$comment = mysql_real_escape_string($_POST[‘comment’]);
$insert = mysql_query("INSERT INTO " . TABLE . " (email, comment) VALUES (‘" . $email . "’, ‘" . $comment . "’)");
if (!$this->isAjax()) {
if ($insert) {
return $this->displaySuccess();
}
return $this->displayError();
}
if ($insert) {
return "true";
}
return "false";
}
}
[/code]

We’re using the TABLE constant in this method, which is, again, defined in your conf.php page. You’ll also notice the isAjax() method that we’re calling. We’ll define that next. It will be used to determine if the code is being called via ajax or if the user has JavaScript disabled, and will display the appropriate success or error message. Let’s add that in now.

[code lang=”php”]
<?php
class Comment {
private static function connect() {
mysql_connect(HOST, USERNAME, PASSWORD);
mysql_select_db(DATABASE);
}
public function postData() {
$this->connect();
$email = mysql_real_escape_string($_POST[’email’]);
$comment = mysql_real_escape_string($_POST[‘comment’]);
$insert = mysql_query("INSERT INTO " . TABLE . " (email, comment) VALUES (‘" . $email . "’, ‘" . $comment . "’)");
if (!$this->isAjax()) {
if ($insert) {
return $this->displaySuccess();
}
return $this->displayError();
}
if ($insert) {
return "true";
}
return "false";
}
private static function isAjax() {
if(!empty($_SERVER[‘HTTP_X_REQUESTED_WITH’]) && strtolower($_SERVER[‘HTTP_X_REQUESTED_WITH’]) == ‘xmlhttprequest’) {
return true;
}
return false;
}
}
[/code]

The last few methods we need to add into this file are the error and success messages if the user accessed the page without ajax. Your final comment.class.php page should look like the following:

[code lang=”php”]
<?php
class Comment {
private static function connect() {
mysql_connect(HOST, USERNAME, PASSWORD);
mysql_select_db(DATABASE);
}
public function postData() {
$this->connect();
$email = mysql_real_escape_string($_POST[’email’]);
$comment = mysql_real_escape_string($_POST[‘comment’]);
$insert = mysql_query("INSERT INTO " . TABLE . " (email, comment) VALUES (‘" . $email . "’, ‘" . $comment . "’)");
if (!$this->isAjax()) {
if ($insert) {
return $this->displaySuccess();
}
return $this->displayError();
}
if ($insert) {
return "true";
}
return "false";
}
private static function isAjax() {
if(!empty($_SERVER[‘HTTP_X_REQUESTED_WITH’]) && strtolower($_SERVER[‘HTTP_X_REQUESTED_WITH’]) == ‘xmlhttprequest’) {
return true;
}
return false;
}
private static function displayError() {
return "Sorry, unable to post your comment. Please try again later.";
}
private static function displaySuccess() {
return "Thank you! Your comment has been submitted.";
}
}
[/code]

Finally, we need to create one more file in your php folder named comment.php. This is the file that your JavaScript plugin will connect with. Add in the following code:

[code lang=”php”]
<?php
require_once(‘conf.php’);
require_once(‘comment.class.php’);

$comment = new Comment();
$posts = $comment->postData();
echo $posts;
[/code]

The 2 include files are for the configuration file, and the class that we created to add the data into the database. This file uses echo to return a response back to the JavaScript plugin (or display on the screen, if the user has JavaScript disabled). The plugin then displays the error or success message based on the echo.

Conclusion

So there you have it. Hopefully, you should have a fully functional comment form driven by ajax. If not, retrace your steps from the tutorial or leave a comment and we’ll get you on the right track. Keep in mind that this is for demonstration purposes only, and you may need to tweak some styles or functionality to make this work with your own personal website. Thanks for reading!

Ajax Comment FormView the demo

Subscribe to RSS Feed

Related Posts


Fatal error: Call to undefined function yarpp_sql() in /home1/fastshio/public_html/kingtutz/wp-content/themes/convergencegrunge/single.php on line 72