This tutorials explains how to insert and display record without refreshing web page. I had developed using jQuery and Ajax it's simple and useful take a look at this post.
Next Part
Slide down effect.
Next Part
Slide down effect.
Download Script 
Live DemoDatabase Design
My previous post : Twitter Like More Button with jQuery and Ajax.
inserting.php
Contains of javascript and HTML code.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js">
</script>
<script type="text/javascript" >
$(function() {
$(".comment_button").click(function() {
var test = $("#content").val();
var dataString = 'content='+ test;
if(test=='')
{
alert("Please Enter Some Text");
}
else
{
$("#flash").show();
$("#flash").fadeIn(400).html('<img src="ajax-loader.gif" align="absmiddle"> <span class="loading">Loading Comment...</span>');
$.ajax({
type: "POST",
url: "demo_insert.php",
data: dataString,
cache: false,
success: function(html){
$("#display").after(html);
document.getElementById('content').value='';
document.getElementById('content').focus();
$("#flash").hide();
}
});
} return false;
});
});
</script>
// HTML code
<h3>What are you doing?</h3>
</form>
</div>
<div id="flash"></div>
<div id="display"></div>
libs/jquery/1.3.0/jquery.min.js">
</script>
<script type="text/javascript" >
$(function() {
$(".comment_button").click(function() {
var test = $("#content").val();
var dataString = 'content='+ test;
if(test=='')
{
alert("Please Enter Some Text");
}
else
{
$("#flash").show();
$("#flash").fadeIn(400).html('<img src="ajax-loader.gif" align="absmiddle"> <span class="loading">Loading Comment...</span>');
$.ajax({
type: "POST",
url: "demo_insert.php",
data: dataString,
cache: false,
success: function(html){
$("#display").after(html);
document.getElementById('content').value='';
document.getElementById('content').focus();
$("#flash").hide();
}
});
} return false;
});
});
</script>
// HTML code
<div>
<form method="post" name="form" action="">
<textarea cols="30" rows="2" name="content" id="content" maxlength="145" >
</textarea><br />
<input type="submit" value="Update" name="submit" class="comment_button"/>
</div>
<div id="flash"></div>
<div id="display"></div>
demo_insert.php
PHP Code display recently inserted record from the database.
<?php
include('db.php');if(isSet($_POST['content']))
{
$content=$_POST['content'];
mysql_query("insert into messages(msg) values ('$content')");
$sql_in= mysql_query("SELECT msg,msg_id FROM messages order by msg_id desc");
$r=mysql_fetch_array($sql_in);
}
?>
<b><?php echo $r['msg']; ?></b>Tutorials list
9lessos Table of Contents
Feel free post a comment. Please don't spam
Next Part
Insert a Record with animation slide down effect using jQuery and Ajax.
Good one...
ReplyDeleteIs it spam proof?
ReplyDeletenice one... but please... remove the layout tables. we live in 2009
ReplyDeleteremoved layout tables
ReplyDeletewhy use $("#flash").show();
ReplyDelete$("#flash").fadeIn(400).html('img src="ajax-loader.gif" align="absmiddle"> span class="loading">Loading Comment...span>');??
jquery.ajax has the option: beforeSend use that insteed
Thanks for this script and thanks for your effort too... :)
ReplyDeleteThanks,
Vivek
[http://www.developersnippets.com]
good script but your shirt is better.
ReplyDeletethanks from http://www.bugzlife.com
ReplyDeletethanks
ReplyDeletenice nice
ReplyDeletereally good good i seach this tutorial anytime
ReplyDeletehow do i limit the displayed comment?
ReplyDeleteNice script
ReplyDeletegood script, but how can I load old messages first and use a button to delete the message with the same script
ReplyDeleteNice script, but open to SQL injection.
ReplyDeletethanks... it helps me a lot
ReplyDeleteThanks for script, it's really great and simple. I'm using it for tags... it would be great if there would be solution to reverse display order of submitted content.
ReplyDeleteThis is the part to be edited but I cant figure out how to solve it:
success: function(html){
$("#display").after(html);
}
Thanks.
ReplyDeletegreat
ReplyDeletenice
ReplyDeletegood post
ReplyDeletehow to create share any links like facebook using jquery
ReplyDeleteinteresting
ReplyDeletethanks, excellent script, just what i was looking for!!
ReplyDeleteIs it possible to pass POST[] array to jquery insert.?
ReplyDeletenice
ReplyDeleteBrilliant, it really made things come to lite, for a whole day I was struggling with something, but this... Awesome mate, keep it up.
ReplyDeletethanks for the script...:)
ReplyDeleteWhen adding more than one record problem is the problem can you help when you add?
ReplyDeleteIs there a way to make this code reusable? (i.e several comment boxes on the same page)
ReplyDeletethanx
ReplyDeletevery good! :)
ReplyDeletevery nice post but doesnt work in ie 6 version pls help ????
ReplyDeletegood
ReplyDeletegood
ReplyDeleteCan someone please tell me how to use the element.replace(html) function in this, rather than the after function?
ReplyDeleteI'm sure it's a very simple workaround but I can't get it working, it just hangs on loading. I need it to replace the whole lot because I am bring up all records in a date order that the user enters.
Any help would be really appreciated, I'm tearing my hair out!
Don't bother approving my comment. FOr some reason I was trying to use a prototype function and when I realised it was Jquery I just used replaceWith. Simples!
ReplyDeleteLovely script, thanks!
If I insert "You & Me" then only You will be submitted all the string after & will be terminated. Any suggestion...
ReplyDeleteFor safety this should be
ReplyDelete$content=$_POST['content'];
$content=mysql_real_escape_string($_POST['content']);
thanks for the coding i really need that one
ReplyDeleteany idea to how I would add a "see older posts button" ?
ReplyDeleteThis is a very good tutorial
ReplyDeletegreat output!..but my problem is whenever i refresh the page, the comment will be removed in the current page..can anyone help me with this problem?
ReplyDeletethanks u!
how to put in it my blog? help me please i want this so badly
ReplyDeleteYou should definitely use a function like sprintf() to protect yourself against SQL injection attacks.
ReplyDeleteThank U ..
ReplyDeletethank u buddy
ReplyDeletegood...
ReplyDeleteThank you
ReplyDeletev nice.
ReplyDeleteWao Exact the same i was looking for thanx for sharing this
ReplyDeletegooD ONE BRO...
ReplyDeleteThis is the script I was looking for. Awesome tips given by you brother. I will try to implement it ASAP on my site.
ReplyDeletenice post
ReplyDeleteThe post is best I like it. I think this post is very help full to the software developers. those who have a query about jQuery & Ajax.
ReplyDeleteAs jquery is important & easy to learn.Also it is important in programming language
ReplyDeleteTHNANKS BUDDY
ReplyDeletevery good
ReplyDeleteHI friends Thank for making it available
ReplyDeleteThanx :)
ReplyDeletehow do i fix this error
ReplyDelete<===
mysql_fetch_array(): supplied argument is not a valid MySQL result resource in example.com/web/videos/demo_insert.php on line 20
===>
Great tutorial.. Thx alot mister
ReplyDeleteawesome.....
ReplyDeleteHi. How do you give style to the div where the text is displayed? It doesn't work when you download the script?
ReplyDeleteThanks for the script.
Really very helpful!!
ReplyDeleteScript is very good for jquery learner!
ReplyDeletehow do u write HTML(designing part) by hand or with any software?
Thank you boss, you have solved my one of biggest prob by this article
ReplyDeleteHello Sri!
ReplyDeleteI tried your script. it was working fine and now i am trying to implement it with for just email. But i am confuse how to use regular expression to check valid email through javascript on client-side before sending ajax request?
As i had tried php regex which was working fine but there was an error because it was on server-side.
So help me out how to implement javascript regex?
I tried many tuts on this but didn't get success!
thnx
ReplyDeletehmmm.. the thing i was searching for
ReplyDeletehmmm.. the thing i was searching for
ReplyDeletenice one
ReplyDeletegood and easy to understand..
ReplyDeletenice, this one is very helpful.
ReplyDeleteNice blog, i like it.
ReplyDeleteThanks :)
ReplyDeleteHow to make a database ?
ReplyDeletecan u please tell sql command for making tables
ReplyDeleteI want to send 3 parameters to save in the database. Name, age, description are the parameters. How do i build the dataString for this requirement.
ReplyDeleteThank you so much I really appreciate this!
ReplyDeleteSUPER YAAR ,GREAT I LIKE IT.
ReplyDeletethat all i need . Thank you so much . A great tutorial
ReplyDeleteDoes this script display records automatically when another person inserts record from another location ?
ReplyDeletethanks for give me this script.
ReplyDeleteain't working bro everytime i put the (script type="text/javascript" src="http://ajax.googleapis.com/ajax/
ReplyDeletelibs/jquery/1.3.0/jquery.min.js"
/script)
my table is just messing up. do you know why?anyway thanks for the code :D
If someone has PHP submit and retrieve code on two separate files??
ReplyDeletegod one
ReplyDeleteThank you
ReplyDeleteI have question on this statement "success: function(html)"
ReplyDeletehow to pass multiple value to the html parameter?
thanks
great script
ReplyDeletenice If we Reload the Webpage All the contents are lost.How to fix it
ReplyDeletethanks..
ReplyDeleteThanks for you ajax form. Please let me know that ,if I want to add multiple data then what I should change?
ReplyDeleteNice
ReplyDeleteNice thanks for sharing ..
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDelete