Insert and view the data from database without refresh using PHP, MySql, AJax and JQuery. this concept is mostly searching by everyone, here i'm going to show you that, in an usual insert and view take page refresh. so the loading will make page loading delay, so here i'm going use AJAX for make that insert and view without refreshing the page. and i already show you that how to create database and how to insert data in that.

for that we need to make three file to clear explanation. let see those files.
- DB.PHP
- INDEX.PHP
- ACTION.PHP
The above three files details below here.
DATABASE DETAILS
database name : 2my4edge
table name : comment
column names : id, msg, ip_add
DB.PHP
<?php $conn = mysql_connect('localhost','root','') or die (mysql_error); $db=mysql_select_db('2my4edge', $conn) or die (mysql_error); ?>
INDEX.PHP
<div class="container"> <div class="main"> <form method="post" name="form" action=""> <textarea style="width:500px; font-size:14px; height:60px; font-weight:bold; resize:none;" name="content" id="content" ></textarea><br /> <input type="submit" value="Post" name="submit" class="submit_button"/> </form> </div> <div class="space"></div> <div id="flash"></div> <div id="show"></div> </div>
AJAX
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> $(function() { $(".submit_button").click(function() { var textcontent = $("#content").val(); var dataString = 'content='+ textcontent; if(textcontent=='') { alert("Enter some text.."); $("#content").focus(); } else { $("#flash").show(); $("#flash").fadeIn(400).html('<span class="load">Loading..</span>'); $.ajax({ type: "POST", url: "action.php", data: dataString, cache: true, success: function(html){ $("#show").after(html); document.getElementById('content').value=''; $("#flash").hide(); $("#content").focus(); } }); } return false; }); }); </script>
the above is the script for make the function without refreshing the page.
ACTION.PHP
<?php include('db.php'); $check = mysql_query("SELECT * FROM comment order by id desc"); if(isset($_POST['content'])) { $content=mysql_real_escape_string($_POST['content']); $ip=mysql_real_escape_string($_SERVER['REMOTE_ADDR']); mysql_query("insert into comment(msg,ip_add) values ('$content','$ip')"); $fetch= mysql_query("SELECT msg,id FROM comment order by id desc"); $row=mysql_fetch_array($fetch); } ?> <div class="showbox"> <?php echo $row['msg']; ?> </div>
RELATED POSTS:
Good article thanks. . :)
ReplyDeleteNice
DeleteA lil bit of code commenting would have helped much more...
ReplyDeleteNice tut tho...Thanks
jgj
DeleteYou're using depreciated mysql_ functions. Please do not use this tutorial.
ReplyDeletehe should use mysqli instead of mysql...this will resolve deprecated problem
Deletethank for your post. i hope you will post more tip
ReplyDeletethaks..nice post..
ReplyDeleteits working thanks but i have this proble when i clicking button first time is ok but second time code addind two time to my commen for ex: if i entered my comment "hello" the resul is "hello" "helo"
ReplyDelete444
ReplyDeletethere is a huge problem with this script can u fix that when someone post content it appears on page without page refresh but when you refresh page the content disappears although that is stored in database so can you make changes in script so that when user refresh page the content should be there
ReplyDeleteUse php to view your comments instead of ajax
DeleteI want te jquery plugin for retrieving data
ReplyDeleteIt does work but i have same problem as stated by Roylee Wheels
ReplyDeletegood and completed tutorial. you wrote good explanation so make easy reader understand about AJAX. many thanks for your time write this tutorial.
ReplyDeleteThanks for the post man
ReplyDelete,l.
ReplyDeletewith out using html and JavaScript how can we load and insert an image into database
ReplyDeletehi
ReplyDeletehi
DeleteNIce article...and easy to understand...plz write a full tutorial about how to inset,delete,edit in mysql using ajax...
ReplyDeleteThank you nice article
ReplyDeleteit s show only current comments but i want to show all from db
ReplyDeletewhen you refresh page the content disappears although that is stored in database so can you make changes in script so that when user refresh page the content should be there
ReplyDeletePity this didnt work after page refresh, I was hoping to use it to auto refresh a dashboard page we have setup. so as information is added to the dashboard SQL it is refreshed on this page
ReplyDeleteYour blog is very useful to us....here is a way to findphp code for inserting data into database
ReplyDeletetest
Deletetest
Deleteyou must a while loop to show all the comments from database and limit it on how many messages you want to display
ReplyDeletesomething like this:
$fetch= mysql_query("SELECT msg,id FROM comment order by id desc LIMIT 10"); <- shows last 10 comments
while($row=mysql_fetch_array($fetch)){ <- the loop that displays last 10
$msg = $row['msg']; <- declare msg field
$id = $row['id'] <- declare msg id
?>
(in this example i choose a table because is simpler for beginers)
table width="500"
tr
td width="50" /td <- shows the id of the message
td /td <- shows the content of the message
/tr
/table
Nice tutorial but i wanted to show only the posted record so when it has an existing record that should be gone upon posting another record. Hope you can help me.
ReplyDeleteWhat I want is the HTML data will updates whenever there is an update or change in the backend or database. It doesn't work that way.
ReplyDeletevery nice
ReplyDeletethis is what i am searching :)
thank you so much
Great article, thanks to this I got my project working :-)
ReplyDeletegood article
ReplyDeletegood
ReplyDeletethanks, useful
ReplyDeletethanks, it was useful.
ReplyDeletethanks Dear, it was useful.
ReplyDeletesuper
ReplyDeleteNice , You can check this also,http://www.programmers99.com/2015/07/submitting-form-data-into-database.html
ReplyDeletei pasted the same code....step by step...but i received an error of undefived variable row
ReplyDeletei received an error of undefined variable row......i pasted this same code
ReplyDeletegreat work
ReplyDeleteThanks Brother you made my day
ReplyDeletegood
ReplyDeletethank, your tutorial is great
ReplyDeletemaster detail using php and mysql only
ReplyDeletecan you please tell me how to send morethan two variables to php : i mean i need to send my username and comment text to php page.. can you please reply
ReplyDeletethanks
ReplyDeleteNice! +100
ReplyDeletevery nice code
ReplyDeletexxvxv
ReplyDeletegood
ReplyDeletehow i can insert multiple data
ReplyDeleteusername , password , age , job
Oh! This article has suggested to me many new ideas. I will embark on doing it. Hope you can continue to contribute your talents in this area. Thank you.
ReplyDeletesubway surfers
I found your this post while searching for some related information on blog search...Its a good post..keep posting and update the information. odzyskiwanie danych z uszkodzonego telefonu
ReplyDeleteWhen you use a genuine service, you will be able to provide instructions, share materials and choose the formatting style. tape storage singapore
ReplyDelete