Discussion :

[Rikyu59]

Bonjour à tous,

Je dois réaliser un projet qui consiste à crée un site web (via Node.JS) qui permet de lister des utilisateurs qui se trouve dans une base de données. Jusque là, j'ai réussi

La tâche que je suis actuellement entrain de faire, c'est la mise en place de checkbox sur chaque ligne de mon tableau comme ceci : (Ce n'est pas mon tableau, mais c'est un exemple)



Ce que je souhaite maintenant, c'est que à chaque fois que je sélectionne une checkbox ou plusieurs checkboxs, je l'envoie sur une autre page .ejs dans un tableau pareil que la première page mais seulement avec les valeurs de la ligne sélectionnées avec la checkbox.

exemple : Récupération seulement des 2 lignes sélectionnez dans mon nouveau tableau sur la 2ème page. (même entête que le 1er tableau)


Voilà mes lignes de codes :
HTML :

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
   <FORM NAME="Liste" id="tonForm">
                <div class="container">
                    <div class="table-responsive">
 
                        <br />
                       <div id="tableau">
                            <table class="table table-bordered table-striped" id="employee_table">
 
 
                            <!--<form action="/views/check.ejs" method="POST">-->
                                    <tr>
                                        <th></th>
                                        <th>ID</th>
                                        <th>Last name</th>
                                        <th>First Name</th>
                                        <th>location</th>
                                        <th>Email</th>
                                        <th>Primary DAS ID</th>
                                    <!-- <th id="test">profil</th> -->
 
                                    </tr>
                                    <!--input type="submit" value="verify" onclick="check();" />-->
 
                                </form>   
                            </table>
                        <input type="button" value="Affichez la case cochée" onclick="check();"></input>
                        <input type="button" value="Affichez le Input sélectionnés" onclick="checkInput();"></input>
 
                    </div>
 
                    </div>
                </div>
 
 
            </FORM>

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<script>
        $(document).ready(function(){
 
            $.getJSON('http://localhost:5000/staff', function(data){
                var employee_data = '';
 
                $.each(data, function(key,value){
 
                    employee_data += '<tr class="ligne_tableau_'+value.idDAS+'">';
                    employee_data += '<td>'+'<input type="checkbox" name="CB'+value.idDAS+'" value="CB-'+value.idDAS+'">'+'</td>';
                    employee_data += '<td>' +value.idDAS+'<input class ="ID" type="hidden" value="idDas-'+value.idDAS+'"/> '+'</td>';
                    employee_data += '<td>' +value.Name+'<input class="Name" type="hidden" value="Name-'+value.Name+'"/> '+' </td>';
                    employee_data += '<td>' +value.Firstname+'<input class="Firstname" type="hidden" value="Firstname-'+value.Firstname+'"/> '+' </td>';
                    employee_data += '<td>' +value.location+'<input class="location" type="hidden"value="location-'+value.location+'"/> '+' </td>';
                    employee_data += '<td>' +value.Email+'<input class="Email" type="hidden" value="Email-'+value.Email+'"/> '+' </td>';
                    employee_data += '<td>'+' <input type="text" id="verify" class="form-control" value="" name="Primary-@(user.samAccountName)" style="text-align: center"></div>'+'</td>';
 
 
                });
 
                $('#employee_table').append(employee_data);
 
            });
 
        })  
</script>
 
<script>
 
    function check() {
        var inputs = document.querySelectorAll('input[type=checkbox]:checked'),
            inputsLength = inputs.length;
            console.log(inputs)
        for (var i = 0; i < inputsLength; i++) {
            console.log(inputsLength)
            console.log('La case cochée est la n°' + inputs[i].value)
        }
 
    }
 
    function checkInput() {
        console.log(document.querySelectorAll('input[type=checkbox]'))
        if(document.querySelectorAll('input[type=checkbox]:checked')=== true ){
 
            console.log("document checké")
        }
        else{
            alert('Checkbox non coché !');
        }
  }
 
  }
 
 
 
        var input = document.querySelectorAll('input[type=hidden]'),
            inputLength = input.length;
 
        for (var i = 0; i < inputLength; i++) {
 
          //  console.log('La case cochée est la n°' + input[i].value)  
        }
 
</script>

Partie du code sur mon serveur.js

Code :

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

1
2
3
4
5
6
app.post('/check.ejs', urlencodedParser, function (req, res) {
            //console.log(req.body.checkbox)
            console.log(req.body);
            res.render('check.ejs', { data: req.body });
            res.end();
        });

Partie du code sur ma 2ème page ejs

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
39
40
<FORM NAME="Liste" id="tonForm">
         <div class="container">
            <div class="table-responsive">
 
                <br />
 
                <table class="table table-bordered table-striped" id="employee_table">
                    <form action="/check.ejs" method="POST">                 
 
                   <!--<form action="/views/check.ejs" method="POST">-->
                        <tr>
 
                            <th>ID</th>
                            <th>Last name</th>
                            <th>First Name</th>
                            <th>location</th>
                            <th>Email</th>
                            <th>Primary DAS ID</th>
                           <!-- <th id="test">profil</th> -->
 
                        </tr>
 
                        <tr>
                            <td></td>
                            <td><%= data.CB %></td>
                        </tr>
                        <!--<input type="submit" value="verify" onclick="check();" />-->
 
 
                    </form>     
               </table>
 
 
 
 
            </div>
        </div>
 
 
    </FORM>

Voici avec le test que j'ai éffectué. Via une checkbox sur ma 1ère premiere page :

Code html :

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

1
2
3
4
5
6
7
8
9
<form action="/check.ejs" method="POST">
 
                <input type="checkbox" name="CB"  value="ABC">
 
 
 
 
            <button type="submit" value="submit">Submit</button>
        </form>

résultat obtenu sur la 2em page :




J'arrive à bien récupérer la valeur du checkbox. Moi je souhaite récupérer la valeur de mes inputs





Comme vous pouvais voir, j'ai déjà effectuez quelque tests dans la partie <script>.

Je ne sais pas, par où allez pour pouvoir réussir cette partie de mon projet.
J'ai déjà réussi à récupérer la valeur de mon checkbox sur ma 2ème page. Mais ce que je souhaite c'est récupérer toutes les valeurs de la ligne sélectionné pour pouvoir le récupérer sur la 2ème page.

Je vous demande votre aide pour pouvoir m'éclaircir et m'aider dans ce projet dont cette partie me bloque déjà depuis un certain temps avec plusieurs test effectué sans succès.

Je vous remercie