Button pour réinitialiser une partie d'un formulaire [Résolu]

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

05/10/2011, 18h42	#1
noordev Invité de passage Inscription : octobre 2011 Messages : 11 Détails du profil Informations personnelles : Sexe : Informations forums : Inscription : octobre 2011 Messages : 11 Points : 1 Points : 1	Button pour réinitialiser une partie d'un formulaire 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
	00

06/10/2011, 15h17	#3
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 789 Points : 35 789	Ou même Code : Sélectionner tout - Visualiser dans une fenêtre à part document.getElementById("NomDuChamp").value = document.getElementById("NomDuChamp").defaultValue; __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	20

07/10/2011, 12h00	#5
vermine Responsable JavaScript & AJAX Inscription : mars 2008 Messages : 2 690 Détails du profil Informations personnelles : Âge : 27 Informations forums : Inscription : mars 2008 Messages : 2 690 Points : 5 763 Points : 5 763	Pourriez-vous nous montrez le code de vos tentatives ? __________________ Elen Poukram - Isegoria - Sandawe
	00

07/10/2011, 15h16	#7
vermine Responsable JavaScript & AJAX Inscription : mars 2008 Messages : 2 690 Détails du profil Informations personnelles : Âge : 27 Informations forums : Inscription : mars 2008 Messages : 2 690 Points : 5 763 Points : 5 763	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 ? __________________ Elen Poukram - Isegoria - Sandawe
	00

07/10/2011, 15h41	#9
vermine Responsable JavaScript & AJAX Inscription : mars 2008 Messages : 2 690 Détails du profil Informations personnelles : Âge : 27 Informations forums : Inscription : mars 2008 Messages : 2 690 Points : 5 763 Points : 5 763	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 ? __________________ Elen Poukram - Isegoria - Sandawe
	00

06/10/2011, 22h37	#4
noordev Invité de passage Inscription : octobre 2011 Messages : 11 Détails du profil Informations personnelles : Sexe : Informations forums : Inscription : octobre 2011 Messages : 11 Points : 1 Points : 1	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 !
	00

07/10/2011, 17h05	#12
noordev Invité de passage Inscription : octobre 2011 Messages : 11 Détails du profil Informations personnelles : Sexe : Informations forums : Inscription : octobre 2011 Messages : 11 Points : 1 Points : 1	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
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email