Afficher un champ en cochant une case à cocher

Version imprimable

28/09/2015, 20h30
Kasko

3 pièce(s) jointe(s)

Afficher un champ en cochant une case à cocher

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 "Pièce jointe 189010":

Pièce jointe 189011

Merci d'avance!!!

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

Code:

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.

29/09/2015, 09h49
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!!!
29/09/2015, 09h56
SpaceFrog

Une petite recherche sur le forum ...
http://www.developpez.net/forums/d74...ps-formulaire/
29/09/2015, 10h40
Kasko

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

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:

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 }

29/09/2015, 14h42
Kasko

Merci 01001111.Dans ce cas je n'ai pas à mettre le code que vous avez fourni plus haut?
Ou bien si ça ne vous dérange je souhaite vraiment avoir un code d'exemple au complet car je suis très nul en javascript et c'est très urgent.Merci d'avance!!!
29/09/2015, 14h48
01001111

Je peux vous aider, mais il faut au moins que vous fassiez le layout en html css et que vous le postiez ici, avec explications (quels champs doivent être testés, que doit-on faire en dynamique, etc...)
Je vous rappelle quand même que le but de ce forum est d'apprendre, pas de faire faire le travail.

1 pièce(s) jointe(s)

Bonjour à tous,

Je viens d'exécuter le code suivant :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function myFunction(elem){ elsuiv = elem.nextSibling; if(elsuiv.nodeName == '#text'){ elsuiv = elsuiv.nextSibling; } if(elsuiv.style.display == 'none'){ elsuiv.style.display = 'block'; }else{ elsuiv.style.display = 'none'; } } <input type="checkbox" name="pret" value="non" onclick="myFunction(this)"> <div class="inputscaches" style="display:none;" > <form method="post" action = "<c:url value="/FormDossier"/>"> <input type="text" name="motif" placeholder="" /> <input type="text" name="decision" placeholder="" /> </form> </div>
ça me donne bien le résultat escompté coté affichage.Ci-dessous l'aperçu du résultat :

Pièce jointe 189228

Je voudrais en cliquant sur enregistrer créer un identifiant dans une table pour chacune des lignes où j'ai cocher la case et insérer les données que j'ai saisies dans les différents formulaires.Est-ce que ce code me donnerai le résultat escompté?Sinon quelqu'un peut me guider?Merci d'avance!!!

02/10/2015, 06h04
01001111

Oui, vous pouvez passer par un tableau associatif, puis transmettre les résultats du formulaire au format json via jquery ajax au serveur... c'est une méthode qui évite le rechargement de page à la soumission d'un formulaire.
la fonction JSON à utiliser est stringify

Code:

var json=JSON.stringify(table);

pour l'ajax:
http://api.jquery.com/jquery.ajax/

il faut vérifier que le langage serveur que vous utilisez est capable de décoder le json (ex: json_decode en php)
et il faut peut-être faire les vérifications nécessaires plutôt côté serveur (ex: contenu obligatoire, nombre de soumissions maximum)
02/10/2015, 10h32
Kasko

Merci bien.Si possible je voudrais une explication plus explicite.Je sais que vous voulez que je fasse des recherche pour arriver à mes fins mais je tiens à vous dire que je suis en état d'urgence car je doit soutenir le 10 de ce mois et mon encadreur insiste à ce que je fasse ça comme il l'a demandé pire encore il me reste plus d'un tiers à développer.d'ailleurs j'ai suivi le lien que vous m'avez fourni malheureusement la documentation est en anglais donc vue que je suis profane en jQuery et ajax et même en Json si je me permet de comprendre ça maintenant je risque de soutenir avec une application non complet ce qui pourrait me pénaliser devant les jury.Je sait que le but d'un forum est d'aider et non faire le travaille mais je pense que face à une situation comme la mienne les experts peuvent faire preuve de compréhension et je vous assure qu'après la soutenance je ferai de mon mieux pour apprendre ces langages.Je développe en JAVA J2E.Merci d'avance!!!
02/10/2015, 14h10
01001111

Donnez-moi un plan des champs à implémenter et les eventuels tests à faire ou restrictions, je ferai le code javascript/html/css pour vous. JAVA, je ne connais pas, donc il faudra demander de l'aide sur le forum qui est dédié à ce langage.
02/10/2015, 15h55
Kasko

Bonjour,
pour les champs c'est exactement l'image que j'ai mise plus haut.Pour chaque case à cocher ce sont les 2 champs qui doivent s'afficher à savoir là où je dois saisir le motif et la décision.Pour la limite des cases à cocher, je préfère que ça soit indéfinie puisque le nombre varie parfois c'est zéro et y a des moment où ça peut atteindre une trentaine voire plus.Merci d'avance!!!
03/10/2015, 15h46
NoSmoking

Bonjour,
peut être que cette discussion devrait t’intéresser Insertion/Suppression d'une ligne d'une TABLE

Bonjour,
si on reprend ton code :

Code:

1
2
3
4
5
6
7
<input type="checkbox" name="pret" value="non" onclick="myFunction(this)">
<div class="inputscaches" style="display:none;" >
<form  method="post" action = "<c:url value="/FormDossier"/>">
    <input type="text" name="motif" placeholder="" />
    <input type="text" name="decision" placeholder="" />
</form>
</div>

Il manque un identifiant de la ligne à modifier.
Exemple

Code:

1
2
3
4
5
6
7
8
9
10
<?php 
$id = $row['id'] ; // récupéré d'une table en BdD ??
?>
<input type="checkbox" name="pret[<?php echo $id; ?>]" value="non" onclick="myFunction(this)">
<div class="inputscaches" style="display:none;" >
<form  method="post" action = "<c:url value="/FormDossier"/>">
    <input type="text" name="motif[<?php echo $id; ?>]" placeholder="" />
    <input type="text" name="decision[<?php echo $id; ?>]" placeholder="" />
</form>
</div>

Pour le reste : EXPLIQUE-toi CLAIREMENT, sur une exemple PRECIS.

05/10/2015, 11h30
01001111

encore une question:
est-il possible de savoir si vous vous basez sur une base de données (si oui laquelle?) pour générer les entrées du formulaire?
est-il autorisé de faire la soumission du formulaire via jquery, ou doit-on la faire en post par le action du formulaire ou un form.submit(); ?
pour vous aider dans votre code, j'ai besoin de savoir ceci.
05/10/2015, 11h50
Kasko

Bonjour je travaille avec la base de données MYSQL.Pour ce qui est de la soumission du formulaire,l'essentiel que les données soit insérer dans la base de données.Donc si jquery permet de le faire y a aucun souci.Merci d'avance!!!
05/10/2015, 12h53
Invité

Bonjour,

on ne vois pas beaucoup de ton code...
Or, ce n'est pas à nous de l'écrire à ta place.

Montre-nous au moins si tu as avancé, fait quelque chose de ton coté,...
Et un exemple PRÉCIS.

Merci d'avance!!! :aie: