problème afficher/masquer 2 champs dans un formulaire

26 janv. 2007, 13:10

Salut !
Alors je veux pouvoir réaliser ce script là (qui marche) : http://www.javascriptfr.com/code.aspx?ID=22007
sur mon projet à moi ...

Quelle différence j'ai avec ce script ...alors j'ai un menu déroulant contenant des valeurs numériques (0, 1, 2, 3, 4 ...). Je veux, lorsque le 0 est sélectionné, qu'il affiche le premier champ, et que si on choisit un autre chiffre (donc > à 0) qu'il m'affiche les deux champs.

J'ai simplement lu la fonction du script cité ci-dessus, celà parait simple et pourtant ça ne fonctione pas ! Merci de votre aide qui sera précieuse car je suis pas fort en javascript (pour ne rien cacher j'utilise toujours des fonctions toutes prêtes mais là je n'en ai pas trouvé)

Voici mon code à double champs :

Code : Tout sélectionner

<html>
<head>
<title>test</title>
<script language="JavaScript">
function afficherAutre() {
var a = document.getElementById("autre1");
var m = document.getElementById("mots1");
var b = document.getElementById("autre2");
var n = document.getElementById("mots2");

if (document.form1.liste.value == 1){
  if (a.style.display == "none")
    a.style.display = "block";
  if (m.style.display == "none")
    m.style.display = "block";
}
elseif (document.form1.liste.value > 1){
  if (a.style.display == "none")
    a.style.display = "block";
  if (m.style.display == "none")
    m.style.display = "block";
  if (b.style.display == "none")
    b.style.display = "block";
  if (n.style.display == "none")
    n.style.display = "block";
}
else{
  a.style.display = "none";
  m.style.display = "none";
  b.style.display = "none";
  n.style.display = "none";
}
}
</script>
</head>

<body>
<form name="form1" method="post" action="">
<p>Choisissez une option :
<select name="liste" onChange="afficherAutre()">
<option value=1>option1</option>
<option value=2>option2</option>
<option value=3>option3</option>
</select>
</p>
<span id=autre1 style="display: none"> option 1 :</span>
<input type="text" id="mots1" name="mots1" style="display: none">
<p>
<span id=autre2 style="display: none"> option supp à 1 :</span>
<input type="text" id="mots2" name="mots2" style="display: none">
</form>
</body>
</html>

Danke

26 janv. 2007, 22:40

ça ne passionne personne ?

27 janv. 2007, 00:15

Les UP sont interdis ici !!

De plus ce n'est pas l'habitude du forum que de fournir des scripts finis...
-------------------

mais la ça fait peur tout ce que tu veux utiliser comme JS... 2 lignes ni plus ni moins.

<html>
<head>
<title>test</title>
<script language="JavaScript">
function afficherAutre(val) 
{
	var etat = (val == 0 ) ? "none" : "block";	
	document.getElementById("autre").style.display = etat;	
}

</script>
</head>

<body>
<form name="form1" method="post" action="">
	<p>Choisissez une option :
		<select name="liste" onchange="afficherAutre(this.value)">
		<option value=0>option0</option>
		<option value=1>option1</option>
		<option value=2>option2</option>
		<option value=3>option3</option>
		</select>
	</p>
	option 1 :<input type="text" id="mots1" name="mots1" >
	<span id=autre style="display: none"> option supp à 1 :
		<input type="text" id="mots2" name="mots2" >
	</span>
</form>
</body>
</html>

27 janv. 2007, 00:35

Bonsoir,

Tu as énormément d'erreurs HTML.

Tu te compliques la vie pour rien.
La même chose en bien plus simple

Code : Tout sélectionner

<html>
<head>
<title>test</title>
<style type="text/css">
   .non_visible {
      display : none;
   }
   .visible {
      display : block;
   }
</style>
<script language="JavaScript">
function afficherAutre() {
   var autre1 = document.getElementById("autre1");
   var autre2 = document.getElementById("autre2");
   var choix = document.form1.liste.value;
   switch(choix) {
      case '0' :
         autre1.className = 'non_visible';
         autre2.className = 'non_visible';
         break;
      case '1' :
         autre1.className = 'visible';
         autre2.className = 'non_visible';
         break;
      default :
         autre1.className = 'visible';
         autre2.className = 'visible';
         break;
   }
}
</script>
</head>

<body>
<form name="form1" method="" action="">
   Choisissez une option :<br />
   <select name="liste" onChange="afficherAutre()">
      <option value="0">Aucun champ</option>
      <option value="1">Un seul champ</option>
      <option value="2">Plusieurs champs</option>
      <option value="3">option 3 - Idem 2</option>
     </select>
   <p class="non_visible" id="autre1">
      option 1 : <input type="text" id="mots1" name="mots1" />
   </p>
   <p class="non_visible" id="autre2">
      option supp &agrave; 1 : <input type="text" id="mots2" name="mots2" />
   </p>
</form>
</body>
</html>

EDIT :
Grillé !

27 janv. 2007, 00:55

EDIT :
Grillé !

On a pas exactement la même chose il aura donc deux fois plus de choix... c'est son jour de chance

30 janv. 2007, 02:04

Oula calme toi truc ^^ moi gentil !

Merci j'ai utilisé la solution de Ajoloca qui était plus propice à mes besoins.
++

30 janv. 2007, 08:59

Modération :
Puisque ta question est résolue, j'ajoute le tag [Résolu]
pour indiquer aux personnes qui voudront consulter ce sujet qu'il contient une solution.

Tu peux réaliser cette opération toi-même
en cliquant sur le bouton [Mettre Résolu] qui s'affiche en haut à gauche de ce sujet
si tu as posté le 1er message en tant que membre (inscrit et identifié).

Alors... inscris-toi !!!

02 févr. 2007, 12:17

*oups désolé*
merci modo ^^

problème afficher/masquer 2 champs dans un formulaire

Qui est en ligne