[jquery] calcul de montant

(reprise du message précédent)

Merci. Je reprends la main.
Une démo épurée est en ligne
Deux choses essentielles :
- Afficher le coût pour chaque ligne
- Si l'utilisateur modifie la quantité, répercuter cette modification sur le coût
- Une 3ème (optionnelle), afficher un total de ces coûts, y compris avec une modification d'une quantité. Je butte encore sur ce point (code commenté)
Mais pour les deux premiers points, j'ai fini par arriver à mes fins (J'ignore si le code est de qualité, mais c'est fonctionnel)
Une question subsiste toutefois : pourquoi quand je rentre une valeur de 3 en quantité, je me retrouve avec un montant de 0.6000000000000001 €. J'ai observé la même chose pour les nombres 7 et 12 par exemple. Pourquoi ? Comment puis-je limiter le nombre de chiffre après la virgule ?
merci,

Les calculs numériques en JS ne sont pas précis à cause de la représentation des nombres (IEEE 754). Pour limiter les dégâts, tu peux manipuler des centimes dans ton code : le prix comme les unités seraient des entiers et tu pourrais diviser par 100 au moment de l'affichage pour que l'utilisateur ait la valeur en euros.

Dans tous les cas, il faut bien entendu refaire le calcul au niveau du serveur.
Modifié par Julien Royer (08 Dec 2011 - 11:24)

Et si par le biais d'une regex, je coupe deux chiffres après le point ? C'est faisable ?

albius a écrit :
Et si par le biais d'une regex, je coupe deux chiffres après le point ? C'est faisable ?

Oui, jusqu'à ce que tu coupes 1.79999999999999 en 1.79 là où la valeur exacte était 1.80.

J'ai résolu le problème par ce biais :

cout = Math.round(cout*1000)/1000;

Merci,

albius a écrit :
J'ai résolu le problème par ce biais :

cout = Math.round(cout*1000)/1000;

Merci,

Attention cependant, car cette méthode, si elle fonctionne pour une seule opération, peut se révéler catastrophique si tu enchaînes plusieurs opérations mathématiques. En effet, l'erreur de calcul augmente à chaque opération.

Fausse joie...
Cette partie du script ne fonctionne finalement pas:

$('form').live('keyup', function(){
     var idForm = $(this).attr('id');
	 var whatForm = $('#'+idForm);
     var qt = whatForm.find("input[name='qt']").val();
     var prix = whatForm.find("input[name='prix']").val();
     var cout = qt * prix;
	 cout = Math.round(cout*1000)/1000;
     whatForm.find('span.montant').empty().append(cout+' €');
});

J'ai donc commencé à le corriger:

$('form').live('keyup', function(){
     var idForm = $(this).attr('id');
     var whatForm = $("form[id='"+idForm+"']"); // plus propre
     var qt = whatForm.find("input[name='qt']").val();
     var prix = whatForm.find("input[name='prix']").val();
     var cout = qt * prix;
     cout = Math.round(cout*1000)/1000;
//     whatForm.find('span.montant').empty().append(cout+' €');
    alert(whatForm);
});

Et là, je me retrouve à l'affichage avec un double 'object'. Et une propagation de la valeur cout sur l'ensemble des 'span.montant'. Comment se fait-il que la var 'whatForm' ne conserve pas l'id du form ?
Merci,

Salut,

Il faut traiter chaque form (cas par cas) ! A peu près la même méthodologie qu'en JS natif (getElementsByTag)

Là, je vais te faire le script de tête suivant ta piste et corriger les énormités :

	$('form').each(function(i){
            var form = $(this);
            $(this).find(".qt").bind('keyup', function(){
                /**
                 *  1. je ne vois pas l'intérêt de live !! bind suffit amplement
                 *  2. ta page en ligne est invalide !! on ne peut pas avoir X id du même nom !!!
                 *  3. d'abords bien connaître le html/css avant de vouloir faire quelque chose de dynamique !!
                 */
                var inputQt = $(this);
                
                    if(inputQt.val() > form.find('.remaining-qt').val()){
                        var qt = form.find('.remaining-qt').val();
                        inputQt.val(form.find('.remaining-qt').val());
                    }else{
                        var qt = inputQt.val();
                    }
                
                var prix = form.find('.prix').val();
                var cout = Math.round(prix * qt * 1000) / 1000;
                
                form.find('.montant').text(cout+' €'); //à vérifier avec l'entité html et la méthode html
                form.find('.remaining-qt').val(form.find('.remaining-qt').val() - qt);            
            });
	});

Modifié par niuxe (12 Dec 2011 - 21:41)

Merci niuxe. Ca m'a permis de mieux comprendre certaines choses.
Toutefois, la partie de ton script pour le calcul du restant de quantité ne fonctionne pas correctement. La première ligne du tableau est bien rendu, mais ça déconne à partir de la seconde. Dès que je commence à taper une nouvelle quantité, le champs "qt" prend la valeur du champ "remaining-qt", et ce dernier se retrouve avec une valeur à 0...