Quel Evénement javascript je dois appliquer sur un input text [Résolu/Fermé]

Signaler
Messages postés
127
Date d'inscription
lundi 31 octobre 2016
Statut
Membre
Dernière intervention
20 juin 2017
-
abirgl
Messages postés
127
Date d'inscription
lundi 31 octobre 2016
Statut
Membre
Dernière intervention
20 juin 2017
-
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


3 réponses

Messages postés
2378
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
2 février 2018
408
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,
abirgl
Messages postés
127
Date d'inscription
lundi 31 octobre 2016
Statut
Membre
Dernière intervention
20 juin 2017

Merci Pitet, ça répond exactement à mon besoin