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
}