Using AJAX With A Form?

I would like to know how to accomplish the following task using JQuerys AJAX feature.

On my website i would like the user to be able to submit form data to a PHP script and have that scipt then load into a div area of my site.

For example, on my site, when a user selects a link from the menu, it will load the selected page into a div area of my site. Below is the code for this feature:

$('#horizontal_Menu a').click(function(e)
{
    e.preventDefault();
    $('#web_Content').load($(this).attr('href'), function()
    {
    });
});

This works because when a us开发者_JS百科er selects an link the href attributes value is loaded into the #web_Content div.

Now lets say i have the following form:

<form id="form_Ref" method="post">
    <input type="text" name="regUname" />
    <input type="submit" value="Go" />
</form>

How would i be able to code this so that when the submit button is clicked, it sends the data to the php script but that the script is loaded inside the div like my menu system loads pages into the div. I have looked at the jquerys submit function and i cant even seem to get the following to work:

$('#form_Ref').submit(function() 
{   
  alert('Submit button is clicked.');
  return false;
});

Any ideas how to submit a form to a PHP script and then have it load into a div section?

Thanks for any help?

Well, the url is now held in the target attribute of the form tag, so look for that:

$('#form_Ref').submit(function(e)
{
    e.preventDefault();
    $('#web_Content').load($(this).closest('form').attr('target'), function()
    {
    });
});