Calcul automatique javascript et boucle while

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>