Discussion :

[DonKnacki]

Bonjour, je suis actuellement en train de faire un petit site web qui me permettrait aussi d'assurer une gestion de mes contacts donc qui réalise un carnet d'adresse

J'aimerai avoir la possiblité d'inséré plusieur adresse à une meme personne
c'est pourquoi j'ai pensé à mettre par défaut une zone de saisie avec une image + à coté
lorsqu'on clique sur cette image j'aimerai qu'une nouvelle zone de saisie avec adresse 2 apparaisse; à coté j'aimerai avoir une image - pour la recacher et une une image + pour acceder à une 3 ieme adresse

Apres quelque recherche sur le net, il semblerai que le javascript soit une bonne solution pour faire
seulement j'ai tres peu de connaissance dans ce langage donc si vous pouvez me donnez une base

J'ai déjà codé quelque chose de tres simple si ca peut aider

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<p>
<label for="adresse1" accesskey="a">adresse :</label>
<input type="text" name="adresse1" id="adresse1" size="30" maxlength="30"/>	
<img src="cross.gif" alt="+" onclick="javascript:afficher(1)"/>
</p>	
<p>
<label for="adresse2">adresse :</label>
<input type="text" name="adresse2" id="adresse2" size="30" maxlength="30"/>	
<img src="noncross.gif" alt="-" onclick="javascript:afficher(0)"/>
<img src="cross.gif" alt="+" onclick="javascript:afficher(1)"/>
</p>
<p>
<label for="adresse3">adresse :</label>
<input type="text" name="adresse3" id="adresse3" size="30" maxlength="30"/>	
<img src="noncross.gif" alt="-" onclick="javascript:afficher(0)"/>
</p>

l'image noncross.gif doit me permette de cacher le label ainsi que la zone de texte
l'image cross.gif doit faire apparaitre une nouvelle adresse avec la zone de texte à remplir par l'utilisateur

J'espere avoir été claire dans mes explications
Merci pour l'aide que vous m'apporterez

[sachav]

Voila le code tout fait, pour 3 contacts, si tu veux en mettre plus il suffit d'etudier un peu le code...

PS: pour que ce code marche, il faut que le "</label>" s'arrete APRES l'input texte, et il faut donner un ID au label.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
 
 
<p>
<label for="adresse1" accesskey="a">adresse :
<input type="text" name="adresse1" id="adresse1" size="30" maxlength="30"/>	
<img src="cross.gif" alt="+" onclick="javascript:afficher('addr2')"/>
</p>	
</label>
<p>
<label for="adresse2" id="addr2">adresse :
<input type="text" name="adresse2" id="adresse2" size="30" maxlength="30"/>	
<img src="noncross.gif" alt="-" onclick="javascript:cacher('addr2')"/>
<img src="cross.gif" alt="+" onclick="javascript:afficher('addr3')"/>
</p>
</label>
<p>
<label for="adresse3" id="addr3">adresse :
<input type="text" name="adresse3" id="adresse3" size="30" maxlength="30"/>	
<img src="noncross.gif" alt="-" onclick="javascript:cacher('addr3')"/>
</p>		
</label>
<script language="javascript">
<!--
function cacher(nb) {
document.getElementById(nb).style.visibility="HIDDEN"
}
function afficher(x) {
document.getElementById(x).style.visibility="VISIBLE"
}
function chargerPage(x,y) {
document.getElementById(x).style.visibility="HIDDEN"
document.getElementById(y).style.visibility="HIDDEN"
}
chargerPage("addr2","addr3")
//-->
</script>

[DonKnacki]

en réalité je préfere utilisé les display car c'est plus extéthique

en revanche je ne comprend pas pourquoi par défaut j'ai tout afficher??

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<p><label for="adresse1" accesskey="a">adresse :
   <input type="text" name="adresse1" id="adresse1" size="30" maxlength="30"/>	
   <img src="cross.gif" alt="+" onclick="javascript:afficher('addr2')"/>
</label></p>	
<p><label for="adresse2" id="addr2">adresse :
   <input type="text" name="adresse2" id="adresse2" size="30" maxlength="30"/>	
   <img src="noncross.gif" alt="-" onclick="javascript:cacher('addr2')"/>
   <img src="cross.gif" alt="+" onclick="javascript:afficher('addr3')"/>
</label></p>
<p><label for="adresse3" id="addr3">adresse :
   <input type="text" name="adresse3" id="adresse3" size="30" maxlength="30"/>	
   <img src="noncross.gif" alt="-" onclick="javascript:cacher('addr3')"/>
</label></p>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function afficher(id)
{
	var div = document.getElementById(id);
	div.style.display = "";
}
function cacher(id)
{
	var div = document.getElementById(id);
	div.style.display = "none";
}
function chargerPage(x,y) 
{
	var div = document.getElementById(x);
	div.style.display = "none";
	var div = document.getElementById(y);
	div.style.display = "none";
}
chargerPage("addr2","addr3")

[DonKnacki]

Bonjour, j'ai résolu mon probleme à l'aide de la fonction window.onload

je te remerci sachav pour l'aide que tu m'a apporté !

J'aimerai avoir une autre précision :

Pour le moment j'ai deux boutons (un qui me sert à cacher les inf et l'autre qui me sert à les afficher)
Ne pourai je pas avoir un unique bouton ? (avec une fonction qui me permette de mettre quelque chose en argument et selon la valeur de cet argument alors cela voudra dire cacher ou afficher )

cette fonction je pense pouvoir la faire. Le souci qui va se poser c'est comment gérer le changement d'image ???

[Kerod]

Si si tu peux

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

       document.getElementById(id).style.display = (document.getElementById(id).style.display  == 'none') ? '' : 'none';

C'est le code à mettre dans ta nouvelle fonction

Pour l'image tout dépend du résultat du test.

[DonKnacki]

J'y suis presque mais j'ai un souci avec mes images. Apparement j'ai l'impression qu'il ne trouve pas le chemin (je précise que tout mes fichiers sont dans le même répertoire pour le moment)

voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="addr1">
<p><label for="adresse1" accesskey="a">Adresse
<input type="text" name="adresse1" id="adresse1" size="30" maxlength="30"/>	
</label></p>	
<p>
<label for="cp1" id="cp1">Code Postal
<input type="text" name="cp1" id="cp1" size="5" maxlength="5"/>
</label>
</p>
<p>
<label for="ville1" id="ville1">Ville
<input type="text" name="ville1" id="ville1" size="30" maxlength="30"/>
<img src="imageAfficher" alt="show/hide" onClick="javascript:test()"/>
</label>
</p>
</div>

et pour le script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function test()
{
	var imageAfficher;
    var imageCacher;
	document.getElementById('addr2').style.display = (document.getElementById('addr2').style.display  == 'none') ? '' : 'none';
	if (document.getElementById('addr2').style.display == '')
	{
		imageCacher = "cross.gif";
		imageAfficher = "noncross.gif";
 
	}
	else 
	{
		imageCacher = "noncross.gif";
		imageAfficher = "cross.gif";
	}
 
}