begin process at 2012 05 29 10:26:11
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

Modification dynamique d'un formulaire


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Modification dynamique d'un formulaire

dimanche 19 décembre 2010 à 21:03:35 | Modification dynamique d'un formulaire

Romain54000

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 :

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 :

Code PHP :
<form name="form1" method="post" action="">
<p>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>
    </p>
    <span id=autre style="display: none"> Autre :</span>
    <input type="text" id="mots" name="mots" style="display: none">
    <span id=test style="display: none"> Test :</span>
    <input type="text" id="test1" name="mots" style="display: none">
    <span id=test5 style="display: none"> Test5 :</span>
    <input type="text" id="test5" name="mots" style="display: none">
    <span id=test2 style="display: none"> test2 :
    <input type="text" id="test2" name="mots" style="display: none"></span>
    <span id=test3 style="display: none"> test3 :</span>
    <input type="text" id="test3" name="mots" style="display: none">
    <span id=test4 style="display: none"> test4 :</span>
    <input type="text" id="test4" name="mots" style="display: none">
</form>
lundi 20 décembre 2010 à 09:52:35 | Re : Modification dynamique d'un formulaire

PetoleTeam

Membre Club
Réponse acceptée !
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
Code HTML :
<div id="opt_1" style="display: none">    
  Test 1.1 : <input type="text"><br>
  Test 1.2 : <input type="text"><br>    
  Test 1.3 : <input type="text"><br> 
</div>      
<div id="opt_2" style="display: none">    
  Test 2.1 : <input type="text"><br>    
  Test 2.2 : <input type="text"><br>
  Test 2.3 : <input type="text"><br>    
  Test 2.4 : <input type="text"><br> 
</div>  
et lors d'un changement de choix, de masquer toutes les DIVs puis d'afficher la DIV correspondante à l'option
;O)
lundi 20 décembre 2010 à 13:28:10 | Re : Modification dynamique d'un formulaire

Romain54000

Réponse acceptée !
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 :).

Code Javascript :
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";	
  }
}


Code PHP :
<form name="form1" method="post" action="">
<p>Choisissez une option : 
    <select name="liste" onChange="afficherAutre()">
    <option value=1>option</option>
       <option value=2>option1</option>
       <option value=3>option2</option>
   </select>
    </p>
<div id="opt_1" style="display: none">    
  Test 1.1 : <input type="text"><br>
  Test 1.2 : <input type="text"><br>    
  Test 1.3 : <input type="text"><br> 
</div> 
<div id="opt_2" style="display: none">    
  Test 2.1 : <input type="text"><br>    
  Test 2.2 : <input type="text"><br>
  Test 2.3 : <input type="text"><br>    
  Test 2.4 : <input type="text"><br> 
</div>
</form>
lundi 20 décembre 2010 à 18:19:26 | Re : Modification dynamique d'un formulaire

PetoleTeam

Membre Club
Réponse acceptée !
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
Code Javascript :
<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
Code HTML :
<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)
lundi 20 décembre 2010 à 19:22:27 | Re : Modification dynamique d'un formulaire

Romain54000

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

Merci encore :)
lundi 20 décembre 2010 à 22:32:09 | Re : Modification dynamique d'un formulaire

Romain54000

Réponse acceptée !
Voila la version modifié pour ceux que cela intérresserai.

Code Javascript :

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 :

Code PHP :
<form name="form1" method="post" action="">
<p>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>
    </p>
<div id="opt_1" style="display: none">    
  Test 1.1 : <input type="text"><br>
  Test 1.2 : <input type="text"><br>    
  Test 1.3 : <input type="text"><br> 
</div> 
<div id="opt_2" style="display: none">    
  Test 2.1 : <input type="text"><br>    
  Test 2.2 : <input type="text"><br>
  Test 2.3 : <input type="text"><br>    
  Test 2.4 : <input type="text"><br> 
</div>
</form>


PS: Sa marche parfaitement, un Gros merci a PetoleTeam :)
lundi 20 décembre 2010 à 22:33:47 | Re : Modification dynamique d'un formulaire

Romain54000

Juste modifier 2 par 1 au niveau de Option 1 :)
mardi 21 décembre 2010 à 15:19:49 | Re : Modification dynamique d'un formulaire

PetoleTeam

Membre Club
Bonjour,
dans le code fourni la value des options n'est pas utilisée et peut donc retrouver son utilité originale.

;O)


Cette discussion est classée dans : style, document, display, none, if


Répondre à ce message

Sujets en rapport avec ce message

Pb Compatibilité d'un script sous FireFox [ par Kommius ] Salut à tous! Voilà, je cours à votre aide car j'ai trouvé un petit script sympa sur le site (http://www.javascriptfr.com/code.aspx?ID=22007)Le Code e Propriété display avec IE [ par initnocsib ] Bonjour,Voici un petit script qui fonctionne nickel sous Firefox, mais pas du tout sous IE function active(n){        document.getElementByI probleme de compatibilité de fonction javascript avec la balise <table> [ par misshasnae ] slt ts le mondej'ai un petit problème dans le code html de ma page de réservation, svp si quelq'un a une idée repond moi c urgent é merci d'avance. Comment puis-je améliorer ce script ??? [ par nanti ] Bonjour à tous !Tout d'abord, j'espère être dans le bon thème... !?Comme annoncer, je souhaite améliorer ces scripts pour n'en faire qu'un qui soit op javaScript liste déroulante [ par beka74 ] Bonjour, je débute en java script et je voudrai afficher des zone de saisie selon le choix dans la liste déroulante j'ai fait une fonction avec un if problème avec un menu [ par 77marsmars77 ] Bonjour à tous, J'ai un petit souci avec mon menu. Quand je clique sur le menu 1 il m'affiche les sous menus1. là c'est ok. Quand je clique sur le lie JS PARENT node [ par ghighidu63 ] Bonjour, j'ai crée ce sujet car j'ai besoin d'aide pour mon script. J'ai crée un truc pour Minimiser et Fermer un truc (Cacher/Afficher) Quand il y'en Commande Onclick agrandir image + afficher du texte [ par pharen ] bonjour à tous je souhaite réaliser une gallery photos ainsi les photos sont sur la page en petite taille. je click sur une photo et elle s'agrandit Urgent!problème de fonction pour afficher un tableau [ par tagadax ] Bonjour j'ai un problème, j'ai un projet a terminer pour lundi, et je suis bloqué pour afficher un tableau voici ma fonction : [code=js]function decis Afficher / cacher <div> [ par helvetica ] Bonjour, Je souhaiterais afficher / masquer une , j'utilise onclick() pour lancer la fonction JS ci-dessous, la propriété de départ de ma div est :.


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,997 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales