Vérifier la présence de texte dans une div (boucle) avant d'accéder à la page de traitement PHP

**Abpostman1** · 01/07/2019, 18h01

Bonjour,

Mon application présente une table avec des <tr> qui peuvent être vides. Avant de permettre à l'utilisateur d'enregistrer les produits qu'il a scannés, je veux l'obliger à vérifier que les données obligatoires sont présentes. Dans le cas contraire, il passe par un autre script pour créer les données manquantes avant de revenir sur la page de la table.

Ma table de test contient :

Code HTML :

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
28
29
30
31
32
33
34
35
36
37
38
<tr>
                                <td class="sku trVertAlign">701855</td>
                                <td class="trVertAlign">Turbo Galaxy Alhambra Sharan 1.9 L TDi 110 cv 115 cv 701855</td>
                                <td class="trVertAlign text-center"><strong>8434248108933</strong></td>
                                <td class="trVertAlign text-center">5</td>
                                <td class="trVertAlign text-center">1</td>
 
                                <td class="text-center">
                                    <a href="scanDelete.php?ean=8434248108933"><button id="valider" role="button" class="btn btn-danger "><i class="fas fa-window-close"></i></button></a>
                                </td>
 
                            </tr>
 
                            <tr>
                                <td class="sku trVertAlign">5439-970-0022</td>
                                <td class="trVertAlign">Turbo Passat Touran Golf 1.9 L TDi 90-105 cv 54399700022</td>
                                <td class="trVertAlign text-center"><strong>8434248108938</strong></td>
                                <td class="trVertAlign text-center">16</td>
                                <td class="trVertAlign text-center">1</td>
 
                                <td class="text-center">
                                    <a href="scanDelete.php?ean=8434248108938"><button id="valider" role="button" class="btn btn-danger "><i class="fas fa-window-close"></i></button></a>
                                </td>
 
                            </tr>
 
                            <tr>
                                <td class="sku trVertAlign"></td>
                                <td class="trVertAlign"><a href="scanCreate.php?ean=869012321312">Correspondance à créer</a></td>
                                <td class="trVertAlign text-center"><strong>869012321312</strong></td>
                                <td class="trVertAlign text-center">0</td>
                                <td class="trVertAlign text-center">1</td>
 
                                <td class="text-center">
                                    <a href="scanDelete.php?ean=869012321312"><button id="valider" role="button" class="btn btn-danger "><i class="fas fa-window-close"></i></button></a>
                                </td>
 
                            </tr>

J'ai donc ajouté à la balise TD une classe SKU. J'identifie la longueur de la variable et si elle est = 0, j'alerte le user qu'il doit créer les données manquantes.

Mon problème :

le troisième enregistrement ne contient rien dans le premier td et c'est lui qui devrait déclencher l'alerte à l'utilisateur
j'ai mis un count pour tester si une des td.sku est vide mais ce count reste toujours à zéro dans ma console
du coup, quand je demande d'alerter si une des td.sku est vide, rien ne se passe

Je suis très novice en JS et j'imagine qu'il y a surement une façon plus simple de parvenir à ma fin mais j'aimerais commencer par comprendre pourquoi cela ne fonctionne pas.
Le script en question :

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
     function submitDetailsForm() {
 
            var count = 0;
            if( !confirm('Enregistrer les produits ci-dessus ?')) 
                {
                    return false;
                }
                else
                {
                var el = document.querySelectorAll ("td.sku")
 
                console.log (el);
 
                for (var i = 0, ilen = el.length - 1; i < ilen; i++) 
                {
 
                    var divValue = el[i].innerHTML;
                    var divValueLength = divValue.length;
 
                    console.log(divValue);
                    console.log(divValueLength);
 
                    if (divValueLength == 0)
                    {
                        count ++ ;
                        console.log('Pas bon !');
                    }
 
                    else
                    {
                       console.log('OK !');
                    }
                }
 
               console.log('défauts :', count);
 
               if (count <= 0)
               {
                   document.location.href="validIncome.php";
               }
 
               else 
               {
                   alert('Aucune correspondance pour le produit '+i + '. Veuillez svp la créer.');
                   //return false;
               }
           }
        }

Désolé pour les logs mais ça m'aide à comprendre plus vite.

Si quelqu'un peut me dire où ça pêche, j'apprécierai. Ce n'est pas faute d'avoir cherché.

Merci

**danielhagnoul** · 01/07/2019, 19h42

Votre code HTML : Il existe 3 exemplaires de l'ID valider. Il n'est pas unique !

Codes corrigés :

Code HTML :

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
<table id="skuTable">
    <tbody>
        <tr>
            <td class="sku trVertAlign">701855</td>
            <td class="trVertAlign">Turbo Galaxy Alhambra Sharan 1.9 L TDi 110 cv 115 cv 701855</td>
            <td class="trVertAlign text-center"><strong>8434248108933</strong></td>
            <td class="trVertAlign text-center">5</td>
            <td class="trVertAlign text-center">1</td>
        </tr>
        <tr>
            <td class="sku trVertAlign">5439-970-0022</td>
            <td class="trVertAlign">Turbo Passat Touran Golf 1.9 L TDi 90-105 cv 54399700022</td>
            <td class="trVertAlign text-center"><strong>8434248108938</strong></td>
            <td class="trVertAlign text-center">16</td>
            <td class="trVertAlign text-center">1</td>
        </tr>
        <tr>
            <td class="sku trVertAlign"></td>
            <td class="trVertAlign"><a href="scanCreate.php?ean=869012321312">Correspondance à créer</a></td>
            <td class="trVertAlign text-center"><strong>869012321312</strong></td>
            <td class="trVertAlign text-center">0</td>
            <td class="trVertAlign text-center">1</td>
            <td class="text-center">
        </tr>
    </tbody>
</table>

Code JavaScript :

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
const elemTbody = document.querySelector('#skuTable > tbody');
const elemTDs = Array.from(elemTbody.querySelectorAll('td.sku'));
 
let count = 0;
 
for (const item of elemTDs) {
    let str = item.textContent.trim();
    let strLength = str.length;
 
    if (strLength === 0) {
        // pas rempli, action
        count++
        console.log(`Le TD ${ item.classList } n'est pas rempli !`);
    } else {
        // traitement
        console.log(`Le TD ${ item.classList } est rempli : ${ str })`);
    }
}
 
console.log(`count = ${ count }`);

Le TD sku trVertAlign est rempli : 701855)
Le TD sku trVertAlign est rempli : 5439-970-0022)
Le TD sku trVertAlign n'est pas rempli !
count = 1

**Abpostman1** · 02/07/2019, 10h52

Bonjour Daniel et merci de vous être penché sur mon cas.

Niveau syntaxe, j'étais très loin de la solution.

Je vois notamment dans votre code les constantes que je ne connais pas.
Je vais analyser tout ça et me documenter car il y a beaucoup de nouvelles choses.

Merci encore et bonne journée.

Vérifier la présence de texte dans une div (boucle) avant d'accéder à la page de traitement PHP

JavaScript

Discussions similaires

Partager

Partager