Soucis avec un formulaire de choix

Résolu
flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   -  
flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   -
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

  1.
    jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
     
    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>

    0
  2. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190
     
    un tout grand merci
    cela fonctionne
    sauf que les cases restent coches après un premier passage
    0
    1. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
       
      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..
      0
  3. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190
     
    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
    0
    1. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
       

      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"
      0
  4. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190
     
    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
    0
    1. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
       
      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>
      0
      1. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190 > jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention  
         
        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à
        0
      2. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830 > flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention  
         
        Tu penseras à mettre le sujet en resolu
        0

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190
     
    oui bien sur
    bon week end
    0

Discussions similaires

Civilité (Mr,Mme,Melle) n' apparait pas lors de l'exécution du formulaire
azixe -
cs_Le Pivert -

1 réponse
Répondeur a choix multiples
Andy13b -
brupala -

8 réponses
Problème avec Google Chrome
loup_blanc14 -
bicker -

6 réponses
Contacter le "bon coin"
babet56 -
SUDEST13 -

28 réponses
problème envoi formulaire
mathieu_n -
jordane45 -

5 réponses