Un "reset" formulaire filtré ?

Version imprimable

Bonjour,

Je ne parviens pas vraiment à savoir si c'est en JavaScript pur ou en JQuery que je pourrais faire ça, et si c'est possible.

Ce que je souhaiterai, c'est générer un "reset" sur un formulaire, comme le fait le bouton "reset" de base, mais sur une sélection limitée de champs, et non pas sur tout le formulaire.

Exemple :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <form> <label for="txtbxNom">Nom : </label><input type="text" name="nom" value="Straus" id="txtbxNom" /><br /> <label for="txtbxPrenom">Prénom : </label><input type="text" name="prenom" value="Maximilien" id="txtbxPrenom" /><br /> <label for="txtbxAge">Age : </label><input type="text" name="age" id="txtbxAge" /> <input id="btnCustomReset" type="button" value="Réinitialiser" /> </form> <script type="text/javascript" charset="utf-8"> $(document).ready(function() { var vChampsAReinitialiser = $('#txtbxNom, #txtbxPrenom'); $('#btnCustomReset').click(function() { ... ? }); } </script>
Mon formulaire comporte trois champs identifiés txtbxNom, txtbxPrenom et txtbxAge, cependant côté scripts, seuls les deux premiers sont "référencés", dans la variable vChampAReinitialiser.

Je souhaite qu'au click du bouton btnCustomReset, seuls ces deux champs soient réinitialisés.

La première solution était simplement de faire :
Code:

1 2 vChampAReinitialiser.val('');
Mais un vrai reset ne fera pas QUE vider les contrôles, ils leurs affectera la valeur initiale codée en dur via l'attribut value.

Bonne journée :)
Oragon

01/12/2010, 10h04
Bovino

Citation:

Je ne parviens pas vraiment à savoir si c'est en JavaScript pur ou en JQuery que je pourrais faire ça

Ben... c'est un peu la même chose :mrgreen:
jQuery n'est jamais QUE du JavaScript.

Sinon, regarde du coté de defaultValue pour réinitialiser tes champs ;)

Oui ma phrase était pas précise. En gros il était question de savoir si JQuery était nécessaire pour ça :). Bon je vais jeter un coup d'oeil à defaultValue et j'edite pour résolu si c'est ce que je veux :).

[EDIT] Ok c'était exactement ce que je voulais. Ce système me permettra de proposer à nouveau à l'internaute les valeurs par défaut pour des champs particuliers :

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
 
<form>
	<label for="txtbxNom">Nom : </label><input type="text" name="nom" value="Straus" id="txtbxNom" /><br />
	<label for="txtbxPrenom">Prénom : </label><input type="text" name="prenom" value="Maximilien" id="txtbxPrenom" /><br />
	<label for="txtbxAge">Age : </label><input type="text" name="age" id="txtbxAge" />
 
	<input id="btnCustomReset" type="button" value="Réinitialiser" />
</form>
 
 
<script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
                
                var vChampsAReinitialiser = $('#txtbxNom, #txtbxPrenom');
                
                $('#btnCustomReset').click(function() {
                        
                        vChampsAReinitialiser .each(function() {
                                $(this).val($(this)[0].defaultValue);
                        });
 
                });
        }
</script>

Merci bien :)

Pour les intéressés, j'ai utilisé defaultValue, defaultSelected et defaultChecked pour faire une fonction qui selon un objet jQuery contenant des champs de formulaire, va remettre à la valeur par défaut.

Etant presque aussi nouveau en JS qu'en JQuery, elle peut comporter des erreurs de logique, mais bon. Elle gère les champs input (text, radio, et checkbox), ainsi que les select multiples ou non.

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
 
function defaultValues(pControls) {
	pControls.each(function() {
		var vControl = $(this)[0];
 
		switch(vControl.nodeName) {
			case 'SELECT':
				$(this).find('option').each(function(){
					if($(this)[0].defaultSelected)
						$(this).attr('selected', 'selected');
					else
						$(this).removeAttr('selected');
				});
				break;
			case 'INPUT':
				switch($(this).attr('type')) {
					case 'text':
						$(this).val($(this)[0].defaultValue);
						break;
					case 'checkbox':
					case 'radio':
						if(vControl.defaultChecked)
							$(this).attr('checked', 'checked');
						else
							$(this).removeAttr('checked');
						break;
					default:
						break;
				}
			case 'TEXTAREA':
				$(this).val($(this)[0].defaultValue);
				break;
			default:
				break;
		}
	});
}