2012-09-17 35 views
10

Para un formulario HTML básico, me gustaría separar el formulario en tres pestañas, cada pestaña contendrá determinados campos y cuando envíe el formulario deseo que todos los datos en los tres formularios puedan entregar.Enviar campos ocultos en un formulario html

Así que tienen un menú creado por <ul> y <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> 

y por debajo de este menú, tengo tres divs que representan cada una de la pestaña:

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

La entrada controla los elementos se poner en cada una de las tabulaciones div. Y el javascript en la barra de navegación del menú controlará qué pestaña mostrar por llamada show() & hide() método de cada div. (Usando jQuery).

Ahora mi problema es:

1) Quiero ser capaz de enviar todo el formulario (todos los controles dentro de tres divs). Sin embargo, los formularios html no enviarán controles de entrada dentro de displayNone div, lo que significa que solo podré enviar los datos dentro de la pestaña que estoy viendo actualmente, pero no las otras dos pestañas.

2) También quiero hacer algunas funciones de JavaScript en ocultar elementos al inicializar el formulario en tab2 o tab3. Sin embargo, dado que son display: none, el javascript no tendrá ningún efecto.

Entonces, ¿hay alguna forma en que de alguna manera pueda ocultar el div, pero también ser capaz de enviar el formulario y realizar cualquier operación de javascript en él?

+1

Por favor, intente con el plugin jQuery UI Tabs: http://jqueryui.com/demos/tabs/ – diEcho

+1

Gracias @diEcho, sé que hay un plugin jQuery así, pero creo que estoy más feliz de saber si hay un solución para mi escenario en lugar de depender de una biblioteca. –

Respuesta

13

De acuerdo con la pantalla W3C: controles ninguno todavía pueden ser enviados al servidor, ya que se consideran controles successsful

17.13.2 controles con éxito

Un control exitoso es "válido" para su presentación . Cada control exitoso tiene su nombre de control emparejado con su valor actual como parte de el conjunto de datos de formulario enviado. Un control exitoso debe definirse dentro de un elemento FORM y debe tener un nombre de control.

Sin embargo:

  • Los controles que son discapacitado no puede tener éxito.
  • Si un formulario contiene más de un botón de envío, solo se activa el botón de envío activado.
  • Todas las casillas de verificación "activadas" pueden ser satisfactorias.
  • Para los botones de opción que comparten el mismo valor de el atributo de nombre, solo el botón de opción "activado" puede ser exitoso.
  • Para los menús, el nombre de control lo proporciona un elemento SELECT y los valores son provistos por los elementos OPTION. Solo las opciones seleccionadas pueden ser exitosas.
  • Cuando no hay opciones seleccionadas en , el control no tiene éxito y ni el nombre ni ningún valor se envía al servidor cuando se envía el formulario .
  • El valor actual de una selección de archivos es una lista de uno o más nombres de archivo.Una vez enviado el formulario, los contenidos de cada archivo se envían con el resto de los datos del formulario. Los contenidos del archivo se empaquetan según el tipo de contenido del formulario.
  • El valor actual de un control de objeto está determinado por la implementación del objeto.

Si un control no tiene un valor actual

cuando se envía el formulario, los agentes de usuario no están obligados a tratarlo como un control éxito.

Por otra parte, los agentes de usuario no deben considerar los siguientes controles éxito:

botones de reinicio. Elementos OBJECT cuyo atributo de declaración se ha establecido. Los controles y controles ocultos que no se procesan debido a los ajustes de estilo de la hoja pueden ser exitosos.

Por ejemplo:

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

todavía causará un valor para ser emparejado con el nombre "invisible-contraseña" y presentada con el formulario.

En cualquier caso, si eso no parece estar funcionando por qué no probar jQuery serialize() o serializeArray() en cada formulario y concatenar los valores y el Ajax de vuelta al servidor.

+0

Gracias, creo que he mezclado el concepto de discapacitado y oculto. Un rápido google me dice que solo los campos deshabilitados no serán enviados. –

3

En su primer punto, el hecho de que una entrada no muestre ninguna, no significa que no enviará esos campos.

En su segundo punto, no lo sigo del todo. ¿Estás diciendo que cuando abres una de las pestañas, quieres hacer algo al respecto? Si es así, entonces jQuery UI le permite hacer esto: -

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

¿Puede dar un ejemplo más completo, incluyendo la etiqueta de forma y algunos de los insumos?

+0

Gracias por su respuesta, sí, de hecho mi problema en el punto uno. En el punto 2, tengo una solución alternativa: hacer primero las operaciones js y luego ocultar las divs, lo que funciona bien. –

Cuestiones relacionadas