Quel Evénement javascript je dois appliquer sur un input text

Résolu/Fermé
abirgl Messages postés 127 Date d'inscription lundi 31 octobre 2016 Statut Membre Dernière intervention 20 juin 2017 - Modifié par abirgl le 26/12/2016 à 13:27
abirgl Messages postés 127 Date d'inscription lundi 31 octobre 2016 Statut Membre Dernière intervention 20 juin 2017 - 26 déc. 2016 à 15:18
Bonjour,
J'ai un tableau html qui contient 3 colonnes, la première colonne représente la désignation de l'article , la deuxième représente la quantité restante et la troisième colonne la quantité consommée, la première et la deuxième colonne sont affichés à partir de la base, la troisième colonne est à éditer(l'utilisateur saisit une valeur), je veux afficher un message d'erreur si l'utilisateur saisit une valeur qui dépasse la quantité restante mais j'ai pas une grande idée quel est l’événement que je dois appliquer pour appeler une fonction javascript (pour afficher le msg d'erreur), je vous montre mon code

<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>Désignation </th>
<th>QTE Restante</th>
<th> QTE</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<?php
$sqlmatpre="select CArticle, LibArticle,QuantiteOTRes from GP_OrdredeTravailDetail
where NOrdredeTravail='$numero_ordre_de_travail' ";
$stmtmatpre = sqlsrv_query( $conn, $sqlmatpre );
while( $rowmat = sqlsrv_fetch_array( $stmtmatpre, SQLSRV_FETCH_NUMERIC) )
{
$indexArticle=$rowmat[0]." | ".$rowmat[1].$numero_ordre_de_travail;
?>
<td><input type="text" style="border:0px" name="libArticle[]" value="<?php echo $rowmat[1] ; ?>" disabled="disabled">
<input type="hidden" style="border:0px" name="libArticle[]" value="<?php echo $rowmat[1]; ?>" >
</td>
<td><input type="text" size="5" style="border:0px" name="quantiteRestante[]" value="<?php echo $rowmat[2]; ?>" disabled>
<input type="hidden" size="5" style="border:0px" name="quantiteRestante[]" value="<?php echo $rowmat[2]; ?>">
</td>
<td><input type="text" size="5" style="border:0px" align="center" name="quantiteConsommee[]" value="<?php echo "0"; ?>" onkeyup="verifQte() "> </td>
</tr>
</tbody>
<?php
}
?>
</table>

Pour ma fonction javascript, j'ai écrit le code suivant :

function verifQte()
{
var Lignes = document.getElementById("dataTables-example").rows;
var Longueur=Lignes.length;
alert("Longueur :" + Longueur);
for(var i=1; i<Longueur; i++)
{
var arrayColonnes = arrayLignes[i].cells;//on récupère les cellules de la ligne
var largeur = arrayColonnes.length;
for(var j=1; j<largeur; j++)
{
var qteRestante=Lignes[i].cells[1] ;
var qteConsommee=Lignes[i].cells[2];
if(qteConsommee > qteRestante)
alert("La quantité utilisée ne doit pas dépasser la quantité restante");
}
}

Mon tableau contient 3 lignes, pourtant le résultat de la variable longueur est 4, est ce que le <tr> qui contient l'entête du tableau (les <th>) est aussi calculée ? sinon même lorsque je saisit des valeurs erronées rien ne s'affiche :( quel est l’événement que je dois utiliser pour appeler ma fonction ? et est ce que le code de ma fonction est correcte ou pas ?
merci d'avance


A voir également:

1 réponse

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
26 déc. 2016 à 14:36
Salut,

Effectivement la variable Longueur est égale à 4 car document.getElementById("dataTables-example").rows récupère toutes les lignes (tr) du tableau, y compris celle dans l'entête (dans thead).
Pour corriger ceci, tu peux simplement ajouter un id sur la balise tbody du tableau et récupérer les lignes à partir de cet id.

Tu as des erreurs dans ton script, pense à activer la console de développement de ton navigateur pour les voir :
- la variable arrayLignes est utilisée mais n'est jamais définie, à remplacer par la variable Lignes
- la deuxième boucle for est inutile puisque la variable j n'est pas utilisée et qu'on accède aux cellules directement via leurs indices Lignes[i].cells[1] et Lignes[i].cells[2]
- Lignes[i].cells[1] correspond à la cellule du tableau et non à la valeur de l'input. Idem pour Lignes[i].cells[2]

Enfin, puisque tu connais la valeur maximale autorisée pour le champ quantiteConsommee dès le chargement de la page, on pourrais donc remplacer l'utilisation du javascript par les attributs de validation html5 via un input type number et l'attribut max :
<input type="number" size="5" name="quantiteConsommee[]" value="0" min="0" max="<?php echo $rowmat[2];  ?>" style="border:0px" align="center"> 

Ainsi plus besoin de code javascript.

Bonne journée,
0
abirgl Messages postés 127 Date d'inscription lundi 31 octobre 2016 Statut Membre Dernière intervention 20 juin 2017
26 déc. 2016 à 15:18
Merci Pitet, ça répond exactement à mon besoin
0