[DOM] Effacer un champ d'un formulaire

**jadorelescss38** · 29/03/2007, 11h06

Bonjour,
je suis entrain de faire un formulaire et je voudrais trouver un moyen d'effacer certains champs de celui-ci (PAS TOUS) quand une case (checkbox) est coch�e (et cela sans que le formulaire soit envoy� et sans que les autres champs soit modifi�)...
je cherche donc � faire un script qui s'effectuera lorsque la fameuse checkbox sera coch� (donc un truc du style onclick="...")

Je pr�cise que les champs que je veux effacer sont en fait d'autres checkbox... je veux donc quelle reprenne leur valeur initiale (d�coch�)

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<html>
<head>
<title>Test d'un formulaire</title>
 
<style type="text/css">
  @import url(formulaire.css);
</style>
 
<script language="javascript">
var i=1;
var j=1;
function Cache(id){
        if (i==1){
                document.getElementById(id).style.visibility='visible'; document.getElementById(id).style.height='auto';
                i *= -1;
                return;
        }else if (i==-1){                
                document.getElementById(id).style.visibility='hidden'; document.getElementById(id).style.height='0px';
                i *= -1;
                return;
        }
}
function Cache2(id){
        if (j==1){
                document.getElementById(id).style.visibility='visible'; document.getElementById(id).style.height='auto';
                j *= -1;
                return;
        }else if (j==-1){                
                document.getElementById(id).style.visibility='hidden'; document.getElementById(id).style.height='0px';
                j *= -1;
                return;
        }
}
function Efface(id){
		if (i==-1){
			document.getElementById(id);
			return;
		}
}
</script>
</head>
 
<body>
<h1>Mon Formulaire</h1>
<form name="formulaire" method="get" action="index.html">
<div class="visible">
Voir la suite du formulaire:<INPUT type="checkbox" value="suite" name="1" onclick="Cache('invisible1');" onclick="Efface('invisible1');">
</div>
 
<div id="invisible1">
suite1:<INPUT id="aefface" type="checkbox" value="suite1" name="2"><br />
texte: <INPUT id="aefface" type="textarea" value="votre_texte" name="3"><br />
suite2:<INPUT id="aefface" type="checkbox" value="suite2" name="4"><br />
suite3:<INPUT id="aefface" type="checkbox" value="suite3" name="5"><br />
</div>
 
<div class="visible">
Vous avez une voiture:<INPUT type="checkbox" value="voiture" name="6" onclick="Cache2('invisible2');">
</div>
 
<div id="invisible2">
Renault:<INPUT id="aefface2" type="checkbox" value="renault" name="7"><br />
Ford:<INPUT id="aefface2" type="checkbox" value="ford" name="8"><br />
Peugeot:<INPUT id="aefface2" type="checkbox" value="peugeot" name="9"><br />
</div><br />
<INPUT type="submit" value="envoyer" name="envoyer">
<INPUT type="reset" value="effacer" name="effacer">
</form>
</body>
</html>

Et ma feuille de style:

Code CSS :

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
/* feuille de style du formulaire */
div.visible {
background-color: black;
color: white;
}
 
div#invisible1 {
background-color: grey;
visibility: hidden;
height: 0;
}
 
div#invisible2 {
background-color: grey;
visibility: hidden;
height: 0;
}

Merci

**grabriel** · 29/03/2007, 11h41

Salut,

au lieu de ca
onclick="Cache('invisible1');" onclick="Efface('invisible1');

tu peux faire un onclick="afficheEfface();"

et dans ton action javascript afficheEfface() tu fais un truc du style :

Code Javascript :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
 
if (document.getElementById(invisible1).style.display=="none")
            document.getElementById(invisible1).style.display="block";
         else document.getElementById(invisible1).style.display="none";

Qui va affiche ou cacher ton div invisible1 sinon tu peux d�tecter si ton checkbox est checked ou pas au pour afficher ou non ton div.

et apr�s un document.getElementById(aefface).value=""; (je ne suis plus trop sure pour le code et r�cup�rer la valeur) qui mettra la value � "" pour tout tes objets avec un id = aefface.

Bon courage!!!

**jadorelescss38** · 29/03/2007, 17h15

Merci pour ton aide.
J'ai utilis� comme tu me l'as conseill� un "display", sa marche mieux (notamment sur IE...)

Pour r�sumer: Je fais un formulaire dont certaines parties sont cach�es et n'apparaissent que quand le "checkbox" ad�quate est coch�.
Je peux �galement avoir une partie cach�e � l'int�rieure d'une autre partie cach�e... (c'est un peu le syst�me des poup�es russes).
J'ai donc cr�er 2 fonctions ("Cache" et "Cache2") qui me permettent de faire sa... "Cache" permet de g�rer un "sous-formulaire-cach�" (cette fonction a besoin d'une variable). "Cache2" permet de g�rer un "sous-formulaire-cach�" se trouvant � l'int�rieur d'un autre "sous-formulaire-cach�"...

