PHP and MySql Comment Form without Refreshing Page with jQuery
This article helps your comment form to submit without refreshing page. In this tutorial I’ll show you how to create an advance comment form in php and mysql with jquery in just a few lines of codes all we need to do is initialize the submitted post data and pass using jquery API and done, the data submitted is constructed using PHP, so sounds simple right? Yes it is.
PHP and MySql Comment Form without Refreshing Page with jQuery
index.html
Here our HTML codes that contains the basic input data name, email, url and message.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div id="errAll"></div> <div class="commentpost"></div> <form method="post" id="formcomment"> <label for="name">Name</label> <p><input type="text" name="name" id="name" value="<?php echo (isset($_POST['name']) ? $_POST['name'] : ''); ?>" /></p> <label for="email">Email</label> <p><input type="text" name="email" id="email" value="<?php echo (isset($_POST['email']) ? $_POST['email'] : ''); ?>" /></p> <label for="website">URL</label> <p><input type="text" name="url" id="url" value="<?php echo (isset($_POST['url']) ? $_POST['url'] : ''); ?>" /></p> <label for="website">Message</label> <p><textarea cols="40" rows="6" name="message" id="message"><?php echo (isset($_POST['message']) ? $_POST['message'] : ''); ?></textarea></p> <p><input type="submit" name="submitter" value="Submit Comment" /></p> <p><input type="hidden" name="task" value="addComments" /></p> </form> |
Javascript code
$(“#formcomment”).submit() – formcomment is the ID of the FORM tag. If user submit the form, the data posted to ajax.php without refreshing the page and result or response data is appended in commentpost class.
In here we’re using $.post() jquery API, it Load data from the server using a HTTP POST request, for more information about this API visit jQuery api site.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<script type="text/javascript"> jQuery(document).ready(function($){ $("#formcomment").submit(function(){ ctask = this.task.value; cname = this.name.value; cemail = this.email.value; curl = this.url.value; cmessage = this.message.value; submitter = this.submitter; if(cname=="" || cemail=="" || cmessage=="") { $("#errAll").html('<p>Invalid Captcha. Please try again.</p>'); } $.post("ajax.php", {task: ctask, name: cname, email: cemail, url: curl, message: cmessage}, function(data){ if(data=='0') { $("#errAll").html('<p>Please don\'t leave the requierd fields.</p>'); } else if(data=='1') { $("#errAll").html('<p>Invalid Email Address, Please try again.</p>'); } else { submitter.value="Comment posted"; submitter.disabled=true; $(data).appendTo($(".commentpost")); } }); return false; }); }); </script> |
ajax.php
This contains PHP codes that construct the submitted data and MySQL code to insert data to tbl_comment table.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<?php include_once( 'config.php' ); if(isset($_POST['task']) && $_POST['task'] == 'addComments') { $name = addslashes(trim($_POST['name'])); $email = addslashes(trim($_POST['email'])); $url = addslashes(trim($_POST['url'])); $comment = htmlentities(addslashes(trim($_POST['message']))); $date = date('F j, Y'); if ($name == "" || $email == "" || $url == "" || $comment == "") { echo '0'; } else if(!filter_var($email, FILTER_VALIDATE_EMAIL)){ echo '1'; } else { $sql=mysql_query("INSERT INTO tbl_comment(name, email, url, message, date_posted) VALUES ('$name', '$email', '$url', '$comment', '$date')"); if($sql) { echo ' <div class="commentbox"> <div class="commentboxt">'.$name.' </div> <div class="commentboxm"> <p class="wrap"> '. $comment .' </p> </div> <div class="commentboxb">'. $date .'</div> </div> '; } } } ?> |
Database
You can do this easy in PHPMyAdmin, or you can use this code to execute commands in MySql.
|
1 2 3 4 5 6 7 8 9 10 |
CREATE TABLE IF NOT EXISTS 'tbl_comment' ( 'id' INT(11) NOT NULL AUTO_INCREMENT, 'name' VARCHAR(225) NOT NULL, 'email' VARCHAR(225) NOT NULL, 'url' VARCHAR(225) NOT NULL, 'message' TEXT NOT NULL, 'date_posted' VARCHAR(225) NOT NULL, PRIMARY KEY ('id'), UNIQUE KEY 'email' ('email') ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ; |
config.php
This contains PHP database configuration file.
|
1 2 3 4 5 6 7 8 9 |
<?php $host='HOSTNAME'; $user='USERNAME'; $pass='PASSWORD'; $db='DATABASE'; $con = mysql_connect($host, $user, $pass) or die(mysql_error() . 'Oops! there is a problem connecting to database'); mysql_select_db($db, $con) or die('Error selecting database '. mysql_error()); ?> |
That’s it, hope your find this tutorial helpful, for your feedback you can add comment below.
Related Articles
Wordpress admin AJAX request always return 0 even with die()
Wordpress offers a great way for theme and plugin developers to add functionality using AJAX and with the use of their API your theme and plugin... read more »How to Load and Refresh Div every x Seconds with jQuery and Ajax
As of these days most social networking sites are using this event to load most recent posts every second without refreshing page, stream and tweets... read more »PHP and MySQL Upload with Resize Image
If you're searching on short and simple PHP and MySQL upload and resize script, well, I tell you you're in the right place folks, today I will try... read more »
I’m a graphic/web designer and web developer living in Philippines who is passionate on contributing to the web development industry. I love the Web.