4 pièce(s) jointe(s)
Récupérer les données d'une ligne d'un"form" vers une autre page .ejs via checkbox
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 :lol:
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)
Pièce jointe 466125
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)
Pièce jointe 466141
Voilà mes lignes de codes :
HTML :
Code:
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:
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:
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:
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:
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> |
Pièce jointe 466147
résultat obtenu sur la 2em page :
Pièce jointe 466156
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
