calculer des totaux dans un formulaire

Principe général

Dans un formulaire, nous avons plusieurs zones que nous voulons totaliser dans un champ récapitulatif. Le calcul s'effectuera donc selon la formule suivante :

total = total - ancienne_valeur + nouvelle_valeur

Préparation du formulaire

Le champ de totalisation est nommé (balise id), et est non modifiable (non obligatoire) :

<input id="nombre" readonly value="{$data.nombre}">

Ici, les valeurs sont indiquées à partir de champs Smarty.

Chaque champ <input> utilisé pour le calcul va recevoir un nom de classe unique :

<input class="num5 nombre" value="{$data.individu_nombre_total}">

<input class="num5 nombre" value="{$data.labo_nombre}">

La classe num5 sert à l'affichage et à déterminer le pattern.

Code Jquery

En début de document, nous insérons maintenant le code JQuery suivant. D'abord, on force un pattern (ici, on autorise des nombres décimaux) :

<script>

$(document).ready(function() {

    $(".num5").attr ( {

        pattern:"[0-9]+(\.[0-9]+)?",

        title: "Donnée numérique"

        } ) ;

Ensuite, nous stockons l'ancienne valeur dès qu'un champ récupère le focus :

    $(".nombre").focus(function () {

        //store old value

        $(this).data('oldValue',$(this).val());

    } );

Enfin, à chaque changement de valeur, nous lançons le calcul. Le plus compliqué est de gérer les types de données !

$(".nombre").change( function () {

        var oldValue = $(this).data('oldValue');

        if (isNaN(oldValue)) oldValue = 0 ;

        if (oldValue == "") oldValue = 0;

        var newValue = $(this).val();

        if (isNaN(newValue)) newValue = 0;

        if (newValue == "") newValue = 0 ;

        var nomChamp = "#nombre";

        var total = $(nomChamp).val();

        if (isNaN(total)) total = 0;

        if (total == "") total = 0;

        total = parseInt(total) - parseInt(oldValue) + parseInt(newValue) ;

        $(nomChamp).val(total);

    } );

la fonction parseInt peut être remplacée par parseFloat si vous souhaitez manipuler des chiffres décimaux.

N'oubliez pas de "fermer" votre code JQuery :

} ) ;

</script>