Insert and view data without refresh using PHP, MySql and AJAX | 2my4edge

05 August 2013

Insert and view data without refresh using PHP, MySql and AJAX

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.
insert and view database image


DOWNLOAD                         LIVE DEMO

for that we need to make three file to clear explanation. let see those files.

  1. DB.PHP
  2. INDEX.PHP
  3. 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>
in the same index.php file, we have to add  the AJAX details to make operation. let see the AJAX

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>
the above showbox is to show the msg, what was store in the database.


RELATED POSTS:









54 comments:

  1. Good article thanks. . :)

    ReplyDelete
  2. A lil bit of code commenting would have helped much more...
    Nice tut tho...Thanks

    ReplyDelete
  3. You're using depreciated mysql_ functions. Please do not use this tutorial.

    ReplyDelete
    Replies
    1. he should use mysqli instead of mysql...this will resolve deprecated problem

      Delete
  4. thank for your post. i hope you will post more tip

    ReplyDelete
  5. thaks..nice post..

    ReplyDelete
  6. its 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"

    ReplyDelete
  7. there 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

    ReplyDelete
    Replies
    1. Use php to view your comments instead of ajax

      Delete
  8. I want te jquery plugin for retrieving data

    ReplyDelete
  9. It does work but i have same problem as stated by Roylee Wheels

    ReplyDelete
  10. good and completed tutorial. you wrote good explanation so make easy reader understand about AJAX. many thanks for your time write this tutorial.

    ReplyDelete
  11. Thanks for the post man

    ReplyDelete
  12. with out using html and JavaScript how can we load and insert an image into database

    ReplyDelete
  13. NIce article...and easy to understand...plz write a full tutorial about how to inset,delete,edit in mysql using ajax...

    ReplyDelete
  14. Thank you nice article

    ReplyDelete
  15. it s show only current comments but i want to show all from db

    ReplyDelete
  16. 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

    ReplyDelete
  17. Pity 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

    ReplyDelete
  18. Your blog is very useful to us....here is a way to findphp code for inserting data into database

    ReplyDelete
  19. you must a while loop to show all the comments from database and limit it on how many messages you want to display
    something 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

    ReplyDelete
  20. 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.

    ReplyDelete
  21. What 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.

    ReplyDelete
  22. very nice
    this is what i am searching :)

    thank you so much

    ReplyDelete
  23. Great article, thanks to this I got my project working :-)

    ReplyDelete
  24. thanks Dear, it was useful.

    ReplyDelete
  25. Nice , You can check this also,http://www.programmers99.com/2015/07/submitting-form-data-into-database.html

    ReplyDelete
  26. i pasted the same code....step by step...but i received an error of undefived variable row

    ReplyDelete
  27. i received an error of undefined variable row......i pasted this same code

    ReplyDelete
  28. Thanks Brother you made my day

    ReplyDelete
  29. thank, your tutorial is great

    ReplyDelete
  30. master detail using php and mysql only

    ReplyDelete
  31. can 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

    ReplyDelete

^