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";
	}
 
}

[Kerod]

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function test()
{
	if (document.getElementById('addr2').style.display == '')
	{
		document.getElementById('addr2').style.display = 'none';
                document.getElementById('imageD').src = "cross.gif";
	}
	else 
	{
		document.getElementById('addr2').style.display = '';
                document.getElementById('imageD').src = "noncross.gif";
	}
	
}

et ton image :

Code html :

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

<img src="" id="imageD" alt="show/hide" onClick="test()"/>

[DonKnacki]

merci beaucoup
Je crois que je vais pouvoir me débrouiller maintenant
Probleme résolu

[DonKnacki]

finalement je n'ai pas réussi donc je me contenterai de 2 boutons différents

Par contre je me suis apercu d'un probleme plus "grave" :
si on désactive le JS alors toute mes adresses sont afficher

je prefererai dans ce cas avoir uniquement l'adresse1 affichée et ne pas pouvoir afficher les adresses 2 à 5 (autrement dis que le bouton ne fonctionne pas)

J'avais pensé passer par du css et pour les id addr2, addr3, addr4 et addr5 mettre display none mais dans ce cas ces adresses ne sont jamais affiché (même avec JS activé )

quelqu'un aurait une solution ?


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
17
18
<?php
for ($i = 1; $i < 6; $i++) //pour les adresse de 1 à 5 
        {
        $nb = $i++;
 
        echo '<div id="addr'.$i.'"> // on donne un id à chaque adresse pour pouvoir les afficher ou les masquer 
       <p><label for="adresse'.$i.'" accesskey="a">
       Adresse <input type="text" name="adresse'.$i.'" id="adresse'.$i.'" size="30" maxlength="30" />';
 
        if (1 != $i) //si ce n'est pas l'adresse 1 alors on affiche un bouton qui permet de cacher l'adresse 
                echo '<img src="noncross.gif" alt="hide" onclick="javascript:cacher(\'addr'.$i.'\')" />';
 
        if (5 != $i) //si on est pas à la derniere adresse alors on affiche un bouton qui permet d'afficher l'adresse suivant 
                echo '<img src="cross.gif" alt="show" onclick="javascript:afficher(\'addr'.$nb.'\')" />';
 
        echo '</label></p></div>';
        }
?>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<script>
function chargerPage()
        {
        for (i = 2; i < 6; i++)
                {
                var addr = document.getElementById('addr'+i); 
                addr.style.display = "none";
                }
        }
//par défaut les adresse 2 à 5 seront masquer (ne fonctionne pas si on désactive le JS) 
</script>

[E.Bzz]

Bonjour,

je prefererai dans ce cas avoir uniquement l'adresse1 affichée et ne pas pouvoir afficher les adresses 2 à 5 (autrement dis que le bouton ne fonctionne pas)

il te suffit de définir le css approprié dans les balises concernées.
Pour un affichage par défaut :

Code :

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

style="display:block;"

Pour un masquage par défaut :

Code :

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

style="display:none;"

A+

[DonKnacki]

Ah merci beaucoup !! j'avais pas pensez à mettre du css directement dans le fichier .php

Ca fonctionne en tout cas !