web-dev-qa-db-fra.com

Soumettre des champs de formulaire dans display: aucun élément

J'ai un long formulaire que j'ai divisé en 6 étapes. Lorsque le formulaire est chargé, toutes les étapes sont chargées, mais seule la première étape est visible. Les autres ont CSS de display:none donc ils sont cachés. Lorsqu'une étape est terminée et validée avec Javascript, l'étape actuelle est définie sur display:none et la nouvelle étape sur display:block. À la dernière étape, l'utilisateur soumet le formulaire. Cependant, comme prévu, seuls les champs de l'élément display:block de la page sont soumis. Tous les champs complétés dans les éléments avec display:none sont ignorés.

Est-il possible de soumettre les champs à l'intérieur des éléments display:none?

Sinon, y a-t-il un autre moyen d'obtenir le même effet?

javascriptcssforms
66
Nick Petrie

Définissez-les sur visibility:hidden et position:absolute à la place. Les champs ne seront pas envoyés au serveur avec display:none, mais le seront avec visibility:hidden. En basculant également "position" sur "absolu", vous devriez obtenir le même effet visuel.

Mise à jour Cela ne semble plus être un problème dans aucun navigateur actuel (à la date de nov. 2015). Les champs sont soumis même si l'affichage est défini sur «aucun». Les champs "désactivés" continueront cependant à ne pas être soumis.

142
adam0101

Juste pour ajouter quelque chose à la réponse ci-dessus. Si vous voulez utiliser slideDown() - juste avant de définir le css de l'élément comme ceci:

$('element')
    .css({
        display: 'none'
        position: 'relative',
        visibility: 'visible'
    })
    .slideDown();

Et slideDown() fonctionnera parfaitement. Vous pouvez utiliser la même logique pour slideUp().

0
Hristo Enev

Le HTML4, section 17.13.2, dit 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

Donc, si le navigateur ignore display: none, il n'est pas totalement compatible HTML. Je recommande de changer pour un vrai navigateur.

0
elixon