Tried Jquery basics


I have been had a nice time by trying a Slide UP and Down Div using the Jquery…For this i have been watching a video in Youtube and googling for 3 days…

Atlast I have been successfully completed and make a small Jquery HTML code running..

Okay….

Here is the code for you people to try it…

HTML Code

Untitled Document


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div#msgbox").hide();
$("#addcomment").click(function(){
$.post('process.php',{name:$('#name').val(),comment:$('#comment').val()},function(response){
$("div#msgbox").html("Data added Successfully");
$("div#msgbox").hide().slideDown("normal");
});
return false;

});
$("div#msgbox").click(function(){$("div#msgbox").slideUp("normal");});

});
</script>
<style>
body{font-family:Arial, Helvetica, sans-serif;font-size:75%}
div#msgbox{background:#EF2;width:100%;height:30px;position:relative}
div#msgbox msg{line-height:30px;padding-left:10px;}
form#commentform{margin-top:35px;}
</style>
</head>
<body>
<div id="msgbox"><span id="msg"></span></div>
<form id="commentform">
Name<input type="text" id="name" />
Comment<input type="text" id="comment" />
<input type="submit" id="addcomment" value="Post comment" />
</form>
</body>
</html>

Before going to the PHP File, make sure that you have created a Database with the table and its corresponding Field,


Name varchar(30);
Comment varchar(30);

PHP File


<?php
$name1=$_POST['name'];
$comment1=$_POST['comment'];
$con=mysql_connect("127.0.0.1","root","");
if(!$con)
{
die("could not connect" . mysql_error());
}
mysql_select_db("db_name",$con);
$sql="insert into db_table(Name,Comment) values('$name1','$comment1')";
mysql_query($sql,$con);
mysql_close($con);
?>

Now run the File and check out and try learn new things.

Njoy and keep sharing

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s