Complete form submit action without reloading the page - php

Question

I want the form-data to be sent to my php file after submitting it without loading the php file page. Then the data sent must fade in the feeds after processing. Can anyone help me? Here are my codings:
home.php:
<script>
$(document).ready(function(){
$('#content').load('feeds.php');
}, 1000
);
</script>
feeds.php:
<?php
//after connecting to my database and all
$sql = mysql_query("SELECT * FROM `posts` ORDER BY `post_id` DESC");
while($row = mysql_fetch_assoc($sql)) {
echo '<div id="post">' . $row['post'] . '</div><br />';
}
?>
Here's the form for submitting the post
<form id="post" action="post.php" method="POST">
<textarea name="post" width=300 height=150></textarea>
<input type="submit" value="Post" id="submit">
</form>
post.php:
//after connecting to the database
$post = $_POST['post'];
if($post != '') {
mysql_query("INSERT INTO `posts` (`post`) VALUE('$post')");
}
else {
echo 'Form is empty!';
}
#content:
<div id="content"></div>
nothing else.
Please help me by modifying this code! Thanks in return!

Answer 1

change this from
<form id="post" action="post.php" method="POST">
<textarea name="post" width=300 height=150></textarea>
<input type="submit" value="Post" id="submit">
</form>
to
<form id="form1">
<textarea id="post" width=300 height=150></textarea>
<input type="button" value="Post" id="submit">
</form>
And put this script on javascript area :
$('#submit').click(function(event) {
event.preventDefault(); /* Stops default form submit on click */
var post = $('#post').val();
$.ajax({
url: "post.php?",
data: 'post=' + post,
type: "POST",
success: function(data){
$('#content').empty();
$('#content').load('feeds.php');
}
});
});
I did not test it , but it should be something like this.
Hope this help.

Answer 2

The best solution should be JQuery along with AJAX. Send the data to any page using AJAX and based on the response you can fade the data.

Answer 3

Here is sample implementation:
jQuery(function($){
$("#post").submit(function(){
$.ajax({
url: $(this).attr("action"),
data: $(this).serialize(),
success: function(){
alert("data sent");
}
});
return false;
});