Sujet Précédent Sujet Suivant

Modification dynamique d'un formulaire

Résolu
Romain54000 Messages postés 13 Date d'inscription dimanche 19 décembre 2010 Statut Membre Dernière intervention 22 janvier 2011 - 19 déc. 2010 à 21:03
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre 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>

7 réponses

Réponse 1 / 7
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
20 déc. 2010 à 09:52
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)
3
Réponse 2 / 7
Romain54000 Messages postés 13 Date d'inscription dimanche 19 décembre 2010 Statut Membre Dernière intervention 22 janvier 2011
20 déc. 2010 à 13:28
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>
3
Réponse 3 / 7
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
20 déc. 2010 à 18:19
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)
3
Réponse 4 / 7
Romain54000 Messages postés 13 Date d'inscription dimanche 19 décembre 2010 Statut Membre Dernière intervention 22 janvier 2011
20 déc. 2010 à 22:32
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 :)
3

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

Posez votre question
Réponse 5 / 7
Romain54000 Messages postés 13 Date d'inscription dimanche 19 décembre 2010 Statut Membre Dernière intervention 22 janvier 2011
20 déc. 2010 à 19:22
effectivement ta façon me parait plus simple et prendra moin de code. Je vais opter pour la tienne lol.

Merci encore :)
0
Réponse 6 / 7
Romain54000 Messages postés 13 Date d'inscription dimanche 19 décembre 2010 Statut Membre Dernière intervention 22 janvier 2011
20 déc. 2010 à 22:33
Juste modifier 2 par 1 au niveau de Option 1 :)
0
Réponse 7 / 7
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
21 déc. 2010 à 15:19
Bonjour,
dans le code fourni la value des options n'est pas utilisée et peut donc retrouver son utilité originale.

;O)
0

Discussions similaires

UserForm (formulaire) , aprés exécution impossible d'afficher la Civilité
Utilisateur anonyme -
cs_Le Pivert -

3 réponses
Remplir un formulaire PDF à partir di'un fichier excel
bgame -
the_little_big_man -

3 réponses
"civilité" obligatoire dans formulaire
tautie -
Bul3 -

16 réponses
Formulaire de reservation
Louido -
neigedhiver -

2 réponses
Passer un tableau dynamique en paramètre
freepouy18 -
freepouy18 -

19 réponses
Rejoignez-nous