Javascript

Action lors de la modification d’un champ : change(function)

Publié dans Javascript | Marqué avec , ,
Share

En ce moment, je fais quelques tests avec jQuery histoire d’améliorer un petit peu mon niveau dans ce framework avec lequel j’ai déjà bidouillé quelques fois. Aujourd’hui, j’ai simplement cherché à effectuer une action lorsqu’un utilisateur modifie la valeur d’un champ : Démo modification d’un champ. Pour cela, il suffit d’utiliser la méthode change(function) de jQuery sur le champ en question. Voyons un exemple. D’abord le code HTML :

<form action="" method="post">
<fieldset>
	<legend>Élévation au carré</legend>
	<label for="nbElement">Nombre à élever au carré :</label>
	<input type="text" name="nbElement" id="nbElement" size="4" value="12"  />
	<br />
	<span id="max"></span>
</fieldset>
</form>


Et le code Javascript :

$(document).ready(function() {
	// --- Au chargement de la page, calcul avec la valeur par défaut
	// On récupère la valeur du champ, au passage on enlève les espaces éventuels avant et après
	bElement = $('#nbElement').val().trim();
	// Si c'est un nombre
	if (!isNaN(nbElement)) {
		// On affiche le résultat dans la balise ayant l'id "max"
		$('#max').html(nbElement*nbElement+'='+nbElement+'x'+nbElement);
	}
	
	// --- Lorsqu'un utilisateur change la valeur du champ
	$('#nbElement').change(function() {
		nbElement = $('#nbElement').val().trim();
		if (!isNaN(nbElement))
			$('#max').html(nbElement*nbElement+'='+nbElement+'x'+nbElement);
	});
});

Tester ce code
J’ai mis longtemps à chercher une manière de tester si la valeur récupéré était un nombre en jQuery, mais visiblement, il faut utiliser la fonction native de Javascript.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*