Calcul automatique javascript et boucle while
angejudicael
Messages postés
28
Statut
Membre
-
tbopsia Messages postés 28 Statut Membre -
tbopsia Messages postés 28 Statut Membre -
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>
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>
A voir également:
- Javascript formulaire calcul automatique
- Whatsapp formulaire opposition - Guide
- Réponse automatique thunderbird - Guide
- Logiciel de sauvegarde automatique gratuit - Guide
- Formulaire de réclamation facebook compte désactivé - Guide
- Recherche automatique des chaînes ne fonctionne pas - Guide
3 réponses
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 : 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
Bonjour,
Vous pouvez poster la structure de la table produits avec 2 ou 3 articles (utilisez phpmyadmin)
Merci
Vous pouvez poster la structure de la table produits avec 2 ou 3 articles (utilisez phpmyadmin)
Merci
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 ?
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 ?
Coucou ! En fait j'ai fait une inclusion de ma page de connexion à MySql depuis les premières lignes et j'arrive correctement à afficher les données. Mon problème se situe au niveau du calcul automatique sans rafraichissement de la page. Je souhaiterais qu'après avoir sélectionné une quantité automatiquement le calcul s'affiche sur la même ligne.
J'espère que vous me comprendrez!
J'espère que vous me comprendrez!