[jquery] calcul de montant

Bonjour,

J'ai une série de formulaires avec chacun un même contenu:

<form action="" method="post" id="formPanier_65" class="edition-panier">
<ul>
<li>
<label> Quantité
<input name="qt" id="qt" class="qt" value="3.000" type="text">
</label>
</li>
<li>
...
<li>
<label> Montant
<input name="prix" id="prix" value="0.20" type="hidden">
<span class="montant"></span></label>
</li>
...
</form>

Pour et dans chaque <span class="montant">, je voudrais afficher le produit des valeurs des champs 'qt' et 'prix'

<script type="text/javascript">
$('form').each(function() {
var qt = $(this).find("input[name='qt']").val();
var prix = $(this).find("input[name='prix']").val();
var cout = qt * prix;
$(this).find('span.montant').append(cout+' €');
});
</script>

Je n'ai pas d'erreur de script mais je n'ai rien qui s'affiche non plus. Pourquoi ?
merci,

salut..

très simple....

Je te laisse réfléchir... depuis quand reconnait on une class dans un appel JS ???

span.montant ne peut être trouvé....

Bonjour,

pchlj, tu es conscient qu'il utilise la librairie JQuery qui permet d'utiliser des sélecteurs semblables?

Bonjour albius,

Un exemple en ligne serait très pratique pour t'aider plus facilement.

