Maison > interface Web > tutoriel CSS > Comment puis-je soumettre des données à partir de champs de formulaire masqués dans un formulaire Web ?

Comment puis-je soumettre des données à partir de champs de formulaire masqués dans un formulaire Web ?

Linda Hamilton
Libérer: 2024-11-30 05:41:17
original
532 Les gens l'ont consulté

How Can I Submit Data from Hidden Form Fields in a Web Form?

Soumettre les champs de formulaire masqués

Dans un formulaire Web complexe, il est souvent nécessaire de masquer des parties du formulaire en fonction de l'interaction de l'utilisateur. Ce dilemme se pose lorsque l'on tente de soumettre des données à partir de champs masqués, car les navigateurs ne soumettent généralement que les champs visibles sur la page, ignorant ceux portant le style "display:none".

Solution :

Alors que "display:none" empêche la soumission des champs, l'utilisation de "visibility:hidden" et "position:absolute" permet aux champs de rester masqués. tout en étant toujours inclus dans la soumission du formulaire.

.hidden {
  visibility: hidden;
  position: absolute;
}
Copier après la connexion

En définissant "visibility:hidden", les champs sont effectivement masqués à l'utilisateur sans affecter sa soumission. De plus, "position:absolute" permet de conserver la disposition visuelle d'origine.

Approche alternative :

Si l'effet visuel n'est pas crucial, envisagez une approche alternative qui évite le problème dans son ensemble.

1. Chargement dynamique du formulaire :

Récupérez chaque étape du formulaire de manière asynchrone à l'aide d'AJAX. De cette façon, seule l'étape active sera chargée et visible, éliminant ainsi le besoin de masquer les autres étapes.

2. Disposition du formulaire tabulaire :

Organisez les champs du formulaire dans une disposition tabulaire, en utilisant JavaScript pour basculer la visibilité de lignes ou de colonnes spécifiques en fonction des changements d'étape. Cette approche conserve la structure du formulaire et garantit que tous les champs sont toujours présents pour la soumission.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal