Soucis avec un formulaire de choix [Résolu]

Signaler
Messages postés
2293
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
29 novembre 2020
-
Messages postés
2293
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
29 novembre 2020
-
bonjour a tous
je souhaiterais lorsque un client choisi un mode d envois qu il soit doive remplir les champs correspondant au mode d envois
par exemple il choisit" poste be" qu il doive remplir
pierre feuille ciseau
sans cela le formulaire ne part pas
idem pour las autres modes d envois
j ai ce morceau de code
mais lorsque on choisit un mode d envoi le sous menu s ouvre bien et on sait le remplir
mais si le client choisit un autre mode d envois(car il change d avis ) le premier mode d envois ne se ferme pas
comment faire pour que quand il choisit un autre mode d envois que les autres se replie
merci de l aide
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">    
<style>
     #cache1, #cache2, #cache3, #cache4 {display:none}
</style>
</head>
<body>
	<form id="f" action="">
		<hr />
		<label>Votre nom <input type="text" name="nom" /></label><br />
		<hr />
		<label><input type="radio" name="choix1" value="un" />poste be</label><br />

		<div id="cache1">
			<hr />
			<div>(cache 1)</div>
			<label>pierre <input type="text" name="chiffre-nom" /></label><br />
			<label>feuille <input type="text" name="chiffre-adresse" /></label><br />
			<label>ciseau <input type="text" name="chiffre-ville" /></label><br />
		</div>
		<hr />
		<label><input type="radio" name="choix2" value="un" />kiala be</label><br />

		<div id="cache2">
			<hr />
			<div>(cache 2)</div>
			<label>pierre <input type="text" name="lettre-nom" /></label><br />
			<label>feuille <input type="text" name="lettre-adresse" /></label><br />
			<label>ciseau <input type="text" name="lettre-ville" /></label><br />
		</div>
		<hr />
		<label><input type="radio" name="choix3" value="un" />poste fr</label><br />

		<div id="cache3">
			<hr />
			<div>(cache 3)</div>
			<label>pierre <input type="text" name="lettre-nom" /></label><br />
			<label>feuille <input type="text" name="lettre-adresse" /></label><br />
			<label>ciseau <input type="text" name="lettre-ville" /></label><br />
		</div>
		<hr />
			<label><input type="radio" name="choix4" value="un" />mondial relay fr</label><br />

		<div id="cache4">
			<hr />
			<div>(cache 4)</div>
			<label>pierre <input type="text" name="lettre-nom" /></label><br />
			<label>feuille <input type="text" name="lettre-adresse" /></label><br />
			<label>ciseau <input type="text" name="lettre-ville" /></label><br />
		</div>
		<input type="submit" />
	</form>
 
 
<script>
 
document.querySelector("#f").addEventListener("submit",(e)=>{
        const check={
                nom : /[a-z]{2,}/i.test(e.target.nom.value),
                choix1 : Array.from(e.target.choix1).some(v=>v.checked),
                cache1 : Array.from(document.querySelectorAll("#cache1 input")).every(v=>/[a-z]{2,}/i.test(v.value)),
				choix2 : Array.from(e.target.choix2).some(v=>v.checked),
                cache2 : Array.from(document.querySelectorAll("#cache2 input")).every(v=>/[a-z]{2,}/i.test(v.value)),
				choix3 : Array.from(e.target.choix3).some(v=>v.checked),
                cache3 : Array.from(document.querySelectorAll("#cache3 input")).every(v=>/[a-z]{2,}/i.test(v.value)),
                choix4 : Array.from(e.target.choix4).some(v=>v.checked),
                cache4 : Array.from(document.querySelectorAll("#cache4 input")).every(v=>/[a-z]{2,}/i.test(v.value))
        };
        for(i in check){
                if(!check[i]){
                        e.preventDefault();
                        alert(`Le champ ${i} est mal renseigné.`);
                        return false;
                }
        }
        alert("Tout est OK.");
})
 
document.querySelectorAll("input[name='choix1']").forEach(v=>{
        v.addEventListener("click",()=>{
                document.querySelector("#cache1").style.display="block";
        })
})
document.querySelectorAll("input[name='choix2']").forEach(v=>{
        v.addEventListener("click",()=>{
                document.querySelector("#cache2").style.display="block";
        })
})
document.querySelectorAll("input[name='choix3']").forEach(v=>{
        v.addEventListener("click",()=>{
                document.querySelector("#cache3").style.display="block";
        })
})
document.querySelectorAll("input[name='choix4']").forEach(v=>{
        v.addEventListener("click",()=>{
                document.querySelector("#cache4").style.display="block";
        })
})
 
</script>
 
</body>
</html>

5 réponses

Messages postés
30410
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
30 novembre 2020
3 036
Bonjour,

Attention, j'ai également fait des modifs dans le html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">    
<style>
    .cache {
      display:none;
    }
</style>
</head>
<body>
	<form id="f" action="">
		<hr />
		<label>Votre nom <input type="text" name="nom" /></label><br />
		<hr />
		
    <label><input type="radio" name="choix1" class='inpchoix' value="cache1" />poste be</label><br />
		<div id="cache1" class="cache">
			<hr />
			<div>(cache 1)</div>
			<label>pierre <input type="text" name="chiffre-nom" /></label><br />
			<label>feuille <input type="text" name="chiffre-adresse" /></label><br />
			<label>ciseau <input type="text" name="chiffre-ville" /></label><br />
		</div>
		<hr />
		
    <label><input type="radio" name="choix2" class='inpchoix' value="cache2" />kiala be</label><br />
		<div id="cache2" class="cache">
			<hr />
			<div>(cache 2)</div>
			<label>pierre <input type="text" name="lettre-nom" /></label><br />
			<label>feuille <input type="text" name="lettre-adresse" /></label><br />
			<label>ciseau <input type="text" name="lettre-ville" /></label><br />
		</div>
		<hr />
		
    <label><input type="radio" name="choix3"  class='inpchoix' value="cache3" />poste fr</label><br />
		<div id="cache3" class="cache">
			<hr />
			<div>(cache 3)</div>
			<label>pierre <input type="text" name="lettre-nom" /></label><br />
			<label>feuille <input type="text" name="lettre-adresse" /></label><br />
			<label>ciseau <input type="text" name="lettre-ville" /></label><br />
		</div>
		<hr />
		
    <label><input type="radio" name="choix4"  class='inpchoix' value="cache4" />mondial relay fr</label><br />
		<div id="cache4" class="cache">
			<hr />
			<div>(cache 4)</div>
			<label>pierre <input type="text" name="lettre-nom" /></label><br />
			<label>feuille <input type="text" name="lettre-adresse" /></label><br />
			<label>ciseau <input type="text" name="lettre-ville" /></label><br />
		</div>
		<input type="submit" />
	</form>
   
   
  <script>
   
  document.querySelector("#f").addEventListener("submit",(e)=>{
    const check={
      nom : /[a-z]{2,}/i.test(e.target.nom.value),
      choix1 : Array.from(e.target.choix1).some(v=>v.checked),
      cache1 : Array.from(document.querySelectorAll("#cache1 input")).every(v=>/[a-z]{2,}/i.test(v.value)),
      choix2 : Array.from(e.target.choix2).some(v=>v.checked),
      cache2 : Array.from(document.querySelectorAll("#cache2 input")).every(v=>/[a-z]{2,}/i.test(v.value)),
      choix3 : Array.from(e.target.choix3).some(v=>v.checked),
      cache3 : Array.from(document.querySelectorAll("#cache3 input")).every(v=>/[a-z]{2,}/i.test(v.value)),
      choix4 : Array.from(e.target.choix4).some(v=>v.checked),
      cache4 : Array.from(document.querySelectorAll("#cache4 input")).every(v=>/[a-z]{2,}/i.test(v.value))
    };
    for(i in check){
      if(!check[i]){
        e.preventDefault();
        alert(`Le champ ${i} est mal renseigné.`);
        return false;
      }
    }
    alert("Tout est OK.");
  })
  
  function affichechoix(elmChoix){
  //on masque tous les éléments ayant la class .cache
    divcache = document.querySelectorAll('.cache');
    for (let i=0; i< divcache.length; i++){
      divcache[i].style.display = 'none';
      
    }
    //on affiche l'element voulu
    elmChoix.style.display = 'block';
  }
  
   document.querySelectorAll("input.inpchoix").forEach(v=>{
      v.addEventListener("click",()=>{
      console.log('name',v.value);
       var elm = document.getElementById(v.value);
       console.log('element a afficher',elm);
       affichechoix(elm);
    });
  })
   
  </script>
 
</body>
</html>

Messages postés
2293
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
29 novembre 2020
122
un tout grand merci
cela fonctionne
sauf que les cases restent coches après un premier passage
Messages postés
30410
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
30 novembre 2020
3 036
Pour que les cases ne restent pas cochées... il faut qu'elles toutes le même name.
(c'est le principe des boutons radios )

Sinon, en JS, tu peux toujours faire en sorte qu'elles se décochent...
  
   document.querySelectorAll("input.inpchoix").forEach(v=>{
      
      v.addEventListener("click",()=>{
      document.querySelectorAll("input.inpchoix").forEach(z=>{
        z.checked=false;
      });
      v.checked=true;
      console.log('name',v.value);
       var elm = document.getElementById(v.value);
       console.log('element a afficher',elm);
       affichechoix(elm);
    });
  })

Mais je trouve que tu ne cherches pas beaucoup... tu viens, un peu trop vite à mon gout..., demander qu'on te donne la réponse..
Messages postés
2293
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
29 novembre 2020
122
merci pour la reponse
pour le bouton a coche cela est régler par contre a présent
lors d un choix de livraison et remplissage des casses de l envoi il indique que Le champ choix1 est mal renseigné
il refuse d envoyer le formulaire
on ne peux pas être bon en tout ...
on peux pas dire que je suis venu en demandant la solution de A a Z
je viens avec une base
Messages postés
30410
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
30 novembre 2020
3 036

on ne peux pas être bon en tout ...

Ou on peut être bon à rien ou mauvais en tout.. ça marche aussi...



Quoi qu'il en soit,
Sachant que je n'ai pas touché à la parti du code qui fait la vérification.... ça ne vient pas de mes modifs.
Ton souci vient du code
  document.querySelector("#f").addEventListener("submit",(e)=>{
    const check={
      nom : /[a-z]{2,}/i.test(e.target.nom.value),
      choix1 : Array.from(e.target.choix1).some(v=>v.checked),
      cache1 : Array.from(document.querySelectorAll("#cache1 input")).every(v=>/[a-z]{2,}/i.test(v.value)),
      choix2 : Array.from(e.target.choix2).some(v=>v.checked),
      cache2 : Array.from(document.querySelectorAll("#cache2 input")).every(v=>/[a-z]{2,}/i.test(v.value)),
      choix3 : Array.from(e.target.choix3).some(v=>v.checked),
      cache3 : Array.from(document.querySelectorAll("#cache3 input")).every(v=>/[a-z]{2,}/i.test(v.value)),
      choix4 : Array.from(e.target.choix4).some(v=>v.checked),
      cache4 : Array.from(document.querySelectorAll("#cache4 input")).every(v=>/[a-z]{2,}/i.test(v.value))
    };
    for(i in check){
      if(!check[i]){
        e.preventDefault();
        alert(`Le champ ${i} est mal renseigné.`);
        return false;
      }
    }
    alert("Tout est OK.");
  })


Ceci étant un "nouveau" souci qui n'a rien à voir avec la question initiale ( qui concernait le fait d'afficher/masquer les div)
je t'invite à
1 - chercher à écrire un code fonctionnel (autre que celui là.. que tu as du simplement copier/coller sans comprendre comment il marche... )
2 - Créer une nouvelle discussion sur le forum propre à cette problématique en montrant le nouveau code que tu auras essayé de faire.

Petit indice : Il faut, soit te baser sur le bouton radio coché..... soit ne prendre que les champs "visibles"
Messages postés
2293
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
29 novembre 2020
122
Merci pour la reponse
cela dépasse de loin mes compétences
on va donc rester sur un truc simple et j enverrais un mail si le client ne rentre pas les coordonnes du mode d envois
c est bien ce que je me dis
je dois choisir soit le bouton radio coche soit le remplissage des données
Messages postés
30410
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
30 novembre 2020
3 036
Ah la la la la....

Aller.. voila...
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">    
<style>
    .cache {
      display:none;
    }
</style>
</head>
<body>
	<form id="f" action="">
		<hr />
		<label>Votre nom <input type="text" name="nom" /></label><br />
		<hr />
		
    <label><input type="radio" name="choix" class='inpchoix' value="cache1" />poste be</label><br />
		<div id="cache1" class="cache">
			<hr />
			<div>(cache 1)</div>
			<label>pierre <input type="text" name="chiffre-nom" /></label><br />
			<label>feuille <input type="text" name="chiffre-adresse" /></label><br />
			<label>ciseau <input type="text" name="chiffre-ville" /></label><br />
		</div>
		<hr />
		
    <label><input type="radio" name="choix" class='inpchoix' value="cache2" />kiala be</label><br />
		<div id="cache2" class="cache">
			<hr />
			<div>(cache 2)</div>
			<label>pierre <input type="text" name="lettre-nom" /></label><br />
			<label>feuille <input type="text" name="lettre-adresse" /></label><br />
			<label>ciseau <input type="text" name="lettre-ville" /></label><br />
		</div>
		<hr />
		
    <label><input type="radio" name="choix"  class='inpchoix' value="cache3" />poste fr</label><br />
		<div id="cache3" class="cache">
			<hr />
			<div>(cache 3)</div>
			<label>pierre <input type="text" name="lettre-nom" /></label><br />
			<label>feuille <input type="text" name="lettre-adresse" /></label><br />
			<label>ciseau <input type="text" name="lettre-ville" /></label><br />
		</div>
		<hr />
		
    <label><input type="radio" name="choix"  class='inpchoix' value="cache4" />mondial relay fr</label><br />
		<div id="cache4" class="cache">
			<hr />
			<div>(cache 4)</div>
			<label>pierre <input type="text" name="lettre-nom" /></label><br />
			<label>feuille <input type="text" name="lettre-adresse" /></label><br />
			<label>ciseau <input type="text" name="lettre-ville" /></label><br />
		</div>
		<input type="submit" />
	</form>
   
   
  <script>
   
  document.querySelector("#f").addEventListener("submit",(e)=>{
    e.preventDefault(); 
    var check = true;
    
    // on verifie le champ nom
    if(!/[a-z]{2,}/i.test(e.target.nom.value)){
     alert('Merci de renseigner le nom');
     check = false;
     return false;
    }
    
    //on s'occupe des input liés au bouton radio coché )
     var cibleDivCache = document.querySelector('input[name="choix"]:checked').value;
     console.log("La div visible est :" , cibleDivCache );
     document.querySelectorAll("#" + cibleDivCache + " input").forEach(z=>{
        console.log('z.value',z.value);
        if(!/[a-z]{2,}/i.test(z.value)){
          alert('Merci de remplir le champ '+ z.name);
          check = false;
          return false;
        }
      });
     
    if(check==true){
      alert("Tout est OK.");
        document.querySelector("#f").submit();
    }else{
      return false;
    }
  })
  
  function affichechoix(elmChoix){
  //on masque tous les éléments ayant la class .cache
    divcache = document.querySelectorAll('.cache');
    for (let i=0; i< divcache.length; i++){
      divcache[i].style.display = 'none';
      
    }
    //on affiche l'element voulu
    elmChoix.style.display = 'block';
  }
  
   document.querySelectorAll("input.inpchoix").forEach(v=>{
      
      v.addEventListener("click",()=>{
      document.querySelectorAll("input.inpchoix").forEach(z=>{
        z.checked=false;
      });
      v.checked=true;
      console.log('name',v.value);
       var elm = document.getElementById(v.value);
       console.log('element a afficher',elm);
       affichechoix(elm);
    });
  })
   
  </script>
 
</body>
</html>
Messages postés
2293
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
29 novembre 2020
122 >
Messages postés
30410
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
30 novembre 2020

waouhhhh
super un tout très grand merci
Misère tu t y connais super bien quand même
cela fait des jours que je cherche
je vais essayer de comprendre le code pour l intégrer dans ce qui existe déjà
Messages postés
30410
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
30 novembre 2020
3 036 >
Messages postés
2293
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
29 novembre 2020

Tu penseras à mettre le sujet en resolu
Messages postés
2293
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
29 novembre 2020
122
oui bien sur
bon week end