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

Question

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

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

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

Answer 1

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

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

Answer 2

HTML4, раздел 17.13.2, прямо говорит, что даже скрытые элементы управления, использующие отображение: ни один не может быть действительным для отправки.

https://www.w3.org/TR/html401/interact/forms.html

Так что, если браузер игнорирует display:none, он не полностью поддерживает HTML. Я рекомендую перейти на настоящий браузер.

Answer 3

Если вы обнаружите, что ваш ввод не отправлен с и вы хотите, чтобы ваш элемент не занимал место, есть еще один вариант, о котором я нигде не упоминаю.

Кажется, работает, но только если у вашего элемента нет дочерних элементов.

      display: contents;

Проверьте поддержку браузера, так как это новая функция CSS.

Answer 4

display:none - не означает, что элементы формы не отправляются (просто не отображаются)... Они отправляются в текущей версии Chrome, несмотря на то, что они скрыты.

Answer 5

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

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

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

Answer 6

Во многих старых браузерах есть ошибки, в которых «display:none» странным образом удаляет элемент... например, в браузерах Webkit до 2012 года, где «display:none», скажем, при нажатии кнопки отправки, а затем нажатие «return» не отправляет данные поля формы на сервер. Также бывают случаи, когда «display:none» добавлено к полям ввода типа «hidden», чтобы скрыть их в старых браузерах IE, не может отправить эти входные данные на сервер.

Консенсус всегда должен заключаться в том, чтобы НЕ ИСПОЛЬЗОВАТЬ "display:none", чтобы скрыть данные поля формы или любое поле, которое обычно не отображается, но которое все равно должно быть видно, скажем, средством чтения с экрана, отправить данные поля формы или прочитать поисковые системы. Я использую "display:none" только тогда, когда действительно хочу временно удалить что-то со страницы, но позже снова включить это.

Ниже приведена альтернатива «display:none», которая просто визуально скрывает элемент от пользователя и полностью удаляет его из потока страницы, не скрывая его содержимое или данные:

      .hide {
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    visibility: hidden !important;
}