Multiple select box : passer les id au lieu des valeurs
Bonjour,
J'essaye de faire passer des valeurs d'une select box à une autre, puis enregistrer les valeurs de la seconde :
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
65
66
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="robots" content="index, nofollow">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="./createUser.js" type="text/javascript"></script>
<script type="text/javascript">
<!-- Cacher les fonctions pour les vieux navigateurs
window.onload = function() {
document.getElementById("sourceToTarget").onclick = function() {
sureTransfer(document.getElementById("ProjectsListSource"), document.getElementById("ProjectsListTarget"), false);
};
document.getElementById("targetToSource").onclick = function() {
sureTransfer(document.getElementById("ProjectsListTarget"), document.getElementById("ProjectsListSource"), false);
};
}
--> Fin du cachage du script pour les vieux navigateurs
</script>
</head><body>
<form action="./register.php" method="post" name="createuser">
<div id="ProjectsChoice">
<p> </p>
<p>Cliquez sur chaque projet voulu en maintenant la touche [Ctrl] pour en sélectionner plusieurs.</p>
<p> </p>
<table>
<thead>
<tr>
<td>Projets disponibles :</td>
<td> </td>
<td>Projets sélectionnés :</td>
</tr>
</thead>
<tbody><tr>
<td>
<select id="ProjectsListSource" name="ProjectsListSource[]" size="8" multiple="multiple" title="Projets disponibles" class="projects_choice">
<option value="53">Project 53</option><option value="54">Project 54</option><option value="55">Project 55</option><option value="56">Project 56</option><option value="59">Project 59</option><option value="58">Project 58</option><option value="60">Project 60</option> </select>
</td>
<td>
<input id="sourceToTarget" name="sourceToTarget" value=">>" type="button">
<br>
<input id="targetToSource" name="targetToSource" value="<<" type="button">
<br>
</td>
<td>
<select id="ProjectsListTarget" name="ProjectsListTarget[]" size="8" multiple="multiple" title="Projets sélectionnés" class="projects_choice">
</select>
</td>
</tr>
</tbody></table>
</div>
<div id="validForm">
<p class="oreonbutton">
<input name="submitA" value="Sauvegarder" onclick="javascript:selectAll();" type="submit">
</p>
</div>
</form>
</body></html> |
Le script js :
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
function verifEmptyCases(){
if(document.getElementById('postNomPrenom').value == ""){
alert ('Vous devez renseigner le champ "Nom complet".');
return false;
}
if(document.getElementById('postLogin').value == ""){
alert ('Vous devez renseigner le champ "Login".');
return false;
}
if(document.getElementById('postEmail').value == ""){
alert ('Vous devez renseigner le champ "E-mail".');
return false;
} else {
var verif = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
if (verif.exec(document.getElementById('postEmail').value) == null) {
alert("Le format de l'email est incorrect.");
return false;
}
}
return true;
}
function sureTransfer(from, to, all) {
if ( from.getElementsByTagName && to.appendChild ) {
while ( getCount(from, !all) > 0 ) {
transfer(from, to, all);
}
sortlist('ProjectsListSource');
sortlist('ProjectsListTarget');
}
}
function getCount(target, isSelected) {
var options = target.getElementsByTagName("option");
if ( !isSelected ) {
return options.length;
}
var count = 0;
for ( i = 0; i < options.length; i++ ) {
if ( isSelected && options[i].selected ) {
count++;
}
}
return count;
}
function transfer(from, to, all) {
if ( from.getElementsByTagName && to.appendChild ) {
var options = from.getElementsByTagName("option");
for ( i = 0; i < options.length; i++ ) {
if ( all ) {
to.appendChild(options[i]);
} else {
if ( options[i].selected ) {
to.appendChild(options[i]);
}
}
}
}
}
function sortlist(varId) {
var lb = document.getElementById(varId);
arrTexts = new Array();
for(i=0; i<lb.length; i++) {
arrTexts[i] = lb.options[i].text;
}
arrTexts.sort();
for(i=0; i<lb.length; i++) {
lb.options[i].text = arrTexts[i];
lb.options[i].value = arrTexts[i];
}
}
function selectAll() {
var nb = document.getElementById('ProjectsListTarget').options.length; // nombre de projets sélectionnés (colonne de droite)
for( i = 0; i < nb; i++ ) {
document.getElementById('ProjectsListTarget').options[i].selected = true;
}
} |
(code trouvé ici, la FAQ de Developpez.com ne fonctionne pas chez moi)
register.php :
Code:
1
2
3
4
5
|
<?php
$TabProjectsSelected = $_POST['ProjectsListTarget'];
print_r($TabProjectsSelected);
?> |
Le transfert d'une boite à l'autre fonctionne. Seulement quand je valide le formulaire, je récupère les libellés des options (Projet 60 etc) mais je n'arrive pas à récupérer les values (60).
Savez-vous comment il faut faire pour que les id soient passés ? Merci d'avance !
Edit : je viens de regarder le code source de la page après le transfert de box, j'ai ceci :
Code:
1
2
3
4
5
|
<select id="ProjectsListTarget" name="ProjectsListTarget[]" size="8" multiple="multiple" title="Projets sélectionnés" class="projects_choice">
<option value="Project 59">Project 59</option><option value="58">Project 58</option>
<option value="Project 60">Project 60</option>
</select> |
Les value sont modifiées et ont pris les valeurs des libellés :? Je ne comprend pas pourquoi...
