Soucis avec un formulaire de choix

Résolu

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

Afficher la suite

A voir également:

Soucis avec un formulaire de choix
Whatsapp formulaire opposition - Guide
Formulaire de réclamation facebook - Guide
Liste déroulante de choix excel - Guide
Formulaire de reclamation instagram - Guide
Confirmer le nouvel envoi du formulaire err_cache_miss - Forum Webmastering

5 réponses

Réponse 1 / 5

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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>

Réponse 2 / 5

flexi2202 Messages postés 3822 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

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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..

Réponse 3 / 5

flexi2202 Messages postés 3822 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

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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"

Réponse 4 / 5

flexi2202 Messages postés 3822 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

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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>

flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention 190 > jordane45 Messages postés 38486 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à

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752 > flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention

Tu penseras à mettre le sujet en resolu

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

Posez votre question

Réponse 5 / 5

flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention 190

oui bien sur
bon week end

Discussions similaires

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

Contact LEBONCOIN

Contacter le "bon coin"

Google Chrome : "Nouvel envoi du formulaire"

probleme avec formulaire et sous formulaire independant.

Votre réponse

Discussions similaires