Modification dynamique d'un formulaire [Résolu]

Signaler
Messages postés
13
Date d'inscription
dimanche 19 décembre 2010
Statut
Membre
Dernière intervention
22 janvier 2011
-
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
-
Bonjour,

Voila j'ai un probléme dont je ne trouve malheureusement pas de réponse.
Je voudrai partir d'une liste déroulante avec plusieurs choix, suivant l'option choisie dans cette liste déroulante le formulaire qui suit doit se modifier par rapport au choix effectué dans la liste déroulante.

J'ai le code suivant, le seul probléme ces qu'il n'accepte pas plus de deux champs dans mon formulaire et bug légérement quand j'ajoute des options dans ma liste déroulante.

Merci d'avance pour votre aide.

Mon Code Javascript :

function afficherAutre() {
  var a = document.getElementById("autre");
  var m = document.getElementById("mots");
  var t = document.getElementById("test");
  var t1 = document.getElementById("test1");
  var x = document.getElementById("test5");
  var s = document.getElementById("test4");
  var t2 = document.getElementById("test2");
  var t3 = document.getElementById("test3");
  
  if (document.form1.liste.value == 2)
 {

  	if (x.style.display == "none")
x.style.display = "block";
 
if (t2.style.display == "none")
t2.style.display = "block";
 
  	if (t3.style.display == "none")
t3.style.display = "block";

if (s.style.display == "none")
s.style.display = "block";
  }
  else
  {
    x.style.display = "none";
t2.style.display = "none";
t3.style.display = "none";
s.style.display = "none";
  }
  
 if (document.form1.liste.value == 4)
 {
  	if (a.style.display == "none")
a.style.display = "block";
 
  	if (m.style.display == "none")
m.style.display = "block";
  }
  else
  {
  	a.style.display = "none";
m.style.display = "none";	
  }
  if (document.form1.liste.value == 3)
 {
  	if (t.style.display == "none")
t.style.display = "block";
 
  	if (t1.style.display == "none")
t1.style.display = "block";
  }
  else
  {
  	t.style.display = "none";
t1.style.display = "none";	
  }
}


Mon Code Php :

<form name="form1" method="post" action="">
Choisissez une option : 
    <select name="liste" onChange="afficherAutre()">
    <option value=1>option</option>
       <option value=2>option1</option>
       <option value=3>option2</option>
       <option value=4>Autre</option>
   </select>
    


     Autre :
    
     Test :
    
     Test5 :
    
     test2 :
    
     test3 :
    
     test4 :
    
</form>

7 réponses

Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
Bonjour,
mauvaise approche, mais avant quelques remarques
- Une ID doit être UNIQUE, ce qui n'est pas le cas dans ce que tu nous montre
- Il est préférable de mettre le libellé de l'ID entre parenthèse.
- Plusieurs NAME identique pour des contrôle qui n'ont rien à voir ensemble
voila pour les remarques d'ordre général...

Concernant l'approche,
il est préférable d'avoir une structure du type
    
  Test 1.1 : 

  Test 1.2 : 
    
  Test 1.3 : 
 

      

    
  Test 2.1 : 
    
  Test 2.2 : 

  Test 2.3 : 
    
  Test 2.4 : 
 

  
et lors d'un changement de choix, de masquer toutes les DIVs puis d'afficher la DIV correspondante à l'option
;O)
Messages postés
13
Date d'inscription
dimanche 19 décembre 2010
Statut
Membre
Dernière intervention
22 janvier 2011

Merci PetoleTeam sa marche parfaitement, solution trés simple mais il fallait encore y penser lol.

Je donne les deux fichier source complet si certain aurai besoin de la version modifier et non buguer :).

function afficherAutre() {
  var a = document.getElementById("opt_1");
  var m = document.getElementById("opt_2");
  
  if (document.form1.liste.value == 2)
 {

  	if (a.style.display == "none")
a.style.display = "block";
 
  }
  else
  {
    a.style.display = "none";
  }
  
  if (document.form1.liste.value == 3)
 {
  	if (m.style.display == "none")
m.style.display = "block";
  }
  else
  {
  	m.style.display = "none";	
  }
}


