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.