Le principe de fonctionnement veut que lorsque je ferme un "sous-formulaire", tous les "sous-sous-formulaires" qu'il contient doivent se fermer... Cela marche � peu pr�s...

MON SOUCI: Je n'arrive pas a effac� le contenu des champs des sous-formulaires quand je les recache....
je m'explique: quand je fais apparaitre un "sous-formulaire-cach�" il me donne la possibilit� de remplir plusieurs champs (en l'ocurance des checkboxs). jusque l'a tout va bien... Supposons que je remplisse un des ces fameux champs... et que finalement je change d'avis et que je "referme" ce sous-formulaire, bin dans ce cas l�, les valeurs que j'ai mis dans ces champs sont toujours pr�sents et seront envoy�s lorsque je validerai mon formulaire.
Sa ne doit pas �tre le cas

C'est pour sa que je veux que les champs soit r�initialis� quand je ferme le sous formulaire contenant ces champs...

De plus, le nombre de champs dans un "sous-formulaire" est al�atoire... je veux donc cr�er une fonction me permettant de compter le nombre de champs... en quelque sorte de pouvoir les lister (sinon je ne pourrai pas les r�initialiser)

Autre chose: Je souhaiterai que remplacer mes deux fonctions ("Cache" et "Cache2") par une seule fonction qui serait capable de g�rer n'importe quel nombre de "sous-formulaire". Si vous avez des id�es...

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<html>
<head>
<title>Test d'un formulaire</title>
 
<style type="text/css">
  @import url(formulaire.css);
</style>
 
<script language="javascript">
 
function Cache(id){
 
        if (document.getElementById(id).style.display =='none'){
                document.getElementById(id).style.display='block'; document.getElementById(id).style.height='auto';
				return;
        }else {
 
                document.getElementById(id).style.display='none'; document.getElementById(id).style.height='0';
				return;
        }
}
 
function Cache2(id1,id2){
 
        if (document.getElementById(id1).style.display =='none'){
                document.getElementById(id1).style.display='block'; document.getElementById(id1).style.height='auto';
        }else {
			if (document.getElementById(id2).style.display =='none'){
					document.getElementById(id1).style.display='none'; document.getElementById(id1).style.height='0';
					return;
				}
			else {
					document.getElementById(id1).style.display='none'; document.getElementById(id1).style.height='0';
					document.getElementById(id2).style.display='none'; document.getElementById(id2).style.height='0';
					return;
				}
			}
}
 
 
</script>
 
</head>
 
<body>
 
<h1>Mon Formulaire</h1>
<form name="formulaire" method="get" action="index.html">
<div class="visible">
Voir la suite du formulaire:<INPUT type="checkbox" value="suite" name="A_niv1" OnClick="Cache('invisible1');">
 
<div id="invisible1">
Case1:<INPUT type="checkbox" value="suite1" name="A_niv2_a"><br />
Texte:<INPUT type="textarea" value="" name="A_niv2_b"><br />
Case2:<INPUT type="checkbox" value="suite2" name="A_niv2_c"><br />
Case3:<INPUT type="checkbox" value="suite3" name="A_niv2_d"><br />
</div>
 
<div class="visible">
Vous avez une voiture:<INPUT type="checkbox" value="voiture" name="B_niv1" OnClick="Cache2('invisible2','invisible2a');">
</div>
 
<div id="invisible2">
Renault:<INPUT type="checkbox" value="renault" name="B_niv2_a"><br />
Ford:<INPUT type="checkbox" value="ford" name="B_niv2_b"><br />
Peugeot:<INPUT type="checkbox" value="peugeot" name="C_niv2_c"><br />
Autres:<INPUT type="checkbox" value="autres" name="D_niv2_d" OnClick="Cache('invisible2a');"><br />
 
<div id="invisible2a">
Ferrari:<INPUT type="checkbox" id="test" value="ferrari" name="B_niv3_a"><br />
BMW:<INPUT type="checkbox" value="bmw" name="B_niv3_b"><br />
Porsche:<INPUT type="checkbox" value="porsche" name="B_niv3_c"><br />
Autre marque:<INPUT type="textarea" value="" name="B_niv3_d"><br />
</div>
</div><br />
 
<div>
<INPUT type="submit" value="envoyer" name="envoyer" align="center">
<INPUT TYPE="reset" value="Effacer" name="effacer" align="center">
 
</div>
</div>
</form>
 
</body>
</html>

Et mon CSS:

Code css :

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
38
39
40
41
42
43
/* feuille de style du formulaire */
 
