afficher ou cacher des parties de formulaire

Version imprimable

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:

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

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:

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>

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:

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:

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")

18/11/2007, 22h00
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 ???
18/11/2007, 22h14
Kerod

Si si tu peux :mrgreen:

Code:

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.

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:

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:

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

Code:

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:

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

19/11/2007, 16h28
DonKnacki

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

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 8O

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:

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:

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>

21/11/2007, 14h07
E.Bzz

Bonjour,

Citation:

Envoyé par Nom

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:

style="display:block;"

Pour un masquage par défaut :

Code:

style="display:none;"

A+
21/11/2007, 20h43
DonKnacki

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

Ca fonctionne en tout cas !