Sujet Précédent Sujet Suivant

Soucis avec un formulaire de choix

Résolu/Fermé
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 - 25 oct. 2020 à 06:55
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 - 25 oct. 2020 à 10:34
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

Réponse 1 / 5
jordane45 Messages postés 38367 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 janvier 2025 4 721
25 oct. 2020 à 07:21
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
Réponse 2 / 5
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187
25 oct. 2020 à 07:29
un tout grand merci
cela fonctionne
sauf que les cases restent coches après un premier passage
0
jordane45 Messages postés 38367 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 janvier 2025 4 721
25 oct. 2020 à 07:36
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
Réponse 3 / 5
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187
25 oct. 2020 à 08:34
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
jordane45 Messages postés 38367 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 janvier 2025 4 721
Modifié le 25 oct. 2020 à 09:03

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
Réponse 4 / 5
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187
25 oct. 2020 à 09:14
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
jordane45 Messages postés 38367 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 janvier 2025 4 721
25 oct. 2020 à 09:42
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
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187 > jordane45 Messages postés 38367 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 janvier 2025
25 oct. 2020 à 10:02
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
jordane45 Messages postés 38367 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 janvier 2025 4 721 > flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024
25 oct. 2020 à 10:32
Tu penseras à mettre le sujet en resolu
0

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

Posez votre question
Réponse 5 / 5
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187
25 oct. 2020 à 10:34
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
Je n'arrive plus à récuperer mon compte Outlook
gnulinux_ -
laure -

4 réponses
logiciel photo - superposer 2 images
darylie -
Ylva. -

34 réponses
formulaire resiliation freebox
bonzai470 -
bonzai470 -

5 réponses
Contact LEBONCOIN
myalysee -
MPMP10 -

3 réponses