Discussion :

[Kasko]

Bonjour à tous,
J'aimerais savoir s'il vous plaît comment afficher un champ de type "INPUT" lorsque je coche une case à cocher.

Par exemple je ne veux afficher le champ suivant que si je coche cette case "":



Merci d'avance!!!

[01001111]

En admettant que la case à cocher est un input de type checkbox, tu peux faire ainsi:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<input type="checkbox" id="check"/>
<div id="container" style="visibility:hidden; border-radius:5px; border:1px solid #829fb3; width:300px; height:20px; background-color:white;"></div>
<script type="text/javascript">
window.onload=function() { 
       document.querySelector('#check').onclick=function(e) {
               if (e.target.checked) (
                        document.querySelector('#container').style.visibility="visible";
               } else {
                        document.querySelector('#container').style.visibility="hidden";
               }
       }
}
</script>

Bien sûr la même chose peut être faite en jquery ou autre librairie d'animation et tu peux animer la valuer opacity au lieu de visibility par exemple, pour avoir un résultat plus esthétique.

[Kasko]

Merci bien mais vous ne m'avez pas montré là où je dois placer le champ à afficher ainsi que ses différents attributs(par exemple onClick= "quelque chose").Merci d'avance!!!

[SpaceFrog]

Une petite recherche sur le forum ...
http://www.developpez.net/forums/d74...ps-formulaire/

[Kasko]

Ok merci mais je voudrais savoir si les champs afficher peuvent être dynamiquement traiter.Merci d'avance!!!

[01001111]

le champ à afficher peut être placé à l'intérieur du div.

Pour le traitement dynamique, vous entendez par là un traitement sans rechargement de page? un test des champs avant validation du formulaire?
Dans le premier cas, on peut utiliser ajax (asynchronous javascript and xml) avec l'objet xmlHttpRequest ou plus simplement une librairie comme jquery dont la fonction ajax fait strictement la même chose en plus simple.
On envoie ainsi des variables en méthode "post" au fichier serveur qui traitera les données.

Dans le second cas, on peut tester les champs avant envoi pour traitement, cela se fait en javascript avec des expressions régulières ou des opérateurs de comparaison pour vérifier que les champs ne sont pas vides:

Dans ce cas, j'opte personnellement en général pour un input type=button au lieu d'un input type=submit pour valider le formulaire, et je mets un écouteur onclick sur ce bouton qui va lancer une fonction de test.
cette dernière peut contenir ce genre d'exemples:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
// tester un input de type text
if (document.querySelector('input#monId').value!=="") {
       // préparer le traitement
} else {
       // alerter l'utilisateur que le champ est vide
}
// tester qu'au moins une case est cochée dans un groupe de cases à cocher
if (document.querySelectorAll('input[type="checkbox"].maClasse[checked]').length>0) {
       // préparer le traitement
} else {
       // alerter l'utilisateur qu'il faut cocher une case
}