Я плохо знаю javascript, специализируюсь по серверной части, можете мне пожалуйста подсказать как сделать пагинацию формы. К примеру, у меня есть большая форма (форма тестов, вопрос и 5 вариантов ответа, радио кнопками) с 30 вопросами, как я могу разделить, что бы на каждой страницу было к примеру по 5 вопросов ?
-
3Привет! Убери свой привет, а то сейчас модератор баракин придет и наругает! Он не любит когда здороваются. По вопросу - это должно быть 6 разных форм по сути. Т.е. вы по отдельности обрабатываете вопросы, пачками, а на сервере копите где-то в полной коллекции.– Darth26 янв 2016 в 14:27
1 ответ
Можете разбить вопросы внутри формы на несколько дивов. Первый див показать, остальные - спрятать и показывать по клику на кнопку (либо хранить следующий для показа див в data-атрибуте кнопки, либо просто показывать следующий за родителем див), либо по событию заполнения всех вопросов (в зависимости от предусмотренной логики). Что-то вроде этого: https://jsfiddle.net/fsu8asem/
html:
<form class="my-form">
<div id="div-1" class="my-div">
<div>Первая группа вопросов</div>
<button class="next-q" data-show="div-2" type="button">Дальше</button>
</div>
<div id="div-2" class="my-div">
<div>Вторая группа вопросов</div>
<button class="next-q" data-show="div-3" type="button">Дальше</button>
</div>
<div id="div-3" class="my-div">
<div>Третья группа вопросов</div>
<button class="next-q" data-show="div-4" type="button">Дальше</button>
</div>
<div id="div-4" class="my-div">
<div>Последняя группа вопросов</div>
<button type="submit">Готово</button>
</div>
</form>
css:
.my-form .my-div {
display: none;
}
.my-form .my-div:first-child {
display: block;
}
js (с использованием jquery):
jQuery(document).ready(function($){
$('.next-q').on('click', function(){
var $el = $(this),
next = $el.data('show');
$el.parent().hide();
$('#' + next).show();
});
});