Attention au reset

Par ce billet, je vais vous faire partager une petite expérience et peut être vous apprendre un truc en tout cas vous pourrez y faire gaffe à l’avenir.

Si vous avez un jour besoin dans un site/appli web de faire un bouton permettant de réinitialiser les champs d’un formulaire, attention à bien distinguer réinitialisation au sens « on remet tous les champs à zéro (vide) » et réinitialisation au sens « on remet tous les champs à leur valeurs par défaut ».

Si vous êtes dans le deuxième cas alors votre input sera très simple car le HTML prévoit déjà une valeur « reset » pour la propriété « type » d’un input :

<input type=‘reset’ title=‘Réinitialiser’ value=‘Réinitialiser’/>

En revanche si vous êtes dans le premier cas, on peut penser qu’un bouton reset peut le faire ou alors qu’il suffit de l’aider avec une petite fonction JavaScript sur le « onClick » mais non. Si la fonction JavaScript est effectivement nécessaire il ne faut surtout pas mettre l’input en type « reset », mais en type « button » tout simplement.

Pourquoi ? Et bien si votre fonction JavaScript aura le mérite de faire le traitement demandé, à savoir vider vos champs et les remettre à zéro, une fois qu’elle aura fini de s’exécuter, la fonction HTML liée à un input de type « reset » va reprendre le dessus. Et comme je vous l’ai dit cela affichera les valeurs indiquées dans la propriété « value » de vos input de type « text » car celles-ci sont considérés comme les valeurs par défaut lorsqu’elles sont renseignées. Et dans certains cas cela est ennuyeux au point de vous retrouvez avec un bouton qui ne fait, au final, pas ce qu’il est censé faire.

Voici le code à mettre en place (ici copié-collé de mon code, mais à personnaliser en fonction de la structure de votre code):

Le boutton :

button" id="reset" value=" " onclick="reinitForm('< ?php echo $p;?>')"/>

La fonction javascript :

function reinitForm(page)
{
	var formID;
	var i;
	
	switch(page)
	{
		case 'l' : formID = new Array("titre", "application", "version", "description", "societe", "url", "numero", "clef", "date_achat", "nom", "mail", "notes");
			break;
		case 's' : formID = new Array("titre", "utilisateur", "password", "url", "description");
			break;
		case 'cb' : formID = new Array("titre", "titulaire", "numero", "date_expiration", "type_cb");
			break;
		case 'cp': formID = new Array("titre", "banque_name", "numero", "type_compte");
			break;
	}

	for(i = 0; i < formID.length; i++)
	{
		document.getElementById(formID[i]).value = '';
	}

	setFocus('titre');
}

 

En savoir plus sur Thibault Le Cornec

Abonnez-vous pour poursuivre la lecture et avoir accès à l’ensemble des archives.

Continue reading