Отправить поля формы внутри дисплея: none element

У меня длинная форма, которую я разбил на 6 шагов. Когда форма загружена, все этапы загружаются, но только первый шаг отображается. Остальные имеют CSS display:none, поэтому они скрыты. По завершении и проверке шага с помощью Javascript текущий шаг устанавливается на display:none, а новый шаг - на display:block. На последнем шаге пользователь отправляет форму. Однако, как и ожидалось, представлены только поля в элементе display:block на странице. Все заполненные поля в элементах с display:none игнорируются.

Есть ли способ отправить поля внутри элементов display:none?

Если нет, есть ли другой способ добиться такого же эффекта?

Ответ 1

Установите вместо них visibility:hidden и position:absolute. Поля не будут отправляться на сервер с display:none, но будет с visibility:hidden. Также, переключая "положение" на "абсолютное", вы должны получить тот же визуальный эффект.

Обновление. Это не похоже на проблему в любом текущем браузере (по состоянию на ноябрь 2015 г.). Поля отправляются, даже если для отображения установлено значение "нет". Однако поля, "отключенные", будут по-прежнему не представлены.

Ответ 2

Просто чтобы добавить что-то к ответу выше. Если вы хотите использовать slideDown() - перед установкой css элемента следующим образом:

$('element')
    .css({
        display: 'none'
        position: 'relative',
        visibility: 'visible'
    })
    .slideDown();

И slideDown() будет работать отлично. Вы можете использовать ту же логику для slideUp().