Discussion :

[Oragon Efreet]

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

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

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

[Bovino]

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
jQuery n'est jamais QUE du JavaScript.

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

[Oragon Efreet]

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

[Oragon Efreet]

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

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
 
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;
		}
	});
}