Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 27.09.2017, 16:26
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

AndrewDanilin,
А зачем вам нужен такой телетайпный стиль? Если бы поля как-то зависели друг от друга - в зависимости от того, что введено в предыдущем, выбирается следующее поле - тогда это имело бы смысл. А при равноправных полях зачем? Все поля можно заполнять в любой последовательности, независимо друг от друга
Ответить с цитированием
  #12 (permalink)  
Старый 27.09.2017, 16:38
Новичок на форуме
Отправить личное сообщение для AndrewDanilin Посмотреть профиль Найти все сообщения от AndrewDanilin
 
Регистрация: 26.09.2017
Сообщений: 9

сам скрипт уже написан постраничного перехода, вопрос в том, что к нему необходимы обязательный поля.. а допереть как их сделать, я не могу. нужен именно постраничный.
Ответить с цитированием
  #13 (permalink)  
Старый 27.09.2017, 17:01
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Сообщение от AndrewDanilin
сам скрипт уже написан постраничного перехода, вопрос в том, что к нему необходимы обязательный поля.. а допереть как их сделать, я не могу. нужен именно постраничный.
Несколько раз перечитал и не понял
Ответить с цитированием
  #14 (permalink)  
Старый 27.09.2017, 17:06
Новичок на форуме
Отправить личное сообщение для AndrewDanilin Посмотреть профиль Найти все сообщения от AndrewDanilin
 
Регистрация: 26.09.2017
Сообщений: 9

Буду краток тогда, нужен телетайпный стиль с обязательными полями на каждом тапе
Ответить с цитированием
  #15 (permalink)  
Старый 27.09.2017, 18:38
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

с некоторыми недоработками
<!DOCTYPE html>
<html >
<head>
</head>
<body>
	<div class="wrapper">
		<form action="#" method="post">
			<div class="step">
				<p class="step">Введите своё имя</p>
				<p><strong>Имя:</strong><input type="text" name="msg" id="msg" placeholder="Введите имя"></p>
			</div>
			<div class="step">
				<p class="step">Введите вашу фамилию</p>
				<p><strong>Фамилия:</strong><input type="text" name="surname" placeholder="Введите фамилию"></p>
			</div>
			<div class="step">
				<p class="step">Введите ваш email</p>
				<p><strong>Email:</strong><input type="text" name="email" placeholder="Введите ваш email"></p>
			</div>
			<p class="talign">
				<a href="#" class="back">Назад</a>
				<a href="#" class="next">Далее</a>
				<input type="submit" value="Завершить" onClick="Thanks();">
			</p>
		</form>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script>
$(document).ready(function() {
	var steps = $("form").children(".step").hide();
        $('a.back').hide();
        $('a.next').hide();
        $('input[type=submit]').hide();

	var current_step = 0;
        $(steps[current_step]).show();

	$(steps).on('input', function() {
            if($(this).find('input').val().length > 2) {
                if(current_step < steps.length - 1) {
                     $('a.next').show();
                     $("form input[type=submit]").hide();
                }
                 else  {
                     $('a.next').hide();
                     $("form input[type=submit]").show();
                }
            }
            else { 
                $('a.next').hide(); 
                $("form input[type=submit]").hide(); 
            }
        });

	$("a.next").click(function(){
                  $(steps[current_step]).hide(); 
		  current_step++;
                  $(steps[current_step]).show();
                  $(this).hide();
                 current_step > 0 ? $('a.back').show() : $('a.back').hide();
	});
	
	$("a.back").click(function(){
		if (current_step == 1) { 
			$(this).hide();
		}
		$("form input[type=submit]").hide();
		$("a.next").show();
                $(steps[current_step]).hide();
		current_step--;
                $(steps[current_step]).show();
	});
	

	
});

function Thanks(){
jQuery("body").empty();	// очищаем тело документа
jQuery("body").append("<h2><center>Спасибо!</center></h2>");
}
	</script>
</body>
</html>
Ответить с цитированием
  #16 (permalink)  
Старый 27.09.2017, 19:02
Новичок на форуме
Отправить личное сообщение для AndrewDanilin Посмотреть профиль Найти все сообщения от AndrewDanilin
 
Регистрация: 26.09.2017
Сообщений: 9

Спасибо большое, буду разбираться с js!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
проверка полей при отправке all4me1982 Общие вопросы Javascript 6 17.03.2015 14:02
Проверка полей serrrgggeee Javascript под браузер 0 08.10.2014 15:16
Проверка полей при потере фокуса Paltusssss Общие вопросы Javascript 2 13.08.2013 19:32
Проверка полей отправляемой формы. denisOgr jQuery 6 18.10.2010 19:40
проверка полей формы!!!! DENAT Общие вопросы Javascript 0 05.06.2008 22:14