Formulaire : total mis à jour automatiquement ?

**Corinne** · 24/07/2007, 14h55

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 !

**E.Bzz** · 24/07/2007, 15h04

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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+

**Corinne** · 24/07/2007, 15h57

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Encore merci !

**E.Bzz** · 24/07/2007, 16h11

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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+

**Corinne** · 24/07/2007, 16h25

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

(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 !

**E.Bzz** · 24/07/2007, 17h12

Envoyé par Corinne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

(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 :

Sélectionner tout - Visualiser dans une fenêtre à part

(condition if)?si true:si false;

A+

**Corinne** · 25/07/2007, 10h53

Désolée, j'ai inversé les points je crois

Merci pour les explications, c'est déjà beaucoup plus clair

**Corinne** · 25/07/2007, 11h06

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 !

**E.Bzz** · 25/07/2007, 11h19

Envoyé par Corinne

Rien ne se passe.

Si : tu as ajouté une colonne

... sauf si tu as oublié le </td>

Ajoute dans CalculTout() :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

A+

**Corinne** · 25/07/2007, 11h36

Envoyé par E.Bzz

Si : tu as ajouté une colonne

... sauf si tu as oublié le </td>

Oui, bon

Essayé ta dernière solution, mais pas pu :/ On dirait qu'il ne se passe rien

**E.Bzz** · 25/07/2007, 11h44

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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+

**Corinne** · 25/07/2007, 11h55

Ouille

!

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

, je me sens toute nulle !)

**E.Bzz** · 25/07/2007, 12h04

Envoyé par E.Bzz

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

??

**Corinne** · 25/07/2007, 13h12

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Encore merci !

**E.Bzz** · 25/07/2007, 13h50

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

Encore merci !

De rien, et bon courage

A+

Formulaire : total mis à jour automatiquement ?

JavaScript

Discussions similaires

Partager

Partager