Javacript, OnBlur et tableau PHP

16 juin 2007, 10:59

Bonjour,

J'ai visiblement un problème de syntaxe, à mon avis au niveau de Javascript, avec une fonction qui doit mettre à jour le total d'une colonne, avec l'utilisation de onBlur="calcul_form(this)". Seule la dernière colonne du tableau est concernée (avec Quantite[]).

Dans mon formulaire (<form name="form1">) le champ qui totalise la colonne est déclarée de la façon suivante :

<INPUT TYPE="text" NAME="total" SIZE=8>

Côté PHP on a :

----------------------------

    
<?php
    
    include ("connect.inc.php");
    include ("connect_mysql.inc.php"); 
    

    //récupération des données de la base
    $req= "SELECT * FROM sapponia";
    $res= mysql_query($req);
    while ($ligne= mysql_fetch_array($res))
    { ?> 
    <tr> 
      <td class="td" width="100"> 
        <input class="input1" type="image" name="Image[]" size="10" img src="<?php echo $ligne['image']; ?>">
      </td>
      <td class="td" width="50"> 
        <input class="input3" type="text" name="Code[]" size="5" value="<?php print $ligne['code']; ?>">
      </td>
      <td class="td" width="150"> 
        <input class="input3" type="text" name="Design[]" size="10" value="<?php print $ligne['design']; ?>">
      </td>
      <td class="td" width="50"> 
        <input class="input3" type="text" name="Prixu[]" size="6" value="<?php print $ligne['prixu']; ?>">
      </td>
      <td class="td" width="100"> 
        <input class="input1" type="text" name="Quantite[]" size="4" onBlur="calcul_form(this)">
      </td>
    </tr>
      <td height="40" colspan="4" valign="middle"></td>
    </tr>
<?php }
 ?>

-----------------------------------

Côté Javascript j'ai trituré dans tous les sens, à partir d'exemple glanés ici où là, j'ai abouti à (pardon à ceux que cela va faire bondir !) :

-------------
var total.value=0;

function calcul_form() {
for (i=1; i<=16; i++)
{
total.value=document.form1.Quantite.value * document.form1.Prixu.value;
}
}
-----------------------

Ca ne marche pas. Il me semble que le problème vient de syntaxe à utiliser pour récupérer les données du tableau créé en PHP. Si le tableau était en HTML, on pourrait avoir (avec des noms de variables différents :

--------------
function calcul_form() {
// le with ci-dessous permet d'abréger "document.forms.form1.p1.value" en "p1.value"
with (document.forms.form1) {
p1.value = q1.value * pu1.value ;
p2.value = q2.value * pu2.value ;
p3.value = q3.value * pu3.value ;
total.value = p1.value *1 + p2.value *1 + p3.value *1 ;
}
}
----------------

Mais comment écrire en Javascript : "récupérer les champs de la ligne i, avec i variant de 1 à 16, pour les variables Quantite et Prixu ?

Merci d'avance pour votre aide !

Cordialement.

Cyrille.

16 juin 2007, 12:20

Utilise des id de champ avec javascript c'est plus simple en plus tu doit numéroter les index des nom de champs mis en tableau comme Quantite[0] ...

Voici un essai de correction:

<form id="form1">
<table>
<?php 
for ($i=1; $i<=16; $i++)
echo 
<<<HTML
<tr> 
      <td class="td" width="100"> 
        <input class="input1" type="image" id="Image[$i]" name="Image[$i]" size="10" img src="$ligne[image]">
      </td>
      <td class="td" width="50"> 
        <input class="input3" type="text" id="Code[$i]" name="Code[$i]" size="5" value="$ligne[code]">
      </td>
      <td class="td" width="150"> 
        <input class="input3" type="text" id="Design[$i]" name="Design[$i]" size="10" value="$ligne[design]">
      </td>
      <td class="td" width="50"> 
        pu <input class="input3" type="text" id="Prixu[$i]" name="Prixu[$i]" size="6" value="$ligne[prixu]">
      </td>
      <td class="td" width="100"> 
        qte <input class="input1" type="text"  id="Quantite[$i]"  name="Quantite[$i]"  size="4" onChange="calcul_form();">
      </td>
</tr>
HTML;
?>
</table>
<INPUT TYPE="text" id="total" name="total" SIZE=8>
</form>
<script>
document.getElementById("total").value =0;
function calcul_form() {
	var total = 0;
	for (i=1; i<=16; i++){
		var qte = document.getElementById("Quantite["+i+"]").value;
		var prixu = document.getElementById("Prixu["+i+"]").value;
		total += qte * prixu;
	}
	document.getElementById("total").value = total;
}
</script>

Javacript, OnBlur et tableau PHP

Qui est en ligne