Problème masquage de champs et javascript

Bonsoir,

j’aurais une petite question:

comment masquer des champs de formulaire avec JS?

En effet j’ai un formulaire avec des a l’origine un menu deroulant et en fonction des choix de celui-ci, une ou des partie du formulaire s’affiche.

Or avec mon code actuel j’ai des gros soucis puisque rien ne s’affiche!

Le voici:

Le head:


<head>
<script language="JavaScript">
function afficherAutre() {
var a = document.getElementById("technique");
var m = document.getElementById("commercial");
var b = document.getElementById("commun");
var c = document.getElementById("fin");


if (document.form1.liste.value == 1)
	{
	if(b.style.display == "none")
		b.style.display = "block";
	if(a.style.display == "none")
		a.style.display = "block";
	if(m.style.display == "none")
		m.style.display = "none";
	if(c.style.display == "none")
		c.style.display = "block";

	}
 
if (document.form1.liste.value == 2)
	{
	if(b.style.display == "none")
		b.style.display = "block";
	if(a.style.display == "none")
		a.style.display = "none";
	if(m.style.display == "none")
		m.style.display = "block";
	if(c.style.display == "none")
		c.style.display = "block";
		
	}

else
	{
	a.style.display = "none";
	m.style.display = "none";
	b.style.display = "none";
	c.style.display = "none";
	}
}
</script>
</head> 

Le body


<select name="liste" onChange="afficherAutre()">
<option value="0"></option>
<option value="1">choix 1</option>
<option value="2">choix 2</option>
</select>


<div id="commun" style="display: none">
<table>
<tr><td>Date : </td><td><input type="text" name="date" id="date" value="<?php echo $date;?>"><input type="button" id="trigger" style="width:20px" value="..."></td></tr>
</div>

<div id="technique" style="display: none">
<tr><td>Nature appel :</td><td><select><option>choix1</option>
		            <option>choix 2</option>
			  </select></td></tr>
</div>		

<div id="commercial" style="display: none">	  
<tr><td>Nature appel(1) :</td><td><select><option>choix 1</option>
		            <option>choix 2</option>
				 </select></td></tr>
<tr><td>Nature appel(2) :</td><td><select><option>test</option>
			  </select></td></tr>
</div>	

<div id="fin" style="display: none">
<tr><td>Demande: </td><td><textarea></textarea></td></tr>
<tr><td>Auteur fiche :</td><td><select> <option>1</option>
										<option>2</option>
										<option>3</option>
								</select></td></tr>
</table>
</div>	


J’ai fait un système de ce genre car sur les choix une ou plusieurs parties pouvait être communes.

Qu’en pensez vous?

merci d’avance


function afficherAutre() {
	var a = document.getElementById("technique");
	var m = document.getElementById("commercial");
	var b = document.getElementById("commun");
	var c = document.getElementById("fin");
	var monForm = document.getElementById( "monSelect" );

	if ( monForm.value == "1") {
			b.style.display = "";
			a.style.display = "";
			m.style.display = "none";
			c.style.display = "";
	} else if ( monForm.value == "2") {
			b.style.display = "";
			a.style.display = "none";
			m.style.display = "";
			c.style.display = "";
	} else {
		a.style.display = "none";
		m.style.display = "none";
		b.style.display = "none";
		c.style.display = "none";
	}
}

Le fait d’utilisé d’utilisé des divs au milieu du tableau fait foiré tout ton systeme, à partir du moment ou un element

est affiché, il affiche tout le tableau peut import si les divs des elements du tableau sont affiché ou non.

<select name="liste" id="monSelect" onChange="afficherAutre()">
<option value="0"></option>
<option value="1">choix 1</option>
<option value="2">choix 2</option>
</select>
<div id="commun" style="display:none">
commun
</div>
<div id="technique" style="display:none">
tech
</div>		
<div id="commercial" style="display:none">	 
commercial
</div>	
<div id="fin" style="display:none">
fin
</div>

Avec un truc simple sans tableau ca marche très bien.

PS : Vive Firebug, tu aurais vu le probleme de la premiere fois ! ( Sous firebug on vois bien que la

est pas du tout interpreté comme étant dans des multiples div, et les element
sont bien dans la et non dans les divs, qui sont vide pour le moteur html ( je supose ) ca donne un truc du genre :

<div .../>
<div .../>
<div .../>
<table>
<tr .../>
</table>

Les divs peuvent etre invisible ca empeche pas le

de s’afficher.

Edit : Bien sur, je parle pour Firefox, sur les autres navigateur le

imbriqué dans plusieurs div peut etre intepreté autrement !
Edité le 25/01/2009 à 02:34

Merci bien pour ton aide.

effectivement ainsi ca marche tres bien (sous IE également)

Mais alors comment peut on gérer les

?

pour ceux qui ont eu le meme problème la solution est ici:

www.siteduzero.com…

avec une association entre XHTML et les css, on arrive a aligner sans problème les champs comme on veut!