Отправка формы без перезагрузки страницы с использование JQuery
Один из возможных вариантов с использованием функции ajaxForm(), ajaxSumbit()
| Цитата |
| Плагин jQuery Form позволяет не только сделать новые ajax-формы, но и довольно просто «проапгрейдить» уже существующие формы таким образом, чтобы их можно было использовать вместе с Ajax. Основные методы, ajaxForm и ajaxSubmit, собирают информацию из элементов формы, поддерживают многочисленные опции, использование которых даст полный контроль над передачей данных. |
<html>
<head>
<title>Отправьте нам свой комментарий</title>
<script language="javascript" src="/jquery.min.js"></script>
<script language="javascript" src="/jquery.form.js"></script>
<script language="javascript" src="/myscript.js"></script>
</head>
<body>
<h1>Добавить комментарий:</h1>
<form id="myform" action="/addcomment.php" method="POST">
Ваше имя: <input type="text" name="user"/><br />
<textarea name="comment"></textarea><br />
<input type="submit" value="Отправить"/>
</form>
<!--В этот блок мы будем выводить результат выполнения обработчика PHP-->
<div id="result"></div>
</body>
</html>
<?php
//Обрабатываем $_POST
//Проверяем нажатие simbit
//Записываем в БД или в файл
//Выводим сообщение об удачном завершении
//Или
//Сообщаем пользователю об ошибке
?>
$(document).ready(function() {
//Вешаем на нашу форму функцию ajax.Form()
$('#myform').ajaxForm({
//Результат работы обработчика выведем в нашем div
target: '#result',
//Укажем путь и сам обработчик, можно неиспользовать - если в самой форме явно указан обработчик в action
url: '/addcomment.php',
//На время обработки данных обработчикам, до окончания обрабодки повесим анимацию (допустим gif - loading...)
beforeSend: function()
{
$('#result').html("<img src='/images/load.gif' border='0'/>")
},
//Успешное окончание обработки
success: function() {
$('#result').fadeIn('slow');
}
//Так же есть доп. опции - ссылка ниже
});
});
$(document).ready(function() {
var option{
target: '#result',
url: '/addcomment.php',
beforeSend: function()
{
$('#result').html("<img src='/images/load.gif' border='0'/>")
},
success: function()
{
$('#result').fadeIn('slow');
}
}
$("#myform").ajaxSubmit(options);
});
});