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.