body {
 
height: 100%;
width: 100%;
 
}
 
div.visible {
 
background-color: #339999;
color: black;
min-height: auto;
 
}
 
#invisible1 {
 
margin-left: 40px;
background-color: #339900;
display:none;
height: 0%;
 
}
 
#invisible2 {
 
margin-left: 40px;
background-color: #339900;
display:none;
height: 0%;
 
}
 
#invisible2a {
 
margin-left: 40px;
background-color: #336600;
display:none;
height: 0%;
 
}

Si vous avez des id�es, sur la fa�on dont je pourrais atteindre mes objectifs, je suis preneur....

**MasterOfChakhaL** · 30/03/2007, 09h27

Salut,

Bonjour,
je suis entrain de faire un formulaire et je voudrais trouver un moyen d'effacer certains champs de celui-ci (PAS TOUS) quand une case (checkbox) est coch�e (et cela sans que le formulaire soit envoy� et sans que les autres champs soit modifi�)...
je cherche donc � faire un script qui s'effectuera lorsque la fameuse checkbox sera coch� (donc un truc du style onclick="...")

Je pr�cise que les champs que je veux effacer sont en fait d'autres checkbox... je veux donc quelle reprenne leur valeur initiale (d�coch�)

J'ai l'impression que si tu remplaces tes checkbox par des bouton radios, ca devrait faire tout ce que tu veux ( <input type="radio" .... /> )

... et que finalement je change d'avis et que je "referme" ce sous-formulaire, bin dans ce cas l�, les valeurs que j'ai mis dans ces champs sont toujours pr�sents et seront envoy�s lorsque je validerai mon formulaire.
Sa ne doit pas �tre le cas

Pourquoi ca ne pourrait pas �tre le cas? Dans le script qui recoit le formulaire, il suffit qu'en fonction de tes checkbox, tu prennes ou non en compte certains champs et pas d'autres

Si tu souhaites quand m�me continuer dans le sens que tu as pris, il vaudrait mieux poster sur le forum javascript

**jadorelescss38** · 30/03/2007, 15h57

Merci pour ton aide.
J'ai plus ou moins avanc�...

Cependant, j'ai de nouvelles questions:

- Est-il possible de lister les <input> pr�sent dans une <div> ?
Je sais qu'il est possible de lister les <input> pr�sent dans un <form>, mais supposons qu'� l'int�rieur de mes balises <form> et </form>, j'ai rang� l'ensemble de mes <input> dans plusieurs <div>... Comment pourrais-je savoir combien j'ai d'input dans chaque <div> ? (si cela est possible) (en sachant bien �videment que je souhaite que mon script s'adapte a plusieurs cas)

- Est-il possible de mettre plusieurs formulaires dans un seul formulaire et qu'il y ai un seul et unique bouton ENVOYER (qui sera celui de mon formulaire principal) qui me renverra l'ensemble de mes <input> ? (aparament non, mais peut-�tre que je mis suis mal pris...)

Merci d'avance...

**bigben** · 04/04/2007, 12h51

- Est-il possible de lister les <input> pr�sent dans une <div> ?
Je sais qu'il est possible de lister les <input> pr�sent dans un <form>, mais supposons qu'� l'int�rieur de mes balises <form> et </form>, j'ai rang� l'ensemble de mes <input> dans plusieurs <div>... Comment pourrais-je savoir combien j'ai d'input dans chaque <div> ? (si cela est possible) (en sachant bien �videment que je souhaite que mon script s'adapte a plusieurs cas)

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
var NbInput;
var collection = document.getElementById("IdDuDiv").getElementsByTagName("INPUT");
 
NbInput = collection.length;

- Est-il possible de mettre plusieurs formulaires dans un seul formulaire et qu'il y ai un seul et unique bouton ENVOYER (qui sera celui de mon formulaire principal) qui me renverra l'ensemble de mes <input> ? (aparament non, mais peut-�tre que je mis suis mal pris...)

pourquoi faire plusieurs formulaires si tu veux envoyer les donn�es de tous les formulaires en m�me temps ?

**jadorelescss38** · 04/04/2007, 15h37

Envoy� par bigben

pourquoi faire plusieurs formulaires si tu veux envoyer les donn�es de tous les formulaires en m�me temps ?

Non c'�tait un b�tise de ma part...

Merci pour ta fonction, sa devrait me permettre de r�aliser mon formulaire comme je l'entend...

**suricat** · 04/04/2007, 22h37

Voici l'endroit o� tu aurais p� trouver la fonction getElementsByTagName.
R�f�re toi � ce site si tu souhaites utiliser le DOM.

Bon courage !

[DOM] Effacer un champ d'un formulaire

JavaScript

Discussions similaires

Partager

Partager