Использование AJAX с формой?

Question

Я хотел бы знать, как выполнить следующую задачу, используя функцию JQuerys AJAX.

На моем веб-сайте я бы хотел, чтобы пользователь мог отправлять данные формы в PHP-скрипт, а затем загружать его в область div моего сайта.

Например, на моем сайте, когда пользователь выбирает ссылку из меню, он загружает выбранную страницу в область div моего сайта. Ниже приведен код этой функции:

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

Это работает, потому что, когда пользователь выбирает ссылку, значение атрибута href загружается в div #web_Content.

Теперь допустим, у меня есть следующая форма:

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

Как я смогу закодировать это так, чтобы при нажатии кнопки отправки он отправлял данные в скрипт php, но скрипт загружался в div, как моя система меню загружает страницы в div. Я посмотрел на функцию отправки jquerys, и я даже не могу заставить работать следующее:

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

Есть идеи, как отправить форму в скрипт PHP, а затем загрузить ее в раздел div?

Спасибо за любую помощь?

Answer 1

Ну, теперь URL-адрес содержится в атрибуте target тега form, поэтому поищите его:

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