Button pour réinitialiser une partie d'un formulaire

Version imprimable

05/10/2011, 18h42
noordev

Button pour réinitialiser une partie d'un formulaire

Bonjour,

j'ai une petite question peut être bête :oops:

j'ai un formulaire composé de deux tableaux et pour chaque tableau j'ai 4 buttons pour ajouter/modifier/supprimer/réinitialiser pour les 3 premiers j'ai réussi a m'en sortir pour une débutante mais pour le button réinitialiser je ne sais pas comment faire???

j'ai deja teste

Code:

<input class="ul-button-update" name="reset_mur" type="reset" id="reset_mur" value ="" />

le probleme ca reset tout le formulaire et pas que le premier tableau

Merci
06/10/2011, 15h06
zulad
le mieux je pense, si j'ai bien compris ton problème serait de faire une fonction qui va effacer les champs que tu veux uniquement. Quelque chose dans le genre :
Code:

1 2 3 4 function resetField() { document.getElementById("NomDuChamp").value = ""; }
fonction que tu appelles depuis le onclick="resetField();" de ton bouton.
06/10/2011, 15h17
Bovino

Ou même

Code:

document.getElementById("NomDuChamp").value = document.getElementById("NomDuChamp").defaultValue;
06/10/2011, 22h37
noordev

Bonsoir,

Merci pour vos réponses. J'ai déjà pensé à cette solution mais je n'ai pas réussi à la faire marcher sur mon onclick. Sur le bouton update il ne se passait rien. J'ai écris la function reset_grp() dans un fichier JS que j'ai inclus dans la page html. Rien. :cry: Je l'ai rajouté directement dans le fichier html en utilisant les balises <script> : rien non plus. :cry:
J'avoue que je suis débutante débutante. :oops:

Je ne comprends vraiment pas pourquoi il ne se passait rien alors que quand je fais onclick = alert("test"), j'ai l'alert qui s'exécute !
07/10/2011, 12h00
vermine

Pourriez-vous nous montrez le code de vos tentatives ?

Oui bien sur :
Code:

1 2 3 4 5 6 7 8 function reset_grp() { alert("debut de la fonction reset groupe"); document.getElementById('nom_grp').value=""; document.getElementById('desc_grp').value=""; document.getElementById('haut_grp').value =""; alert("fin de la fonction reset groupe"); }
Et j'appelle la fonction avec le button suivant :

Code:

<input class="ul-button-update" name="reset_group" type="button" id="reset_group" onclick = "reset_grp()" />

Merci pour votre aide.

07/10/2011, 15h16
vermine

Pourriez-vous ajouter la partie HTML avec les trois champs qui doivent être vidés ?
Où se trouve votre code Javascript dans le code HTML, à quel endroit ?

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
<div class="form-tamle">
<table width="348" border="1" id ="grp_tab">
	<tr>
	<td width="200"><p>Nom du groupe</p></td>
	<td width="120"></td>
	</tr>
 
	<tr>
	<td colspan="2"><input class="text-6" type="text"  id = "nom_grp" name="nom_grp"/></td>
	</tr>
 
             <tr>
	<td><p>Description du groupe</p></td>
	<td></td>
	</tr>
 
	<tr>
	<td colspan="2"><input class="text-6" type="text" id="desc_grp" name ="desc_grp"  /></td>
	</tr>
 
             <tr>
	<td><p>Hauteur des murs </p></td>
	<td><input class="text-5" type="text" id= "haut_grp" name = "haut_grp" /></td>
	</tr>
</table>
</div>

Et la fonction est au début du fichier html

Code:

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
 
function reset_grp()
{
   alert("debut de la fonction reset groupe");
   document.getElementById('nom_grp').value="";
   document.getElementById('desc_grp').value="";
   document.getElementById('haut_grp').value ="";
   alert("fin de la fonction reset groupe");
}
</script>

J'ai même essayé dans un fichier JS que j'ai inclu comme suit :

Code:

<script type="text/javascript" src="js/grp.js"></script>

07/10/2011, 15h41
vermine

Lorsque vous dites "début du fichier html", vous parlez de la balise <head> ? Votre Javascript doit se trouver dans cette balise.

Avez-vous dans la page un autre objet qui porte le nom de reset_grp ?

oui c'est bien dans la balise <head>

Code:

1
2
3
4
5
6
7
8
9
 
<head>
	<title></title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="css/all.css" media="all" />
	<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/tabs-2.js"></script>
<script type="text/javascript" src="js/grp.js"></script>
</head>

;)

et non je n'ai pas un autre objet avec le nom reset_grp

Soyons brouillon

Juste pour le test, ce code-ci fonctionne chez vous ?

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
38
39
40
41
42
43
44
45
46
 
<html>
<head>
<script type="text/javascript">
 
function reset_grp()
{
   alert("debut de la fonction reset groupe");
   document.getElementById('nom_grp').value="";
   document.getElementById('desc_grp').value="";
   document.getElementById('haut_grp').value ="";
   alert("fin de la fonction reset groupe");
}
</script>
</head>
 
<body>
<div class="form-tamle">
<table width="348" border="1" id ="grp_tab">
	<tr>
	<td width="200"><p>Nom du groupe</p></td>
	<td width="120"></td>
	</tr>
 
	<tr>
	<td colspan="2"><input class="text-6" type="text"  id = "nom_grp" name="nom_grp"/></td>
	</tr>
 
             <tr>
	<td><p>Description du groupe</p></td>
	<td></td>
	</tr>
 
	<tr>
	<td colspan="2"><input class="text-6" type="text" id="desc_grp" name ="desc_grp"  /></td>
	</tr>
 
             <tr>
	<td><p>Hauteur des murs </p></td>
	<td><input class="text-5" type="text" id= "haut_grp" name = "haut_grp" /></td>
	</tr>
</table>
</div>
<input  class="ul-button-update" name="reset_group"  type="button"  id="reset_group" onclick = "reset_grp()"  />
</body>
</html>

07/10/2011, 17h05
noordev

effectivement le code marche, j' en déduit que j'ai une connerie ailleurs j'ai copié que des parties, je revérifie, maintenant je sais que le problème n'est pas dans ma fonction .....Merci beaucoup pour votre aide