jquery post sample

Database table:

CREATE TABLE `comments` (
`id` INT( 5 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`name` VARCHAR( 50 ) NOT NULL ,
`comment` VARCHAR( 255 ) NOT NULL ,
`time` INT( 9 ) NOT NULL
)

process.php

<?php
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "";
$dbname = "newdb";

$name=$_POST['name'];
$comment=$_POST['comment'];

$conn=mysql_connect($dbhost,$dbuser,$dbpass) or die(mysql_error);
$select_db=mysql_select_db($dbname) or die("cannot find database!");

$sql= "INSERT INTO comments (`name`,`comment`,`time`) values ('$name','$comment',".time().")";

mysql_query($sql) or die("insert failed.");

echo true;

?>

index.php

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<title>Jquery - samples</title>

<style>
#response
{
border: 5px solid #99CCFF;
background: #00CCFF;
}
</style>

<script type="text/javascript">

$(document).ready(function()
{
$("#response").hide();

$("#addComment").click(function()
{
if( $("#name").val()!='' && $("#comment").val()!='')
{
$.post(
"process.php",
{
name:$("#name").val(),
comment:$("#comment").val()
},
function(response)
{
if(response == true )
{
$("#response").fadeIn('normal');
$("#response").html('Comment Added!');
$("#name").val('');
$("#comment").val('');
}
else
{
$("#response").fadeIn('normal');
$("#response").html('Insertion failed!');
}
}
);
}
else
{
$("#response").fadeIn('normal');
$("#response").html('Please enter your name and comment!');
}
return false;
});

$("#response").click(function()
{
$("#response").fadeOut('slow');
});

$("#resetall").click(function()
{
  $("#name").val('');
  $("#comment").val('');
$("#response").hide();
});
});

</script>
</head>

<body>
<form id="commentform">
<table width="100%" border="1">
  <tr>
   <th scope="row">Name</th>
   <td><input name="name" type="text" id="name" size="50"/></td>
  </tr>
  <tr>
   <th scope="row">Comment</th>
   <td><textarea id="comment" name="Comment" cols="50" rows="3" ></textarea></td>
  </tr>
  <tr>
   <th scope="row"> </th>
   <td><input name="submit" type="submit" id="addComment" value="Add"/>
   <input name="button" type="button" id="resetall" value="Reset"/></td>
  </tr>
</table>
</form>
<div id="response"></div>
</body>
</html>

3 comments:

maddyDecember 27, 2010 at 12:52 PM
Nice blog, Really this coding was very helpful for me!
Form Samples
RodriguesjaxDecember 28, 2010 at 9:31 PM
Thanks, glad to know that my post helped you.. Have a nice day...
UnknownJanuary 31, 2011 at 6:09 PM
hey i greatly apreciated this post. ive been looking for 2 days for this. ive tried every keyword for google to understand what i was searching.. finally! thank you so much!

Rodriguesjax Blog

Sunday, December 26, 2010

jquery post sample

3 comments: