Отправить скрытые поля в форме html

Для базовой формы HTML я хотел бы разделить форму на три вкладки, каждая вкладка будет содержать определенные поля, а при отправке формы я хочу, чтобы все данные в трех формах могли быть отправлены.

Итак, у меня есть меню, созданное <ul> и <li > 

<ul class="subnav">
    <li class="subnav0 current"><a href="javascript:showTab('tab1');">Tab1</a></li>
    <li class="subnav1"><a href="javascript:showTab('tab2');">Tab2</a></li>
    <li class="lastItem subnav2"><a href="javascript:showTab('tab3');">Tab3</a></li>
</ul>

и ниже этого меню у меня есть три div, которые представляют каждую вкладку:

<div class="tab1"></div>
<div class="tab2 displayNone"></div>
<div class="tab3 displayNone"></div>

Элементы управления вводом будут помещены в каждый из разделов табуляции. И javascript в навигационной панели меню будет контролировать, какую вкладку отображать по методу вызова show() и hide() для каждого div. (Использование jQuery).

Теперь моя проблема:

1) Я хочу, чтобы иметь возможность отправить всю форму (все элементы управления в трех div). Тем не менее, html-формы не будут вводить элементы управления ввода в displayNone div, что означает, что я могу только отправлять данные на вкладке, которую я просматриваю сейчас, но не в двух других вкладках.

2) Я также хочу использовать некоторые функции javascript для скрытых элементов при инициализации формы в tab2 или tab3. Однако, поскольку они отображаются: none, javascript не будет иметь никакого эффекта.

Итак, можно ли каким-то образом скрыть div, но также иметь возможность отправить форму и выполнить любую операцию javascript на ней?

Ответы

Ответ 1

Согласно экрану W3C: ни один элемент управления не может быть отправлен на сервер, поскольку они считаются успешными элементами управления

17.13.2 Успешный контроль

Успешное управление является "действительным" для представления. Каждый успешный control имеет свое управляющее имя в паре с его текущим значением как часть представленный набор данных формы. Должен быть определен успешный контроль в элементе FORM и должно иметь управляющее имя.

Однако:

  • Элементы управления, которые отключены, не могут быть успешными.
  • Если форма содержит более одной кнопки отправки, активируется только активированная отправить кнопку успешно.
  • Все флажки "on" могут быть успешно.
  • Для переключателей, которые имеют одинаковое значение атрибут имени, может быть только переключатель "on"успешно.
  • Для меню имя управления предоставляется Элемент SELECT и значения предоставляются элементами OPTION. Только выбранные параметры могут быть успешными.
  • Если нет параметров выбранный, управление не выполняется, и ни имя, ни любые значения передаются на сервер, когда форма Представлено.
  • Текущее значение выбора файла - это список одно или несколько имен файлов. После подачи формы содержимое каждого файла передаются вместе с остальными данными формы. Файл содержимое упаковано в соответствии с содержимым формы type.
  • Текущее значение элемента управления объектом определяется реализация объекта.

Если элемент управления не имеет текущего значения

когда форма отправлена, пользовательские агенты не обязаны ее обрабатывать как успешный контроль.

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

Reset. Элементы OBJECT, атрибут declare которых установлен. Скрытые элементы управления и элементы управления, которые не отображаются из-за стиля настройки листа могут быть успешными.

Например:

<FORM action="..." method="post">
<P>
<INPUT type="password" style="display:none"  
          name="invisible-password"
          value="mypassword">
</FORM>

все равно приведет к соединению значения с именем "invisible-password" и отправлен с формой.

В любом случае, если это не работает, почему бы не попробовать jQuery serialize() или serializeArray() для каждой формы и объединить значения и ajax их обратно на сервер.

Ответ 2

В вашей первой точке, только потому, что вход является отображением none, не означает, что он не будет отправлять эти поля.

По второму пункту я не совсем понимаю. Вы говорите, что когда вы открываете одну из вкладок, вы хотите сделать некоторые действия над контентом? Если это так, то пользовательский интерфейс JQuery позволяет это сделать: -

http://jqueryui.com/demos/tabs/#event-show

Можете ли вы привести более полный пример, включая тег формы и некоторые входы?