[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