В этом уроке мы рассмотрим замечательную форму регистрации, выполненную на jQuery и php. Данная форма компактна, имеет прогресс-бар, отправляет и проверяет данные на сервере в фоновом режиме, т.е. без перезагрузки страницы.
Приступим к реализации задачи.
Между тэгами <head> подключаем jquery, плагины ui.core.js и ui.progressbar.js, скрипт form.js и таблицу стилей regForm.css
<link rel="stylesheet" type="text/css" href="css/regForm.css">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript" src="js/ui.progressbar.js"></script>
<script type="text/javascript" src="js/form.js"></script>
В нужном месте сайта вставляем html-код формы
<div class="form-container">
<h1>Форма регистрации:</h1>
<p>Заполнено:</p>
<div id="progress"></div><label id="amount">0%</label>
<form>
<div id="panel1" class="form-panel">
<h2>Персональные данные:</h2>
<fieldset class="ui-corner-all">
<label>Имя:</label><input type="text" id="name">
<label>Фамилия:</label><input type="text" id="fam">
<label>Пароль:</label><input type="password" id="pass">
<label>Повтор пароля:</label><input type="password" id="repass">
</fieldset>
</div>
<div id="panel2" class="form-panel ui-helper-hidden">
<h2>Контакты:</h2>
<fieldset class="ui-corner-all">
<label>Email:</label><input type="text" id="email">
<label>Телефон:</label><input type="text" id="telefon">
<label>Адрес:</label><textarea rows="3" cols="25" id="adr"></textarea>
</fieldset>
</div>
<div id="thanks" class="form-panel ui-helper-hidden">
<h2>Отправка анкеты</h2>
<fieldset class="ui-corner-all">
<div id="loading"><img src="loader.gif" width="24" height="24" alt="*" /></div>
<p>Теперь Вы можете отправить свою анкету</p>
</fieldset>
</div>
<button id="submit" disabled="">Отправить</button>
<button id="next">Далее</button>
<button id="back" disabled="disabled">Назад</button>
</form>
</div>
В корневую директорию сайта положим файл poehali.php, который будет отвечать за обработку формы: (файл poehali.php можно положить в любую папку, тогда в скрипте form.js нужно будет указать путь к этому файлу) и файл loader.gif - картинка, которая будет показана посетителю в то время, когда форма была отправлена на сервер, а ответ еще не пришел.
В poehali.php после if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') { и до } производим обработку пришедших данных. Здесь вы можете занести эти данные в базу, проверить на правильность заполнения и обработать их стандартными способами php и в итоге отправить какое-либо сообщение пользователю (например через echo, print, exit("сообщение") ). В качестве примера скрипт poehali.php в демке просто отправляет пользователю некоторые пришедшие данные:
<?php
if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {
echo "<p class='otvet'>
Данные успешно переданы на сервер вот некоторые из них<br />
Имя: $_POST[name_post]<br />
Фамилия: $_POST[fam]<br />
</p>";
}
?>
Входящие данные на poehali.php собираются и отправлются скриптом form.js, он же показывает картинку loader.gif во время отправки/получения данных (строка 77-91). Вот эти строки:
$("#submit").click(function() {
$.ajax({
type: "POST",
url: "poehali.php",
data: "name_post="+$('#name').attr('value')+"&fam="+$("#fam").attr('value')+"&pass="+$("#pass").attr('value')+"&repass="+$("#repass").attr('value')+"&email="+$("#email").attr('value')+"&telefon="+$("#telefon").attr('value')+"&adr="+$("#adr").attr('value'),
success: function(answer){$("#thanks p").html(answer);}
});
});
$("#submit").click(function() {
return false;
});
$("#loading img").ajaxStart(function(){$(this).show();});
$("#loading img").ajaxStop(function(){$(this).hide();});
});
Здесь:
type: "POST" - метод, по которому будут отправлены данные.
url: "poehali.php" - обработчик данных.
Data - в этой строке мы указываем, что нужно передать и как назвать передаваемую переменную. Запись name_post="+$('#name').attr('value') возьмет значение value у элемента c id name и передаст в обработчик в переменной name_post (соответственно в обработчик придет переменная $_POST["name_post"])
success: function(answer){$("#thanks p").html(answer); - указываем куда поместить ответ от сервера, т.е. <div id = "thanks"><p>Сюда</p></div> (в нашем случае сервер передает html-код <p class='otvet'>текст</p>).
И последние две строки показывают картинку loader (ajaxStart) и прячут, когда ответ от сервера приходит (ajaxStop)
Вот и все. Удачи!