Need help using jquery ajax for html forms.

Need help using jquery ajax for html forms.

Hi, I am having problem making a html form to use ajax to submit post method data to a php file then run a javascript function that runs the jquery .post function to grab some data from a php script.

so far what's happening is that my html form will act just like a html form.

Meaning when the user submits the inputs it will redirect the user to the php file.

here is the code:

here is the javascript:
[code]
$(document).ready(function(){
        $(document).pngFix();
$("#message_sending1").submit(function(){
return false;
});
$("#submit1").click(function(){
$('#message_sending').ajaxForm(function() {
var html='<a>Message:You suceeded on sending the message.</a>';
$('#app_content').html(html);
setTimeout(function(){open_market_apps('Interested_people','Market','Market_messages');},5000);
});
});
[/code]


I am using jquery and http://jquery.malsup.com/form/#ajaxForm... this is a plugin.

I tried doing it myself but never got any results.



Here is the html form:

It's inside a php echo

here it is:
[code]
echo"
<div id=\"write\"></div>
<form method=\"post\"id=\"message_sending1\"name=\"message_sending\"action=\"data_center.php\">
<input type=\"text\" id=\"text_send\" name=\"in_text\">
<input type=\"text\" id=\"todata\" name=\"to_text\">
<a id=\"writeto\"><b>To:</b></a>
<a id=\"subject\"><b>Subject:</b></a>
<input type=\"hidden\" name=\"database\" value=\"Market\">
<input type=\"hidden\" name=\"app_name\" value=\"Market_write_messages\">
<input type=\"hidden\" name=\"from\" value=\"$user\">
<TEXTAREA id=\"data\" name=\"data\">
</TEXTAREA>
<input id=\"submit1\"type=\"submit\"value=\"Send\">
</form>";[/code]


Here is what happens when I click the submit button. It takes me to the data_center.php file. Where it is a blank white page. The code works meaning I can see a new row added in database.

Don't focus on the document .ready  it's closed... in otherwords there is more JavaScript below but has nothing to do with the form processing.

Here is what I want this to do. Just when the person clicks the submit button. I want to load in a loading icon for now just for testing purposes it can be a text saying loading.

I then want the the data given to the php file and processed and then return true or false to figure out if it succeeded or failed.

Then the code should take off the loading stuff and then display a error or a success message with a count that will count down to seconds and then after a few seconds past it will load in data in a div showing the new stuff created in the database.



Now knowing that just for now I want to get a working form that won't refresh the web page or redirect me.
I want all this to be done on the same page.

How can I do this? Any ideas why I can't get this to work. Can someone walk me threw how to stop the html form from using the default function where it redirects you to a php file.