Modification dynamique d'un formulaire [Résolu]

Messages postés
13
Date d'inscription
dimanche 19 décembre 2010
Dernière intervention
22 janvier 2011
- - Dernière réponse : PetoleTeam
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Dernière intervention
14 janvier 2011
- 21 déc. 2010 à 15:19
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>
Afficher la suite 

Votre réponse

7 réponses

Meilleure réponse
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Dernière intervention
14 janvier 2011
9
3
Merci
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)

Dire « Merci » 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 121 internautes nous ont dit merci ce mois-ci

Commenter la réponse de PetoleTeam
Messages postés
13
Date d'inscription
dimanche 19 décembre 2010
Dernière intervention
22 janvier 2011
3
Merci
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>

Dire « Merci » 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 121 internautes nous ont dit merci ce mois-ci

Commenter la réponse de Romain54000
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Dernière intervention
14 janvier 2011
9
3
Merci
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)

Dire « Merci » 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 121 internautes nous ont dit merci ce mois-ci

Commenter la réponse de PetoleTeam
Messages postés
13
Date d'inscription
dimanche 19 décembre 2010
Dernière intervention
22 janvier 2011
3
Merci
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 :)

Dire « Merci » 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 121 internautes nous ont dit merci ce mois-ci

Commenter la réponse de Romain54000
Messages postés
13
Date d'inscription
dimanche 19 décembre 2010
Dernière intervention
22 janvier 2011
0
Merci
effectivement ta façon me parait plus simple et prendra moin de code. Je vais opter pour la tienne lol.

Merci encore :)
Commenter la réponse de Romain54000
Messages postés
13
Date d'inscription
dimanche 19 décembre 2010
Dernière intervention
22 janvier 2011
0
Merci
Juste modifier 2 par 1 au niveau de Option 1 :)
Commenter la réponse de Romain54000
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Dernière intervention
14 janvier 2011
9
0
Merci
Bonjour,
dans le code fourni la value des options n'est pas utilisée et peut donc retrouver son utilité originale.

;O)
Commenter la réponse de PetoleTeam

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.