Onchange sur CALCULETTE

**lordlifen** · 18/09/2009, 16h12

Bonsoir,

J'ai un serieux probleme avec cette calculette, alors les gars au secour

Voici mon code

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$count=0;
condition while {
$count++;
<!-- script calcul-->
<script language="javascript">
function calculTotal(){
document.calculette.elements['total<?php echo $count;?>'].value = document.calculette.elements['prix<?php echo $count;?>'].value * document.calculette.elements['quantite<?php echo $count;?>'].value;
}
</script>
<form name="calculette">
<input type="texte" name="prix<?php echo $count;?>" onkeyup="calculTotal()">
<input type="texte" name="quantite<?php echo $count;?>" onkeyup="calculTotal()">
<input type="texte" name="total<?php echo $count;?>">
</form>
}

**Bovino** · 18/09/2009, 16h20

Tu définis une fonction calculTotal() à chaque itération

A la fin, lorsque tu l'appelles sur le onkeyup, laquelle va être lancée d'après toi...

**lordlifen** · 18/09/2009, 16h25

Envoyé par Bovino

Tu définis une fonction calculTotal() à chaque itération

A la fin, lorsque tu l'appelles sur le onkeyup, laquelle va être lancée d'après toi...

Je ne suis pas informaticien alors si vous pouvez bien m'aider se serait top merci d'avance de me corriger le code

**PapyWeb** · 21/09/2009, 12h22

Bonjour lordlifen,

Tu nous fais un programme en PHP. Pourquoi pas ? N'y a-t-il pas un Forum PHP ?
Tu mélanges sans rime ni raison du JavaSript qui complique tout sans rien arranger.

1) Des principes généraux de programmation
a) fonctions
On ne définit jamais de fonctions dans une boucle quel que soit le langage.
Voir le post de Bovino.
Exemple en pseudo-code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
definition fonction mafonction(var1,var2,var3,....){
	.....
	calcul sur var1,var2,var3,..
	.....
	return resultat
}
 
TantQue condition Faire
	.....
	resultat=mafonction(a,b,c,...)
	.....
FinTantQue

b) formulaires HTML

Code :

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

1
2
3
4
5
<form name="calculette">
<input type="texte" name="prix<?php echo $count;?>" onkeyup="calculTotal()">
<input type="texte" name="quantite<?php echo $count;?>" onkeyup="calculTotal()">
<input type="texte" name="total<?php echo $count;?>">
</form>

Non et non.
L'événement onkeyup est appelé quand après avoir appuyé sur une touche, on relâche la touche.
Si tu tapes 123, tu auras 3 appels calculTotal(1) puis calculTotal(12) et enfin calculTotal(123).
Ce n'est pas ce que tu veux.
Dans le titre du post, tu mentionnes l'événement onChange. Celui-là est spécialisé dans les listes déroulantes (les balises <SELECT>).

La syntaxe correcte est :

Code :

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

1
2
3
<input type="text" name="prix">15.24</input>
ou mieux
<input type="text" name="prix" value="15.24" />

name ou id, sont à peu près synonymes et a priori des constantes.
<input type="text" name="prix" value=<?php echo $count;?>" onkeyup="calculTotal()"> marcherait mieux.

Manque un bouton <input type="submit"> qui permet d'envoyer le formulaire.
Envoyer le formulaire ? Mais où ? C'est action="pagesuiv.php" qui le dit.
Comment ? C'est method="GET" ou method="POST" qui renseigne.

En phase de test, je suggère :
<form method="GET" action="pagesuiv.php">
L'appui sur le bouton sumit appelle l'url : pagesuiv.php?prix=15.24&quantite=12

Ton formulaire marche.

Dans pagesuiv.php, tu récupères les variables par:

Code :

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

1
2
3
4
5
<php
	$x=$_GET['prix'];
	$y=$_GET['quantite'];
	$total=$x*$y;
	.....

2) Soluce en Javascript

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
<html>
<script type="text/javascript" language="javascript">
function calculeTotal(){
  var x=document.getElementById('prix').value;// document.getElementsByName('prix')[0].getAttribute("value");
  var y=document.getElementById('quantite').value;
  return x*y
}
</script>
</head>
<body>
<form >
<input type="text" id="prix" name="prix" value="15.24" />
<input type="text" id="quantite" value="10" />
<input type="text" id="total" value="" />
<input type="button" onclick="javascript:document.getElementById('total').value=calculeTotal()" value="Calculer" />
</form>

Ici, le formulaire est bidon (pas de submit), on traite par javascript, sans recharger la page.
On n'a droit qu'à un seul "id" par page, on le retrouve par getElementById.
Les "name" peuvent être multiples, on les retrouve par getElementsByName, qui est un tableau, beaucoup plus lourd à manier. J'indique en commentaire comment le traiter. Pourquoi "[0]" ? C'est le premier élément du tableau.
Cerise sur le gâteau, "getElementsByName" (qui devrait disparaître d'ailleurs) n'a pas un comportement standard avec IE.

J'espère avoir aider, en regrettant la longueur excessive de ce post.
A+

**lordlifen** · 21/09/2009, 13h36

Mille merci big up à PapyWeb je suis trop content man ça marche du tonnerre de zeus xD. Mille merci encore

Onchange sur CALCULETTE

JavaScript

Discussions similaires

Partager

Partager