<form name="form1" method="post" action="">
Choisissez une option : 
    <select name="liste" onChange="afficherAutre()">
    <option value=1>option</option>
       <option value=2>option1</option>
       <option value=3>option2</option>
   </select>
    



    
  Test 1.1 : 

  Test 1.2 : 
    
  Test 1.3 : 
 

 

    
  Test 2.1 : 
    
  Test 2.2 : 

  Test 2.3 : 
    
  Test 2.4 : 
 


</form>
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
ta fonction d'affichage présente un inconvénient majeur, c'est qu'il faut la modifier à chaque fois que tu va retirer et/ou ajouter une option, d'autre part elle devrait plutôt s'appeler afficheOption ou un truc dans ce goût...

Une autre approche, que j'ai évoquée plus haut peu se traduire par ce code
<script type="text/javascript">
//---------------------------------------
function afficherAutre(select_, radical_){
  //-- Init diverses
  var i, oDiv, nb = select_.options.length;
  //-- Masque tout
  for (i = 0; i < nb; i++) {
    oDiv = document.getElementById( radical_ + i);
    if (oDiv) {
      oDiv.style.display = "none";
    }
  }
  //-- Affiche la DIV concernee
  i = select_.selectedIndex;
  oDiv = document.getElementById( radical_ + i);
  if (oDiv) {
    oDiv.style.display = "block";
  }
}
</script>
ici on passe la référence au SELECT ainsi que le radical, racine commune des DIVs en paramètre, et l'on considère qu'il y a une DIV par option, l'OPTION en 1st position effaçant tout.

L'appel de la fonction devient
<select name="liste" onChange="afficherAutre( this, 'opt_')">
par exemple ce qui la rend plus souple, sans modification, et utilisable par un autre SELECT de la page.

Seule imposition avoir une structure avec un radical identique et dont le numéro est le numéro de l'option à laquelle elle se raccroche, ceci dit c'est plus logique pour la maintenance, comme dans l'exemple que tu donnes.
;O)
Messages postés
13
Date d'inscription
dimanche 19 décembre 2010
Statut
Membre
Dernière intervention
22 janvier 2011

Voila la version modifié pour ceux que cela intérresserai.

Code Javascript :

function afficherAutre(select_, radical_){
  //-- Init diverses
  var i, oDiv, nb = select_.options.length;
  //-- Masque tout
  for (i = 0; i < nb; i++) {
    oDiv = document.getElementById( radical_ + i);
    if (oDiv) {
      oDiv.style.display = "none";
    }
  }
  //-- Affiche la DIV concernee
  i = select_.selectedIndex;
  oDiv = document.getElementById( radical_ + i);
  if (oDiv) {
    oDiv.style.display = "block";
  }
}


Code Php :

<form name="form1" method="post" action="">
Choisissez une option : 
    <select name="liste" onChange="afficherAutre( this, 'opt_')">
    <option value="-">Selectionnez la catégorie</option>
       <option value="2">option1</option>
       <option value="3">option2</option>
   </select>
    



    
  Test 1.1 : 

  Test 1.2 : 
    
  Test 1.3 : 
 

 

    
  Test 2.1 : 
    
  Test 2.2 : 

  Test 2.3 : 
    
  Test 2.4 : 
 


</form>


PS: Sa marche parfaitement, un Gros merci a PetoleTeam :)
Messages postés
13
Date d'inscription
dimanche 19 décembre 2010
Statut
Membre
Dernière intervention
22 janvier 2011

effectivement ta façon me parait plus simple et prendra moin de code. Je vais opter pour la tienne lol.

Merci encore :)
Messages postés
13
Date d'inscription
dimanche 19 décembre 2010
Statut
Membre
Dernière intervention
22 janvier 2011

Juste modifier 2 par 1 au niveau de Option 1 :)
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
Bonjour,
dans le code fourni la value des options n'est pas utilisée et peut donc retrouver son utilité originale.

;O)