Регистрационная форма с прогресс-баром

В этом уроке мы рассмотрим замечательную форму регистрации, выполненную на jQuery и php. Данная форма компактна, имеет прогресс-бар, отправляет и проверяет данные на сервере в фоновом режиме, т.е. без перезагрузки страницы.

demosourse

Приступим к реализации задачи.

Между тэгами <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)

Вот и все. Удачи!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.net.tutsplus.com
Перевел: Евгений Стыценков
Урок создан: 26 Апреля 2009
Просмотров: 59312
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^