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 !