Formulaire : total mis à jour automatiquement ?

Version imprimable

24/07/2007, 14h55
Corinne

Formulaire : total mis à jour automatiquement ?

Bonjour,

Tout d'abord merci à tous ceux qui ont participé à la FAQ qui m'a été d'une énorme aide pour en arriver jusqu'ici (un petit pas pour vous, un grand pour moi ;).

J'essaie de dresser une liste de prix dans laquelle l'utilisateur peut ajouter la quantité d'objets désirés, le total se mettant automatiquement à jour, sans besoin de rafraîchissement.

Cette partie là fonctionne, mais pas tout à fait ! En effet, le total final (somme de tous les prix) ne se modifie que si l'on actualise la page. Et si l'on tente de modifier une quantité déjà entrée par la suite, le total ne change pas, sauf de nouveau, si on actualise la page.

Voilà l'exemple

Existe-t-il une méthode pour que ça se fasse sans rafraîchissement ? Est-ce que je dois me mettre à AJAX ou bien ce n'est pas nécessaire ? Toute piste sera la bienvenue.

Merci d'avance pour votre aide !

Bonjour,
ton JS inséré tel quel dans le body ne s'éxécute effectivement qu'au chargement.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <head> <script type="text/javascript" language="javascript"> function CalculTout() { variable1 = document.getElementById('biscuits_prix').value; variable2 = document.getElementById('pommes_prix').value; variable3 = document.getElementById('bananes_prix').value; total = parseInt(variable1,10)+ parseInt(variable2,10)+ parseInt(variable3,10); document.getElementById('le_total').innerHTML = total; } </script> </head> <body> ..... <td><strong>total</strong></td> <td></td> <td id="le_total"> </td> <td></td>
Tu peux appeler CalculTout() à la fin de chaque onkeyup (profites-en pour enlever le "Javascript:" qu'il ne faut pas mettre dans le code des évènements)

A+

24/07/2007, 15h57
Corinne
Bonjour E.Bzz et grand merci, ça fonctionne parfaitement !

Il me reste quelques inquiétudes concernant ce formulaire. S'il faut que j'ouvre un nouveau sujet, que l'on n'hésite pas à me le dire.

1. Si je n'ajoute qu'un des prix (une des variables) le total me donne "NaN", or je voudrais qu'il considère un champ vide comme 0, est-ce possible ?

2. Au chargement de la page, il devrait y avoir 0 dans le total, j'ai essayé de créer une fonction supplémentaire (cf. source) lancée par un onload sur le <body> de la page, mais il reste un blanc : je n'ai aucune idée de ce qu'il se passe. Considère-t-il seulement cette fonction ?
Code:

1 2 3 4 5 function avant() { total = "0"; } <body onload="avant();">
Encore merci !

Citation:

Envoyé par Corinne

1. Si je n'ajoute qu'un des prix (une des variables) le total me donne "NaN", or je voudrais qu'il considère un champ vide comme 0, est-ce possible ?

2. Au chargement de la page, il devrait y avoir 0 dans le total
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <head> <script type="text/javascript" language="javascript"> function CalculTout() { variable1 = document.getElementById('biscuits_prix').value; variable2 = document.getElementById('pommes_prix').value; variable3 = document.getElementById('bananes_prix').value; total = parseInt(variable1,10)+ parseInt(variable2,10)+ parseInt(variable3,10); document.getElementById('le_total').innerHTML = (isNaN(total))?"0":total; } </script> </head> <body> ..... <td><strong>total</strong></td> <td></td> <td id="le_total">0 </td> <td></td>
Comme ça ?

A+

24/07/2007, 16h25
Corinne

Code:

(isNaN(total))?"0":total

Ce truc là est un mystère très obscur pour moi !
Cela dit il marche pour le point 2 !

Pour le point 1 j'ai suivi l'exemple aussi et l'ai appliqué à mes champs en ajoutant un value=0 initial.

Encore mille mercis !
24/07/2007, 17h12
E.Bzz

Citation:

Envoyé par Corinne

Code:

(isNaN(total))?"0":total

Ce truc là est un mystère très obscur pour moi !
Cela dit il marche pour le point 2 !

Non : le point 2), c'est le "0" en dur ajouté dans le code html ;)

Sinon : isNaN() = Is Not A Number ?

=>
Total n'est pas un nb ?
=> si true => "0"
=> si false (total est un nb) => affiche le total

Code:

(condition if)?si true:si false;

A+
25/07/2007, 10h53
Corinne

Désolée, j'ai inversé les points je crois :P
Merci pour les explications, c'est déjà beaucoup plus clair ;)
25/07/2007, 11h06
Corinne

Et une petite dernière question (normalement !) pour la route.

J'essaie de mettre les résultats du onkeypress (le coût des objets) en texte, hors d'un champ, tout comme le total. Mais si je mets juste :

Code:

<td id="biscuits"> (source modifiée depuis hier)

Rien ne se passe. Une idée d'où se trouve l'erreur s'il vous plaît ? Merci !
25/07/2007, 11h19
E.Bzz

Citation:

Envoyé par Corinne

Rien ne se passe.

Si : tu as ajouté une colonne ;)
... sauf si tu as oublié le </td>

Ajoute dans CalculTout() :

Code:

document.getElementById('biscuits').innerHTML = variable1;

A+
25/07/2007, 11h36
Corinne

Citation:

Envoyé par E.Bzz

Si : tu as ajouté une colonne ;)
... sauf si tu as oublié le </td>

Oui, bon :lol:

Essayé ta dernière solution, mais pas pu :/ On dirait qu'il ne se passe rien :(
25/07/2007, 11h44
E.Bzz

Citation:

Envoyé par Corinne

On dirait qu'il ne se passe rien :(

Ben oui, mais tu as aussi enlevé l'input "biscuits" alors qu'il est toujours utilisé dans ta fonction ...

Sinon, pour y accéder, la syntaxe correcte est :

Code:

document.getElementById('biscuits').value // ou .innerHTML si c'est le td

document.getElementById() pour tout accès via l'ID. Les "raccourcis" de syntaxe sont souvent obsolètes ...

A+

Ouille :aie: !

Bon alors pour supprimer l'input (si j'ai bien compris) :
Code:

1 2 3 4 5 6 7 8 function calcule() { biscuits_prix = document.getElementById('biscuits').innerHTML; } et dans mon HTML : <td><input type="text" onkeyup="biscuits.innerHTML=(1*this.value); calcule();" /></td> <td id="biscuits">0</td>
(seulement ça marche pas :mrgreen:, je me sens toute nulle !)

25/07/2007, 12h04
E.Bzz

Citation:

Envoyé par E.Bzz

document.getElementById() pour tout accès via l'ID. Les "raccourcis" de syntaxe sont souvent obsolètes ...

Code:

onkeyup="document.getElementById('biscuits').innerHTML=(1*this.value); calcule();"

??
25/07/2007, 13h12
Corinne

Code:

onkeyup="document.getElementById('biscuits').innerHTML=(1*this.value); calcule();"

OK, je vois maintenant où j'avais (involontairement) fort bien raccourci :)

Je ne sais pas si j'ai bien tout intégré ou pas, je vais encore plancher là-dessus un moment j'imagine :D Encore merci !
25/07/2007, 13h50
E.Bzz

Citation:

Envoyé par Corinne

Je ne sais pas si j'ai bien tout intégré ou pas, je vais encore plancher là-dessus un moment j'imagine :D Encore merci !

De rien, et bon courage :D

A+