11540 sujets

JavaScript, DOM et API Web HTML5

Button pour réinitialiser une partie d'un formulaire

Bonjour,

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

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

des pistes , des idées je suis preneuse Smiley cligne et merci d'avance
Hello.

Soit tu utilises un input de type reset, et tu réinitialises tout le formulaire d'un coup, soit il faut que tu passe par JS, avec une action au clic sur un bouton qui boucle sur les éléments de chaque tableau et les reset.
Hello,

Merci Florian pour ta réponse, j'ai essayé le input type reset
<input  class="ul-button-update" name="reset_mur"  type="reset"  id="reset_mur"  value =""  />


le problème ca reset tout le formulaire et pas que le tableau voulu, donc je vais tenter le script JS et boucler sur les elements du tableau, je pensais qu il yavait un moyen plus simple,visiblement non Smiley eek Smiley eek Smiley eek
Bonjour,

Aurais-tu un bout de ton code à nous mettre sous la dent, car on ne voit pas bien ce que contient chaque tableau du formulaire, à part les 4 boutons que tu décris ?

N.B: le bouton "reset" a pour action de réinitialiser l'ensemble du formulaire (<form>...</form> )
Bonjour,
Ceci fait ce que tu demandes. A toi d'adapter bien sûr ... C'est pour que tu puisses voir le principe.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Réinitialiser une partie d'un formulaire</title>
<script type="text/javascript">
function init(tb){
	var t = document.getElementsByName(tb);
	for(var i=0;i<t.length;i++){
		if(t[i ].type=="text"||t[i ].type=="textarea") t[i ].value="";
		if(t[i ].type=="radio"||t[i ].type=="checkbox") t[i ].checked=false;
	}
}
</script>
<style type="text/css">
#contenu {width:500px;margin:0 auto;}
#tbl1 td, #tbl2 td {height:40px;vertical-align:middle;}
table {width:100%}
</style>
</head>
<body>
<div id="contenu">
<form action="" id="formulaire">
<table id="tbl1" border="1">
	<tr><td>Nom : <input type="text" id="nom" size="20" name="t1"></td></tr>
	<tr><td>Prénom : <input type="text" id="prenom" size="20" name="t1"></td></tr>
	<tr><td>Message <textarea rows="5" cols="50" id="message" name="t1"></textarea></td></tr>
	<tr><td>Ville : 
	<input type="radio" id="Paris" name="t1">Paris, 
	<input type="radio" id="Marseille" name="t1">Marseille, 
	<input type="radio" id="Bordeaux" name="t1">Bordeaux,
	</td></tr>
	<tr><td><input type="button" value="Reset" onclick="init('t1');"></td></tr>
</table>
<br>
<table id="tbl2" border="1">
	<tr><td>Adresse : <input type="text" id="adresse" size="20" name="t2"></td></tr>
	<tr><td>Hobby : <input type="text" id="hobby" size="20" name="t2"></td></tr>
	<tr><td>Age <textarea rows="5" cols="50" id="age" name="t2"></textarea></td></tr>
	<tr><td>Moyens de locomation : 
	<input type="checkbox" id="voiture" name="t2">voiture, 
	<input type="checkbox" id="moto" name="t2">moto, 
	<input type="checkbox" id="vélo" name="t2">vélo,
	</td></tr>
	<tr><td><input type="button" value="Reset" onclick="init('t2');"></td></tr>
</table>
</form>
</div>
</body></html>
lddsoft, va pour l'élément input de type "button" (c'est la solution que j'aurais préconisée) ; mais, pour la mise en forme du formulaire en tableau et l'absence d'éléments label, tu repasseras... Smiley confus
Modifié par Victor BRITO (11 Oct 2011 - 10:38)
+1 pour utiliser des éléments labels qui vont bien. Pour rappel, ça ressemble à ça:
<p>
  <label for="bidule">Votre bidule</label>
  <input id="bidule" type="text" name="..." />
</p>

De même pour les INPUT de type radio ou checkbox, penser à leur associer un LABEL de manière explicite (en utilisant les attributs id et for), ça permet notamment de cliquer sur le texte du label pour sélectionner le bouton radio/checkbox correspondant.

Et pour la mise en page sans tableaux, bah on est en 2011 quoi... Smiley rolleyes
@fvsch, @Victor Brito :

Tout à fait d'accord avec vos remarques concernant l'emploi des tableaux et l'absence d'éléments "label". Je sais tout cela, mais je ne l'ai pas mis en pratique. Je ne faisais que répondre à la question initiale de noordev.
Sujet clos
Aller à