slogin.info

ihc 468x60 1 1
Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна5 / 5
 
Автор: Администратор
Просмотров: 9671
Теги: javascript, jQuery, регистрация, step

В этой статье мы рассмотрим пошаговую регистрацию с использованием 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-отправки писать сюда не будем, так как это не совсем относится к этому уроку. Стоит лишь отметить, что письмо отправяется на адрес указанный в первом шаге формы. В любом случае вы можете скачать файлы демонстрации и посмотреть сами:

download

Проверить работоспособность примера вы можете на демо-странице:

demo

Разобравшись в примере вы вполне сможете сделать свою регистрацию в несколько шагов на сайте, так же дополнив код своими разработками, например, можно сделать более красивый переход между шагами и т.д.

Добавить комментарий

Авторизоваться с помощью:

     


Защитный код
Обновить

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • intuit89
    5.60
  • Varvarka
    4.00
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • dimasik_3557
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
  • Hozephlof
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Похожие материалы

Языки программирования сайтов

Приветствую всех посетителей моего сайта. В этой статья я расскажу вам о языках программирования, которые нужны для управления, созданий и разработки своего сайта.

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее
Как подключить на свой сайт jQuery

Для многих новичков в создании сайтов непонятно, что же такое JQuery, хоть они и постоянно слышат о нем и даже возможно пользовались.

Как мы знаем есть язык JavaScript, который позволяет работать динамически с элементами на странице и делать страницу более привлекательной.

Теги:

javascript, jQuery, google, jquery.min

Комментариев: 0 Подробнее
Ajax-форма обратной связи на JQuery

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

Теги:

javascript, form, jQuery, ajax, onclick

Комментариев: 0 Подробнее
Увеличение изображения при нажатии на него.

В этой статье мы расскажем о том, как сделать модальное окно с увеличенным изображением.

Теги:

javascript, img, jQuery

Комментариев: 0 Подробнее

Последнее с форума

intuit89 аватар
Работаем в прежнем режиме, ждем новых заказов с интересными проектами...
Перейти в тему
ZOMRO аватар
Виртуальные выделенные сервера на облачной платформе Облачные VDS/VPS — это услуга, которая поможет...
Перейти в тему
ZOMRO аватар
Друзья, встречайте новинку в ассортименте наших услуг — тарифный план “Nano”. Тариф VDS/VPS «NANO» ...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.