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?
Por favor, intente con el plugin jQuery UI Tabs: http://jqueryui.com/demos/tabs/ – diEcho
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. –