12.11.2015

Как сделать в форме Битрикса деление на блоки, заголовки, категории

Стандартная форма Битрикса позволяет сделать форму одной сплошной из полей вопросов и ответов, но часто нужно в подобной форме сделать разделение на блоки, чтобы большую форму было удобнее заполнять, например, выделить в отдельный блок поля категории Личные данные, Данные об авто сдаваемом в Трейд-ин и Данные нового авто и т.п. Примеров, масса.

На помощь нам приходит javascript.

Как и что делаем:

1. Создаем форму и в месте, где нам нужно разделение создаем скрытое поле, т.е. выбираемтип hidden. Т.е. создали блоки вопросов Личной информации, далее создали скрытое поле и далее уже создаем вопросы следующего блока.

2. Вставляем созданную. форму на страницу и смотрим ее в режиме кода в браузере. Наши скрытые поля выглядят там вот так: <input type="hidden" name="form_hidden_193" value="">
3. Далее после нашей формы в коде страницы вставляем наши javascript-ы такого вида:

<script type="text/JavaScript">
$('[name=form_hidden_193]').before('<tr><td class="nobord" colspan="2"><h2>Личная информация</h2></td></tr>');
</script>
<script type="text/JavaScript">
$('[name=form_hidden_242]').before('<tr><td class="nobord" colspan="2"><h2>Данные об авто сдаваемом в Трейд-ин</h2></td></tr>');
</script>
В нашем примере еще добавили класс nobord, чтобы не отображалась рамка и казалось, что блоки в разных табличках:

table.top_user td.nobord
{
border: none;
vertical-align: top;
}

Вот таким образом делаем сколько угодно скрытых полей и заменяем их на нужный нам код.
Количество показов: 15918