Afficher / Cacher une partie d'un formulaire

Version imprimable

Bonjour,

Voici l'evenement pour l'affichage d'une partie du formulaire :

Code:

1
2
3
4
5
<select name="nature" onchange="JavaScript:aff_pro(this.form.nature.selectedIndex);">
    <option selected>Choisissez</option>
    <option value="Professionnel">&agrave; titre professionnel</option>
     <option value="Privé">&agrave; titre priv&eacute;</option>
</select>

Et voici la fonction javascript correspondante :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript">
<!--
function aff_pro(index) {
	if(index=1) {
		document.getElementById('tr1').style.visibility='visible';
		document.getElementById('tr2').style.visibility='visible';
		document.getElementById('tr3').style.visibility='visible';
		document.getElementById('tr4').style.visibility='visible';
		document.getElementById('tr5').style.visibility='visible';
		document.getElementById('tr6').style.visibility='visible';
		document.getElementById('tr7').style.visibility='visible';
		document.getElementById('tr8').style.visibility='visible';
	}
}
//-->
</script>

exemple d'un element :

Code:

1
2
3
4
5
6
<tr  id=tr4 style="visibility:hidden"> 
                <td width="186">Adresse de facturation : </td>
                <td width="180"> 
                    <input type="text" name="adresse_fact">
                 </td>
          </tr>

ceci marche convenablement, mais je voudrais que lorsque je choisisse l'option 2, les champs initialement rendu visible par la fonction s'affiche à nouveau, et là ce n'ai apparemment pas si simple car ceci ne marche pas :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function aff_pro(index) {
	if(index=1) {
		document.getElementById('tr1').style.visibility='visible';
		document.getElementById('tr2').style.visibility='visible';
		document.getElementById('tr3').style.visibility='visible';
		document.getElementById('tr4').style.visibility='visible';
		document.getElementById('tr5').style.visibility='visible';
		document.getElementById('tr6').style.visibility='visible';
		document.getElementById('tr7').style.visibility='visible';
		document.getElementById('tr8').style.visibility='visible';
	}
	if(index=2) {
		document.getElementById('tr1').style.visibility='hidden';
		document.getElementById('tr2').style.visibility='hidden';
		document.getElementById('tr3').style.visibility='hidden';
		document.getElementById('tr4').style.visibility='hidden';
		document.getElementById('tr5').style.visibility='hidden';
		document.getElementById('tr6').style.visibility='hidden';
		document.getElementById('tr7').style.visibility='hidden';
		document.getElementById('tr8').style.visibility='hidden';
	}	
}

Quelqu'un a t-il la solution ?

Merci

Damien

07/10/2005, 22h29
Pymm

Pour plus de visibilité :tagcode:
édites ton poste stp :wink:
08/10/2005, 09h22
javatwister
salut

Il te manque quelques bases simples pour travailler efficacement avec javascript;
Code:

1 2 <select name="nature" onchange="JavaScript:aff_pro(this.form.nature.selectedIndex);">
ceci est étrangement lourd, par exemple; en html/javascript, ça donne:

Code:

<select id="nat" name="nature" onchange="aff_pro(this.selectedIndex)">

si en testant une identité, tu utilises l'opérateur "=", tu risques de tester longtemps...; consulte la doc javascript sur ce même site;

plutôt que d'accumuler les lignes de codes similaires dans tes scripts (ce qui correspond mal au concept général de programmation!), cherche la solution qui te fera gagner en temps et en clarté: pour afficher ou cacher ces 8 lignes consécutives, place-les dans un tableau distinct et fais varier sa propriété display!
Code:

1 2 3 4 5 function aff_pro(ind) { with(document.getElementById("tableau").style){ display = (index==1) ? block : none; } }

En effet, il me manque les bases, ça va beaucoup mieux avec == !
Merci pour ta réponse claire et précise.
Voici mon code maintenant fonctionnel (avec les balises code !) :
Code:

1 2 3 4 5 6 7 8 9 function aff_pro(index) { var t_id=new Array("tr1","tr2","tr3","tr4","tr5","tr6","tr7","tr8","tr9","tr10"); for(var i = 0; i < t_id.length; i++) { with(document.getElementById(t_id[i]).style){ visibility = (index==1) ? "visible" : "hidden"; } } }
S'il est encore optimisable, je prend toujours les conseils !

ah, je vois que tu tiens à agir sur chaque ligne individuellement :roll:

je crois que le mieux serait ceci:
Code:

1 2 3 4 5 function aff_pro(index){ for(var i = 1; i < 11; i++) { document.getElementById("tr"+i).style.display= (index==1) ? 'block' : 'none'; } }

17/10/2005, 18h10
damjal

jolie optimisation, nickel !

merci

Bye