Envíe los campos del formulario dentro de la pantalla: ningún elemento

Tengo un formulario largo que he dividido en 6 pasos. Cuando se carga el formulario, se cargan todos los pasos, pero solo el primer paso es visible. El resto tiene CSS de display:nonepor lo que están ocultos. Cuando un paso se completa y valida con Javascript, el paso actual se establece en display:noney el nuevo paso se establece en display:block. En el paso final, el usuario envía el formulario. Sin embargo, como se esperaba, solo display:blockse envían los campos del elemento en la página. display:noneSe ignoran todos los campos completados en los elementos con .

¿Hay alguna forma de enviar los campos dentro de los display:noneelementos?

Si no es así, ¿hay otra forma de lograr el mismo efecto?

javascript css forms

— Nick Petrie
fuente

¿En qué navegador vio este comportamiento? Los navegadores parecen enviar elementos de formulario dentro de display: nonecontenedores en todas mis pruebas.

— temblor

Respuestas:

177

Configúrelos en visibility:hiddeny en su position:absolutelugar. Los campos no se enviarán al servidor con display:none, sino que estarán con visibility:hidden. Al alternar también "posición" a "absoluta" debería obtener el mismo efecto visual.

Actualización Esto ya no parece ser un problema en ningún navegador actual (a partir de noviembre de 2015). Los campos se envían incluso si la visualización está configurada como "ninguna". Sin embargo, los campos que están 'deshabilitados' seguirán sin enviarse.

— adam0101
fuente

Esto no parece ser un problema en ningún navegador actual. Los campos se envían incluso si la visualización está configurada como "ninguna". Sin embargo, los campos que están 'deshabilitados' seguirán sin enviarse.

— adam0101

IE8 (¡sorpresa!) Todavía tiene problemas con la publicación de campos configurados en display:none;. El mismo problema ocurre si el campo tiene otro elemento HTML encima.

— Erik Töyrä Silfverswärd

@Pacerier, sí disabledevita que se envíen valores, pero en algunos navegadores más antiguos, display:nonetambién tendría este efecto. Tenga en cuenta que esta respuesta se publicó hace 4 años y solo se aplica a los desarrolladores que necesitan desarrollar para esos navegadores más antiguos.

— adam0101

Es 20 de enero y usamos las últimas versiones de chromium y Firefox, pero aún no puedo publicar campos que estaban ocultos antes en la carga

— Masinde Muliro

Chrome 49 aquí, puede confirmar que enviar elementos de entrada dentro de la pantalla: ninguno NO funciona.

— csvan

El HTML4, sección 17.13.2, dice explícitamente que incluso los controles ocultos que usan la pantalla: ninguno puede ser válido para el envío.

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

Entonces, si el navegador ignora display: none, entonces no es completamente compatible con HTML. Recomiendo cambiar a un navegador real.

— elixon
fuente

Un programador no puede decirles a los visitantes qué navegador también usan y estoy teniendo el mismo problema con la última versión de Firefox. Intentando pantalla: ninguna o visibilidad: oculta pero ninguna funciona.

— DonP

¿Quién más está colocando pancartas "Es hora de actualizar su navegador" en tantos sitios? ;-) Lo entiendo. No quiso decir que "el programador no puede decirle a los visitantes qué navegador usar", eso infringiría la libertad de expresión ... Probablemente se refería a "programador contratado". OKAY. Mi publicación no fue muy útil porque solo quería señalar cuál es el comportamiento correcto dictado por los estándares. Eso es.

— elixon

En cualquier caso, mi comentario sobre visibilidad: oculto (y tal vez incluso mostrar: ninguno) fue una tontería cuando me di cuenta de que en mi caso es un error, o más bien un descuido, escrito en el estándar HTML. Si una casilla de verificación no está marcada y el formulario se envía, es como si ni siquiera estuviera allí. No sólo no presenta nada (perdón por el doble negativo) sino que no se somete en absoluto.

— DonP

Entonces, parece que no era un navegador peculiar que no fuera compatible con HTML. Caso cerrado.

— elixon