Tu peux utiliser un débogueur (Firebug par exemple) pour vérifier que ton code est correctement exécuté. Le débogueur du pauvre (ajout d'"alert" dans le code) peut également être parfois pratique.

Ton script est-il bien placé après le formulaire ?

Hello.

A vue de nez, je dirais que cette ligne

$(this).find('span.montant').append(cout+' €');

est à modifier en appelant text() à la place de append().

Append sert à insérer des éléments dans le DOM. Ici "cout+' €'" est une chaine, ça ne peux pas marcher.

Florian_R a écrit :
Append sert à insérer des éléments dans le DOM. Ici &quot;cout+' €'&quot; est une chaine, ça ne peux pas marcher.

Je suis d'accord sur le fait qu'il faut utiliser text dans ce cas, mais ce n'est pas la source du problème : append accepte des chaînes de caractères.

Arf, en effet. J'étais resté sur la doc qui spécifie content comme HTML string .

@tony... oui je suis conscient que c'est du jQuery... pour autant je n'ai pas connaissance de la possibilité de retrouver ceci :

<span class="montant">

de cette manière

$(this).find('span.montant')

moi j'aurai fait plutot

<span id="montant">

$(this).find('#montant')

ou un truc de ce genre je suis pas encore au top en jQuery...

C'est pourtant un sélecteur CSS classique.

Et pour sélectionner un élément depuis son ID (qui doit être unique dans la page) ton code est uber compliqué pour rien, il suffit de faire :

$('#montant')
Modifié par jb_gfx (07 Dec 2011 - 18:33)

Salut,

Je ne vois pas trop l'intérêt d'utiliser Jcuicui pour ce type de problématique... En JS natif, c'est très simple tout en restant non-intrusif, non obstructif et en gardant le même nombre de lignes (write less do more)...

Utilisation d'un tank pour choper un papillon...

window.onload = function(){
  //etc.
}

Modifié par niuxe (07 Dec 2011 - 21:28)

niuxe a écrit :
Utilisation d'un tank pour choper un papillon...

On peut voir le code JS "pur" équivalent (et qui fonctionne avec tous les navigateurs modernes) ?

P.S. : window.onload c'est bien gentil tant qu'il n'y a pas d'autre script qui l'utilise.

C'est chipoté. C'est tout à fait possible de le faire sans Jcuicui et que ça passe sur tous les browsers moderne.

C'est du basique :
- récupération des valeurs
- calcul entres elles
- afficher le résultat dans un noeud

Comment faisait on avant jCuicui et proprement ?

Après, c'est le résultat qui compte. La manière vient ensuite. Mais bon, aller faire ses courses avec une Ferrari, je ne pense pas que ce soit l'outil adéquate...

a écrit :

P.S. : window.onload c'est bien gentil tant qu'il n'y a pas d'autre script qui l'utilise.

Au passage, ton argument ne tient pas (sauf erreur de ma part sur un point que je n'aurais pas pensé) :

    function un(a){
        alert(a);
    }
    function deux(a,b){
        return b + a;
    }
    function trois(a,b,c){
        var d = deux(a,b);
        alert(c * d);
    }
    window.onload = function(){
        var a = 1;
        var b = 2;
        var c = 3;
        un(a);
        alert(deux(a,b));
        trois(a,b,c);
    }

Modifié par niuxe (08 Dec 2011 - 00:21)

Bonsoir niuxe,

En effet, juste pour faire cette partie, l'utilisation de JQuery ne se justifie pas, mais s'il utilise déjà la librairie JQuery et des plugins ailleurs dans cette page ou dans le site, aussi bien en profiter pour se faciliter la vie et l'utiliser jusqu'au bout.

Je suis tout à fait d'accord avec toi Tony. Après réflexion, j'ai pensé à cela.

Pour Aider albius dans son erreur de compréhension de append, je pense que ces liens devraient l'aider. La différence entres :
append,
appendTo,
html,
text,
val

niuxe a écrit :
C'est chipoté. C'est tout à fait possible de le faire sans Jcuicui et que ça passe sur tous les browsers moderne.

Ne serait-ce que pour les sélecteurs, c'est faux. Je connais bien JavaScript et son support sur les navigateurs, et je t'invite à trouver une implantation simple, juste et qui fonctionne sur tous les navigateurs modernes (pour info, jQuery supporte IE6) de getElementsByClass. Ne serait-ce que pour cela, je suis curieux de voir comment tu peux respecter ton contrat de "garder le même nombre de lignes". De plus, contrairement aux fonctions bricolées à la main ou copiées sur le Web, jQuery est mis à jour très régulièrement.

niuxe a écrit :
Au passage, ton argument ne tient pas (sauf erreur de ma part sur un point que je n'aurais pas pensé) :

    function un(a){
        alert(a);
    }
    function deux(a,b){
        return b + a;
    }
    function trois(a,b,c){
        var d = deux(a,b);
        alert(c * d);
    }
    window.onload = function(){
        var a = 1;
        var b = 2;
        var c = 3;
        un(a);
        alert(deux(a,b));
        trois(a,b,c);
    }

C'est un sujet bateau, mais il est légèrement réducteur de considérer que l'utilisateur centralise tous les traitements qui doivent être exécutés au chargement de la page. Sans parler du fait que l'événement "ready" de jQuery a un comportement subtilement différent de "load", qu'un attribut "onload" dans le HTML va détruire ton bel exemple... Et je ne crois pas que ce soit du "chipotage" si l'on en juge par le nombre de questions posées sur le forum à ce sujet avant l'avènement de l'ère jQuery.

En ce qui me concerne, je n'utilise pas systématiquement jQuery, mais je pense que dans la majorité des cas c'est indispensable en attendant l'harmonisation d'une API de suffisamment haut niveau dans les navigateurs (compter quelques années).

Julien j'ai beau être d'accord avec toi, ton avatar me met mal à l'aise depuis des années. Tant et si bien que j'ai du mal à assimiler tes réponses.

jb_gfx a écrit :
Julien j'ai beau être d'accord avec toi, ton avatar me met mal à l'aise depuis des années. Tant et si bien que j'ai du mal à assimiler tes réponses.

Je comprends, mais ton psychiatre ne serait-il pas mieux à même d'en discuter ?

Julien Royer a écrit :

Je comprends, mais ton psychiatre ne serait-il pas mieux à même d'en discuter ?

J'évite de parler d'Alsacreations en général et de ton avatar en particulier avec mon psy... franchement j'ai d'autres préoccupations : est ce qu'elle m'aime autant que je l'aime, pourquoi les standards, pourquoi Florent, pourquoi vivre, pourquoi Artemus24...
Modifié par jb_gfx (08 Dec 2011 - 02:16)

jb_gfx a écrit :
J'évite de parler d'Alsacreations en général et de ton avatar en particulier avec mon psy... franchement j'ai d'autres préoccupations : est ce qu'elle m'aime autant que je l'aime, pourquoi les standards, pourquoi Florent, pourquoi vivre, pourquoi Artemus24...

Désolé, albius.

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,