Button pour réinitialiser une partie d'un formulaire

**noordev** · 05/10/2011, 18h42

Bonjour,

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

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 html :

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

<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

**zulad** · 06/10/2011, 15h06

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 :

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

1
2
3
4
function resetField()
{
document.getElementById("NomDuChamp").value = "";
}

fonction que tu appelles depuis le onclick="resetField();" de ton bouton.

**Bovino** · 06/10/2011, 15h17

Ou même

Code :

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

document.getElementById("NomDuChamp").value = document.getElementById("NomDuChamp").defaultValue;

**noordev** · 06/10/2011, 22h37

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.

Je l'ai rajouté directement dans le fichier html en utilisant les balises <script> : rien non plus.

J'avoue que je suis débutante débutante.

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 !

**vermine** · 07/10/2011, 12h00

Pourriez-vous nous montrez le code de vos tentatives ?

**noordev** · 07/10/2011, 15h09

Oui bien sur :

Code :

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

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 html :

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

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

Merci pour votre aide.

**vermine** · 07/10/2011, 15h16

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 ?

**noordev** · 07/10/2011, 15h29

Code html :

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
<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 :

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

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 html :

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

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

**vermine** · 07/10/2011, 15h41

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 ?

**noordev** · 07/10/2011, 15h51

oui c'est bien dans la balise <head>

Code :

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

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

**vermine** · 07/10/2011, 16h57

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

Code html :

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

**noordev** · 07/10/2011, 17h05

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

Button pour réinitialiser une partie d'un formulaire

JavaScript

Discussions similaires

Partager

Partager