Discussion :

[fabone]

Bonjour,

Je ne sais pas encore si c'est un bug de JavaScript mais je ne trouve pas de solution.

Voici le problème :

Chaque champ d'un tableau (balise input) est identifiée de manière unique. L'événement onkeypress d'un champ appelle une fonction avec 3 arguments :
- l'identifiant du champ,
- le type de données,
- le nb. de champs sur la ligne.

Cette fonction a pour but de contrôler ce qui est saisi suivant le type de données, créer une nouvelle ligne en fin de tableau lorsquei l'utilisateur appuie sur la touche Entrée dans le dernier champ de la dernière ligne du tableau, etc.

Pour que cette fonction s'applique également sur les nouveaux champs créés, il est nécessaire de la déclarer dans le propriété onkeypress de ces derniers.

La fonction est comme suit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
function CheckField(FieldId, DataType, CountField)
{
...
  /** Déclaration de la fonction gérant l'événement onkeypress pour chacun des champs créés **/
  for (i=0; i < CountField; i++)
  {
      NewFieldId=exp + " . " +  i;									
     NewField.onkeypress=function onkeypress (event) {return CheckField(NewFieldId, "varchar", CountField)};					 
  }
...
}

Lors de l'exécution, au lieu que l'argument NewFieldId soit différent pour chaque champ, il sera = FieldName + (CountField - 1) pour tous les champs.

Par exemple, si CountField=3 et exp="champ" :

- l'argument FieldId de la fonction CheckField pour chaque champ sera égal à exp2, exp2, exp2 au lieu de exp0, exp1, exp2.

Merci pour vos réponses.

[fabone]

Je précise, un nouveau champ est bien évidemment créé dans la boucle à chaque itération :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
/** Déclaration de la fonction gérant l'événement onkeypress pour chacun des champs créés **/
 for (i=0; i < CountField; i++)
 {
NewField=document.createElement("INPUT");

 NewFieldId=exp + " . " + i; 
 NewField.onkeypress=function onkeypress (event) {return CheckField(NewFieldId, "varchar", CountField)}; 
 }

J'ai essayé avec un tableau:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
var NewField =New Array(x);
...
 
 NewField[i]=document.createElement("INPUT"); 
 NewFieldId=exp + " . " + i; 
 NewField[i].onkeypress=function onkeypress (event) {return CheckField(NewFieldId, "varchar", CountField)}; 
...

Cela donne le même résultat.

[lysandro]

Ce n'est pas un bug de Javascript.
C'est une méconnaissance du langage de ta part.

Le problème vient de ce que que tu utilises une cloture : ton gestionnaire d'évènement onkeypress. Tu captures, non pas la valeur contenue dans NewFiledId mais une référence à cette variable. La dernière valeur contenue dans cette variable est la valeur qu'elle a en fin de boucle, soit "champ2" dans l'exemple que tu donnes (exp+"."+i).

Quand le gestionnaire est activé, il va lire le contenu de la variable NewFieldId qui est bien égal à "champ2".

D'ailleurs, tu captures aussi CountField et si sa valeur change quelque part ailleurs dans le code, le résultat de ton gestionnaire d'évènement sera aussi différent de ce que tu attends.

Une option est d'utiliser une fonction pour exécuter cette cloture :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function CheckField(FieldId, DataType, CountField)
{
  function onkeypressFactory ( NewFieldId, CountField ) {
    return function onkeypress ( event ) {
      return CheckField(NewFieldId, "varchar", CountField);
    };
  }
  ...
  /** Déclaration de la fonction gérant l'événement onkeypress pour chacun des champs créés **/
  for (i=0; i < CountField; i++)
  {
    NewFieldId=exp + " . " +  i;									
    NewField.onkeypress=onkeypressFactory( NewFieldId, CountField );					 
  }
...
}

Dans ce cas tu captures aussi une référence mais aux arguments de la fonction onkeypressFactory qui eux ne changerons pas, le Javascript ne possédant pas de passage par référence.

[fabone]

Merci pour ta réponse cela explique en effet ce comportement, je pensais que la valeur était copiée.

[sekaijin]

Je n'ai rien compris de ton code.

je ne vois pas comment il peux faire ce que tu décris.

Je ne comprends pas à quoi sert le paramètre DataType qui n'est jamais exploité.

si je comprends bien le besoin lorsque on tape "enter" sur le dernier input d'une ligne
on crée une nouvelle ligne vierge.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//fonction de vérification
var verify(event) {
  var verifyType : this..setAttribute("data-type");
  // vérifier la saisie en fonction du type
  ...
};
 
//fonction qui gère le dernier input
var keyPressLastFieldFunction(event) {
  if (13 == event. keyCode) {
    createNewLine();
    this.onkeypress = verify; //on empêche la création de plusieurs lignes si l'utilisateur appuis plusieurs fois sur "enter"
  } else {
    this.verify(event);
  }
};
 
var createNewLine = function() {
  for (i=0; i < CountField; i++) {
    var newField=document.createElement("INPUT");
    newField.setAttribute("data-type", "varchar");
    newField.onkeypress = verify; // utiliser la fonction de vérification sur tout les champs
    ...
  }
  //on change la fonction pour le dernier input
  newField.onkeypress = keyPressFunction;
};

Comment ça marche ?
on ajoute un attribut "data-type" aux input ce champ contient le type de vérification

la fonction verify utilise ce champ pour vérifier la saisie.

pour le dernier input de la ligne on gère la touche "enter" si elle est pressée on crée une ligne

la méthode createNewLine crée une nouvelle ligne fixe le type de vérification de chaque champ et associe la bonne fonction à l'événement keypress.

A+JYT

[fabone]

Salut Sekaijin,

La fonction (dont j'ai présenté la partie qui me causait des soucis) me permet d'ajouter des lignes vierges dans un tableau html alimenté par les enregistrements d'une table MySQL, quelle que soit cette table.

Une ligne vierge est ajoutée automatiquement lorsque l'utilisateur appuie sur la touchée entrée dans le dernier champ modifiable de la dernière ligne (à condition qu'au moins un champ obligatoire soit saisi pour éviter d'avoir plus d'une ligne vierge).

Une fois les éventuelles mise à jour et/ou l'insertion de nouveaux enregistrements effectuées, j'enregistre le tableau dans la table.

Cela comporte comme un formulaire-tableau MS-ACCESS (enfin s'il n'a pas trop changé depuis que j'ai utilisé pour la dernière fois).

Bien à tous.