Soumettre les champs du formulaire à l'intérieur de l'élément display:none

Question

J'ai un formulaire long que j'ai divisé en six étapes. Lorsque le formulaire est chargé, toutes les étapes sont chargées, mais seule la première étape est visible. Les autres ont des CSS de display:none pour qu'ils soient cachés. Lorsqu'une étape est complétée et validée par Javascript, l'étape en cours devient display:none et la nouvelle étape est fixée à display:block . À la dernière étape, l'utilisateur soumet le formulaire. Cependant, comme prévu, seuls les champs de display:block de la page sont soumis. Tous les champs complétés dans les éléments avec display:none sont ignorées.

Existe-t-il un moyen de soumettre les champs à l'intérieur du fichier display:none éléments ?

Si ce n'est pas le cas, existe-t-il un autre moyen d'obtenir le même effet ?

Answer 1

Réglez-les sur visibility:hidden y position:absolute à la place. Les champs ne seront pas envoyés au serveur avec l'option display:none mais sera avec visibility:hidden . En réglant également la "position" sur "absolue", vous devriez obtenir le même effet visuel.

Mise à jour Ce problème ne semble plus se poser dans les navigateurs actuels (depuis novembre 2015). Les champs sont soumis même si l'affichage est réglé sur "none". Les champs qui sont "désactivés", cependant, continueront à ne pas être soumis.

Answer 2

Le HTML4, section 17.13.2, indique explicitement que même les contrôles cachés utilisant display:none peuvent être valides pour la soumission.

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

Ainsi, si le navigateur ignore display:none, c'est qu'il n'est pas entièrement compatible avec le langage HTML. Je recommande d'opter pour un vrai navigateur.

Answer 3

Display:none - ne signifie pas que les éléments du formulaire ne sont pas soumis (simplement pas affichés)... Ils sont soumis dans la version actuelle de Chrome, bien qu'ils soient cachés.

Answer 4

Il existe des bogues dans de nombreux navigateurs plus anciens où l'option "display:none" supprime un élément de manière étrange. ...comme Webkit les navigateurs antérieurs à 2012, où "display:none" sur un bouton de soumission, par exemple, puis le fait d'appuyer sur "return", ne soumettaient pas les données du champ de formulaire au serveur. Il arrive également que l'ajout de la mention "display:none" aux champs de saisie de type "hidden" pour les masquer dans les anciens navigateurs IE ne permette pas d'envoyer les données de ces champs au serveur.

Le consensus devrait toujours être de NE PAS UTILISER "display:none" pour masquer les données d'un champ de formulaire ou tout autre champ qui n'est normalement pas affiché, mais qui doit quand même être vu par un lecteur d'écran, soumettre les données d'un champ de formulaire ou être lu par les moteurs de recherche. Je n'utilise "display:none" que lorsque je veux vraiment supprimer quelque chose. temporairement de la page, mais l'activer à nouveau par la suite.

Vous trouverez ci-dessous une alternative à "display:none" qui cache visuellement l'élément à l'utilisateur et le supprime complètement du flux de la page sans masquer son contenu ou ses données :

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