aide afficher/masquer des champs de formulaire

[adminchu]

Bonjour à tous,

Je bloque sur une fonctionnalité plutôt basique que je n'arrive pas à faire fonctionner : j'ai un formulaire html qui propose de laisser ses coordonnées grâce à un choix par boutons radio :

Souhaitez-vous recevoir la convocation ?
NON OUI

• Si on choisi "non" les champs pour saisir ses coordonnées restent masqués
  Si on choisi "oui" les champs apparaissent

Je n'arrive pas à masquer les champs quand on clique sur "non" et à les faire apparaître quand on clique sur "oui".
Je vous joins deux screenshots.

Note : pour la petite histoire ce formulaire est créé sous le CMF modX et utilise des classes bootstrap mais ce n'est pas le problème. Ne soyez donc pas surpris de certaines commandes/syntaxe figurant dans le code.

Merci d'avance pour votre aide.

[webmaster]

Bonjour,

C'est un exercice assez facile normalement.
Le plus simple est de détecter le onchange sur les radio

Code : Tout sélectionner

<form>
<input type="radio" name="recevoirconvoc[]" onchange="hideDiv()">Non
<input type="radio" name="recevoirconvoc[]" onchange="showDiv()">Oui
</form>

<div id="convocation">
	LES CHAMPS DE FORMULAIRE
</div>

<script>
function hideDiv() {
	document.getElementById("convocation").style.display="none";
}	
function showDiv() {
	document.getElementById("convocation").style.display="bloc";
}	
</script>

[adminchu]

Bonjour,

C'est un exercice assez facile normalement.
Le plus simple est de détecter le onchange sur les radio

Code : Tout sélectionner

<form>
<input type="radio" name="recevoirconvoc[]" onchange="hideDiv()">Non
<input type="radio" name="recevoirconvoc[]" onchange="showDiv()">Oui
</form>

<div id="convocation">
	LES CHAMPS DE FORMULAIRE
</div>

<script>
function hideDiv() {
	document.getElementById("convocation").style.display="none";
}	
function showDiv() {
	document.getElementById("convocation").style.display="bloc";
}	
</script>

Un grand merci pour ton aide !
J'étais parti sur une voie beaucoup plus compliquée, ta méthode est très simple.

[adminchu]

Bonjour,

C'est un exercice assez facile normalement.
Le plus simple est de détecter le onchange sur les radio

Code : Tout sélectionner

<form>
<input type="radio" name="recevoirconvoc[]" onchange="hideDiv()">Non
<input type="radio" name="recevoirconvoc[]" onchange="showDiv()">Oui
</form>

<div id="convocation">
	LES CHAMPS DE FORMULAIRE
</div>

<script>
function hideDiv() {
	document.getElementById("convocation").style.display="none";
}	
function showDiv() {
	document.getElementById("convocation").style.display="bloc";
}	
</script>

Si j'osais je te demanderais bien une petite subtilité supplémentaire. Partant de ce principe, quand on clique sur "oui", est-ce que je peux rendre les champs qui s'affichent obligatoires ?

[webmaster]

Ca serait a peine plus subtil

Deja il faudrait définir les champs obligatoires avec un attribut data-obligatoire="Y"
ex :
<div class="champ" data-obligatoire="Y">champ input</div>

Ensuite la fonction showDiv() est a peine plus complexe

Code : Tout sélectionner

function showDiv() {
	var elements=document.querySelectorAll("div.champ");
	console.log(elements);
	for (var i=0; i<elements.length; i++) {
		var e=elements[i];
		if (e.hasAttribute("data-obligatoire")) {
			e.style.display="block";
		} else {
			e.style.display="none";
		}
	}
}	

Remarque, l'événement onchange direct dans la balise est pas recommandé
il est préférable d'utiliser addEventListener()
https://www.toutjavascript.com/referenc ... stener.php

[adminchu]

Ca serait a peine plus subtil

Deja il faudrait définir les champs obligatoires avec un attribut data-obligatoire="Y"
ex :
<div class="champ" data-obligatoire="Y">champ input</div>

Ensuite la fonction showDiv() est a peine plus complexe

Code : Tout sélectionner

function showDiv() {
	var elements=document.querySelectorAll("div.champ");
	console.log(elements);
	for (var i=0; i<elements.length; i++) {
		var e=elements[i];
		if (e.hasAttribute("data-obligatoire")) {
			e.style.display="block";
		} else {
			e.style.display="none";
		}
	}
}	

Remarque, l'événement onchange direct dans la balise est pas recommandé
il est préférable d'utiliser addEventListener()
https://www.toutjavascript.com/referenc ... stener.php

Merci pour ce complément intéressant, toutefois je m’interroge car en fait dans ta boucle tu te contentes de rendre visibles les champs possédant data-obligatoire="y" mais ça ne les rend pas obligatoires pour autant ? L'attribut "required" ne figure pas dans la fonction ?

[adminchu]

Ca serait a peine plus subtil

Deja il faudrait définir les champs obligatoires avec un attribut data-obligatoire="Y"
ex :
<div class="champ" data-obligatoire="Y">champ input</div>

Ensuite la fonction showDiv() est a peine plus complexe

Code : Tout sélectionner

function showDiv() {
	var elements=document.querySelectorAll("div.champ");
	console.log(elements);
	for (var i=0; i<elements.length; i++) {
		var e=elements[i];
		if (e.hasAttribute("data-obligatoire")) {
			e.style.display="block";
		} else {
			e.style.display="none";
		}
	}
}	

Remarque, l'événement onchange direct dans la balise est pas recommandé
il est préférable d'utiliser addEventListener()
https://www.toutjavascript.com/referenc ... stener.php

Merci pour ce complément intéressant, toutefois je m’interroge car en fait dans ta boucle tu te contentes de rendre visibles les champs possédant data-obligatoire="y" mais ça ne les rend pas obligatoires pour autant ? L'attribut "required" ne figure pas dans la fonction ?

J'ai modifié les deux fonctions comme suit, ça semble fonctionner. Ton avis ?

Code : Tout sélectionner

<script type="text/javascript">
    function hideDiv() {/* fonction qui cache la DIV contenant les champs à remplir pour le demandeur */
        document.getElementById("infos_demandeur").style.display="none";
        document.getElementById("nom_demandeur").required = false;
        document.getElementById("prenom_demandeur").required = false;
    }
    function showDiv() {/* fonction qui affiche la DIV contenant les champs à remplir pour le demandeur */
        document.getElementById("infos_demandeur").style.display="block";
        document.getElementById("nom_demandeur").required = true;
        document.getElementById("prenom_demandeur").required = true;
    }
</script>