Calcul automatique javascript et boucle while [Fermé]

Signaler
Messages postés
24
Date d'inscription
mardi 15 avril 2008
Statut
Membre
Dernière intervention
19 juin 2013
-
tbopsia
Messages postés
23
Date d'inscription
lundi 17 juin 2013
Statut
Membre
Dernière intervention
20 juin 2013
-
Bonjour à tous.

Je suis stagiaire et l'on m'a demandé de mettre en place un petit système de commande en ligne. Le principe est qu'après sélection de l'article, un tableau reçoit les différents éléments. Dans ce tableau , il y a une zone de sélection pour le choix de la quantité.
Je souhaiterais qu'un calcul automatique affiche la quantité total à chaque fois que l'on sélectionne une quantité. Toutes mes tentatives restent vaines. J'ai vraiment vraiment besoin d'aide.



[B]JAVASCRIPT[/B]

<script language="text/javascript">
function cal(nbligne)
{
var genre = document.getElementById("genre"+nbligne).options[document.getElementById("genre"+nbligne).selectedIndex].value;

var prix = document.getElementById("prix"+nbligne).value;
document.getElementById("resultat"+nbligne).value = prix * genre;
}
</script>


[B]CODE PHP[/B]

<table style="border: 1px solid rgb(204, 204, 204); background-color: rgb(255, 255, 255); padding:7px; font-size:12px;" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="900">
<tbody>

<tr>
<td height="40" align="center" valign="middle" colspan="5">COMMANDE DU JOUR</td>
</tr>

<tr>
<td width="311" height="30" align="center" valign="middle"> </td>

<td width="248" height="30" align="left" valign="middle"><strong>Prix unitaire</strong></td>

<td width="150" height="30" align="left" valign="middle"><strong>Quantité</strong></td>
<td width="189" height="30" align="left" valign="middle"><strong> </strong></td>
<td width="189" height="30" align="left" valign="middle"><strong> </strong></td>
</tr>

<?php
$total = $count = '0';
$z = '1';
$u = '1';
while($grid = mysql_fetch_array($requete1))
{
$color = ++$z % 2 ? '#FFFFFF':'#EEEEEE';
$req11 = mysql_query("SELECT * FROM produits WHERE idproduits = '".$grid['idproduits']."'");
$data = mysql_fetch_array($req11);
?>

<tr bgcolor="<?php echo $color; ?>">
<td width="311" height="30" align="left" valign="middle" style="padding-left:30px;">
<img src="<?php echo $data['images'] ?>" height="45px" width="60px" border="0" style="border:#CCC solid 1px; margin:5px; padding:7px; float:left; background-color:#FFFFFF;" />
<div style="font-size:11px; padding-bottom:1px; padding-left:7px; padding-top:5px;"><?php echo ucfirst($data['code']); ?></div>
<div style="font-size:11px; padding-bottom:1px; padding-left:7px; padding-top:5px;"><?php echo ucfirst($data['libelle']); ?></div>
</td>

<td width="248" height="30" align="left" valign="middle"><?php echo $data['prix'].' '.'FCfa'; ?></td>
<input name="prix<?php echo $u; ?>" type="hidden" value="<?php echo $data['prix']; ?>" id="prix<?php echo $u; ?>" onChange="calcul(<?php echo $u; ?>)">
<td width="150" height="30" align="left" valign="middle">
<select name="genre<?php echo $u; ?>" id="genre<?php echo $u; ?>" onChange="calcul(<?php echo $u; ?>)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
<td height="30" align="left" valign="middle">
<input id="resultat<?php echo $u; ?>" value="" type="text" readonly /> FCfa
</td>
<td height="30" valign="middle" style="padding-left:15px;"><a href="?menu=fiche&action=sup&id=<?php echo $grid['idcommande']; ?>" onClick="return(confirm('Etes vous sur(e) de vouloir supprimer ?'));"><img src="img/cross-16.png" border="0" title="Supprimer cette ligne"></a></td>
</tr>
<?php
$z = $z++;
$u = $u+1;
}
?>

</table>

3 réponses

Messages postés
23
Date d'inscription
lundi 17 juin 2013
Statut
Membre
Dernière intervention
20 juin 2013
4
Hello

1 : Modifier la fonction Calcul comme ci-dessous

function calcul(nbligne)
{
var genre = document.getElementById("genre"+nbligne).options[document.getElementById("genre"+nbligne).selectedIndex].value;
var prix = document.getElementById("prix"+nbligne).value;
document.getElementById("resultat"+nbligne).value = prix * genre;

var total=0;
for (i = 1; i < 4; i++)
{
if (document.getElementById("resultat"+i).value != "") {
total = total + parseFloat(document.getElementById("resultat"+i).value);
}
}
document.getElementById("total").innerHTML = total + ' FCfa';
}

2 : Ajouter en bas du tableau. Important le div id="total"

<tr bgcolor="<?php echo $color; ?>">
<td> </td>
<td> </td>
<td>TOTAL</td>
<td><div id="total">0 FCfa</div></td>
</tr>

ATTENTION j'ai fait une boucle de 1 à 4 lignes. A toi d'envoyer à la fonction ne nombre de lignes total

C'est juste un début, a toi d'adapter
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 87676 internautes nous ont dit merci ce mois-ci

Messages postés
23
Date d'inscription
lundi 17 juin 2013
Statut
Membre
Dernière intervention
20 juin 2013
4
Bonjour,
Vous pouvez poster la structure de la table produits avec 2 ou 3 articles (utilisez phpmyadmin)

Merci
Messages postés
23
Date d'inscription
lundi 17 juin 2013
Statut
Membre
Dernière intervention
20 juin 2013
4
Je ne comprend pas cette ligne

while($grid = mysql_fetch_array($requete1))

que contient $requete1 ?

ou se trouve votre mysql_connect et votre mysql_select_db pour vous connecter avec base de données ?
tbopsia
Messages postés
23
Date d'inscription
lundi 17 juin 2013
Statut
Membre
Dernière intervention
20 juin 2013
4
Votre page, c'est un peu n'importe quoi mais bon.
remplacez
<script language="text/javascript">
par
<script type="text/javascript">
angejudicael
Messages postés
24
Date d'inscription
mardi 15 avril 2008
Statut
Membre
Dernière intervention
19 juin 2013
2
lol. J'essaie pourtant d'allier rapidité et application. bref ... je ferai de mon mieux!
J'ai modifié mais ne fonctionne toujours pas. Je ne comprend pas pourquoi il n'arrive pas à prendre en compte mon document.getElementById("resultat"+nbligne).value
tbopsia
Messages postés
23
Date d'inscription
lundi 17 juin 2013
Statut
Membre
Dernière intervention
20 juin 2013
4
avec quel navigateur fonctionnez-vous ? Internet Explorer, Firefox, Chrome ?
Par ce que ça fonctionne sous Firefox
angejudicael
Messages postés
24
Date d'inscription
mardi 15 avril 2008
Statut
Membre
Dernière intervention
19 juin 2013
2
Coucou mon pb est résolu après que j'ai correctement écrit la syntaxe de déclaration de mon script javascript :).
Cependant, je souhaiterais faire une somme automatique des éléments. Pourrais-tu m'aider ? Toutes mes tentatives n'aboutissent pas.
karirovax
Messages postés
3225
Date d'inscription
dimanche 17 janvier 2010
Statut
Membre
Dernière intervention
22 juin 2016
171
salut

merci de marquer cette astuce comme résolu :)