В этой статье мы рассмотрим пошаговую регистрацию с использованием jQuery.
Если регистрация на вашем сайте предусматривает заполнение нескольких десятков полей, очень не рационально размещать их на одной странице. Ведь пользователь существо очень ленивое и не захочет заполнять, увидев все эти поля.
Альтернативный вариант - разбить регистрацию на несколько шагов. Это порождает сразу много позитивных откликов - ведь начиная выполнять шаги у пользователя чаще всего появляется желание закончить их выполнение.
Так же логично разбивать регистрацию на логические блоки - контактная информация, адрес, личные данные и так далее.
Для пошаговой регистрации совсем не зачем создавать несколько форм и отдельно посылать данные на сервер. Гораздо удобнее все поместить в одну форму, но каждый шаг показывать пользователю лишь определенную часть формы. Именно такой и будет логика в нашем примере.
По мимо логики стоит учитывать, что вначале видна только ссылка "Вперед"/"Следующий шаг", а на последнем шаге её не видно, но видно "Назад" и "Регистрация".
Рассмотрим сам пример:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="/css/template.css" type="text/css" />
<SCRIPT type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></SCRIPT>
<script type="text/javascript" src="/js/steps_registration.js"></script>
<title>Страница</title>
</head>
<body>
<form method="get" action="send.php">
<div class="step">
<p class="step">Шаг 1</p>
<p><strong>Логин:</strong><input type="text" name="login" placeholder="Введите логин"></p>
<p><strong>E-mail:</strong><input type="text" name="mail" placeholder="Введите e-mail"></p>
<p><strong>Пароль:</strong><input type="password" name="passw" placeholder="Введите пароль"></p>
</div>
<div class="step">
<p class="step">Шаг 2</p>
<p><strong>Имя:</strong><input type="text" name="name" placeholder="Введите имя"></p>
<p><strong>Фамилия:</strong><input type="text" name="sname" placeholder="Введите фамилию"></p>
<p><strong>Возраст:</strong><input type="text" name="age" placeholder="Введите возраст"></p>
</div>
<div class="step">
<p class="step">Шаг 3</p>
<p><strong>Страна:</strong><input type="text" name="country" placeholder="Введите страну проживания"></p>
<p><strong>Город:</strong><input type="text" name="city" placeholder="Введите город проживания"></p>
<p><strong>Улица:</strong><input type="text" name="street" placeholder="Введите вашу улицу"></p>
</div>
<p class="talign">
<a href="#" class="back">Назад</a>
<a href="#" class="next">Следующий шаг</a>
<input type="submit" value="Зарегистрироваться">
</p>
</form>
</body>
</html>
body {
margin:0;
}
/* Общие стили закончилась */
form {
width:30%;
margin:0 auto;
}
form div.step {
display:none;
}
form div.step p.step{
text-align:center;
font-size:28px;
}
form div.step p{
}
form div.step p input{
float:right;
}
a.back {
display:none;
}
form input[type=submit] {
display:none;
}
a {
color:#006600;
text-decoration:none;
}
form p.talign{
text-align:center;
}Скрипт отвечающий за переключение шагов поместим в js/steps_registration.js, не забываем так же подключить библиотеку jQuery:
$(document).ready(function() { // Ждём загрузки страницы
var steps = $("form").children(".step"); // находим все шаги формы
$(steps[0]).show(); // показываем первый шаг
var current_step = 0; // задаем текущий шаг
$("a.next").click(function(){ // Событие клика на ссылку "Следующий шаг"
if (current_step == steps.length-2) { // проверяем, будет ли следующий шаг последним
$(this).hide(); // скрываем ссылку "Следующий шаг"
$("form input[type=submit]").show(); // показываем кнопку "Регистрация"
}
$("a.back").show(); // показываем ссылку "Назад"
current_step++; // увеличиваем счетчик текущего слайда
changeStep(current_step); // меняем шаг
});
$("a.back").click(function(){ // Событие клика на маленькое изображение
if (current_step == 1) { // проверяем, будет ли предыдущий шаг первым
$(this).hide(); // скрываем ссылку "Назад"
}
$("form input[type=submit]").hide(); // скрываем кнопку "Регистрация"
$("a.next").show(); // показываем ссылку "Следующий шаг"
current_step--; // уменьшаем счетчик текущего слайда
changeStep(current_step);// меняем шаг
});
function changeStep(i) { // функция смены шага
$(steps).hide(); // скрываем все шаги
$(steps[i]).show(); // показываем текущий
}
});Код php-отправки писать сюда не будем, так как это не совсем относится к этому уроку. Стоит лишь отметить, что письмо отправяется на адрес указанный в первом шаге формы. В любом случае вы можете скачать файлы демонстрации и посмотреть сами:
Проверить работоспособность примера вы можете на демо-странице:
Разобравшись в примере вы вполне сможете сделать свою регистрацию в несколько шагов на сайте, так же дополнив код своими разработками, например, можно сделать более красивый переход между шагами и т.д.
Добавить комментарий
Авторизоваться с помощью: