Скрипт jQuery Form to Form Wizard (v1.1) реализует функциональность обычной HTML-формы (тег <form>) с пошаговым заполнением полей и с основными необходимыми проверками.
Для преобразования вашей формы в пошаговую потребуется объединить группы элементов формы в тег FIELDSET, а все остальное сделает этот замечательный скрипт - разобьет страницу с формой на несколько страниц, добавит подходящий текст к каждому шагу, пронумерует страницы и отобразит кнопки навигации по форме. Это сделает форму более приятной к восприятию и интуитивно понятной.
В случае необходимости можно задать проверку некоторых полей на наличие введенных данных. Только после заполнения таких обязательных полей скрипт даст возможность перейти к следующему шагу работы с формой.
Единственное необходимое требование при использовании этого скрипта - вы должны иметь доступ к HTML-коду формы для вставки дополнительных тегов FIELDSET.
Демонстрация
Демо 1 - форма без проверки введенных данных
Демо 2 - форма с проверкой введенных данных
Установка
Шаг 1. Вставьте следующий код в тег <HEAD> страницы:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="formwizard.css" />
<script src="formwizard.js" type="text/javascript">
/***********************************************
* jQuery Form to Form Wizard
* Visit http://valex.net.ru/ for more.
***********************************************/
</script>
<script type="text/javascript">
var myform=new formtowizard({
formid: 'feedbackform',
persistsection: true,
revealfx: ['slide', 500]
})
</script>
Вышеуказанный код требует наличия файлов formwizard.js и formwizard.css. Скачать эти файлы в архиве - СКАЧАТЬ
Шаг 2. Вставьте следующий HTML код, который содержит пример формы, разбитой тегом FIELDSET на логические группы - которые и формируют отдельные страницы формы
<form id="feedbackform"> <fieldset class="sectionwrap"> <legend>Основная информация</legend> Имя:<br /> <input id="username" type="text" size="35" /><br /> Возраст:<br /> <input id="age" type="text" size="6" /><br /> Пол: <input type="radio" name="sex" value="male" /> Мужской <input type="radio" name="sex" value="female" /> Женский </fieldset> <fieldset class="sectionwrap"> <legend>Адрес</legend> Страна:<br /> <input id="country" type="text" size="35" /><br /> Область:<br /> <input id="state" type="text" size="35" /><br /> Адрес #1:<br /> <input id="addr1" type="text" size="35" /><br /> Адрес #2:<br /> <input id="addr2" type="text" size="35" /><br /> </fieldset> <fieldset class="sectionwrap"> <legend>Комментарии</legend> Любые дополнительные данные:<br /> <textarea id="feedback" style="width:350px;height:150px"></textarea> <br /> <input type="submit" /> </fieldset> </form>
И это все что требуется для установки скрипта!
Теперь рассмотрим возможные настройки более подробно.
Подготовка исходной формы к изменению
Что бы превратить исходную одностраничную форму в многостраничную - вам потребуется заключить каждую будущую "страницу" формы в тег <FIELDSET class="sectionwrap">. Разбивку на страницы скрипт проведет автоматически.
Ниже представлена случайная форма, где вставленные теги выделены красным - можете ориентироваться на этот шаблон.
<form id="feedbackform">
<fieldset class="sectionwrap">
<legend>Основные данные</legend>
Имя: <input type="text" />
Возраст: <input type="text" />
Пол: <input type="radio" name="sex" value="male" /> Male <input type="radio" name="sex" value="female" /> Female
</fieldset>
<fieldset class="sectionwrap">
<legend>Адрес доставки</legend>
Страна: <input type="text" />
Область: <input type="text" />
Адрес: <input type="text" />
</fieldset>
<fieldset class="sectionwrap">
<legend>Дополнительные данные</legend>
Feedback: <textarea></textarea>
</fieldset>
</form>
Итак! Для работы скрипта вам потребуется:
- Убедиться, что тег <form> содержит уникальное имя в атрибуте ID или NAME.
- Заключить будущие "страницы" формы в тег <fieldset class="sectionwrap"></fieldset>
- Создать внутри каждого тега <fieldset> дополнительные теги <legend>. Его содержимое будет кратко описывать каждый шаг заполнения формы
- Вызвать функцию new formtowizard() для этой формы.
Функция formtowizard()
Вы должны вызвать функцию formtowizard() внутри тега <HEAD> для запуска скрипта.
Синтаксис функции:
где uniquevar - произвольное, но уникальное имя переменной.
options - перечень настроек скрипта в виде ключ:значение.
Таким образом вызов функции formtowizard() может выглядеть примерно так:
<script type="text/javascript">
var myform=new formtowizard({
formid: 'feedbackform',
persistsection: true,
revealfx: ['slide', 500] //<--нет запятой в последней строчке
})
</script>
Ниже приведена таблица с перечнем и описанием всех возможных параметров работы скрипта, которые указываются при вызове функции formtowizard().
| Параметр | Описание |
|---|---|
| formid
Обязательный |
Обязательный параметр, содержащий значение, указанное в атрибуте ID или NAME тега <form>
Например <form id="feedbackform"> " </form> <form name="feedbackform"> " </form> |
| persistsection
по умолчанию - false |
Параметр типа boolean (может иметь значения только true или false), который заставляет скрипт запоминать шаг на котором остановился пользователь, и открывать его при следующем входе или после обновления страницы.
По умолчанию установлен в false. |
| revealfx
по умолчанию - ["slide", 500] |
Устанавливает эффект с которым будет появляться новая страница формы. Синтаксис: ["effectname", milliseconds], где "effectname" может быть одним из трех значений, указанных ниже:
Пример: var myform=new formtowizard({ formid: 'feedbackform', persistsection: false, revealfx: ["fade", 1000] }) Этот пример устанавливает эффект постепенного исчезновения страницы, длительностью в 1 секунду (1000 миллисекунд). |
| validate
по умолчанию - null |
Перечисление имен атрибутов ID или NAME тех полей формы, которые обязательно должны быть заполнены. Скрипт не разрешит пользователю перейти на другую страницу, пока эти поля не будут указаны. Пример: имеются обязательные поля: <input id="username" type="text" /> <input id="address" type="text" /> <input name="feedback" type="text" /> указание скрипту эти поля проверить на заполненность: var myform=new formtowizard({ formid: 'feedbackform', persistsection: false, validate: ['username', 'address', 'feedback'], revealfx: ["fade", 1000] }) |