Utilisation d'un double tableau style boite mail Javascript --> PHP
Op petit edit du premier post pour mettre la solution a ce petit probleme qu'est le double tableau.
Le but de ce script est l'utilisation d'un double tableau, LstSource et LstCible, la mise en parametre d'option, le passage d'un tableau a un autre en enfin la validation des données pour une utilisation $_POST dans un autre fichier ou dans le meme.
Tous d'abord il faut créer un formulaire ainsi que les 2 tableaux, ca c'est pas trop dur et le graphisme est laissé au gout de chacun (ici les dimensions sont en automatiques.
Tous mon code est dans des echo car en php (pour eviter de ce tromper :)
Les noms des parametres sont en relations avec les scripts attention au modification.
Voici donc le formulaire ainsi que les tableaux et les boutons.
Les commentaires etant fait en // sont a supprimé lors de l'implantation c'est juste pour préciser :) votre fichier a bien sur les quotes <? et ?> entre tous ce code, ainsi que les parametres 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
36
| echo "
<form name=\"formSaisie\" action=\"fichier_confirmation.php\" method=\"post\" onSubmit=\"PostSelect()\">" ;
echo"<table>
<tr>
<td>
<select id=\"LstSource\" size=\"10\" width=\"200\" height=\"150\" ondblclick=\"Ajouter();\" multiple=\"multiple\" >
<option value=\"\">*Machine a selectionner*</option>";
//inserer ici les options, je recupérais les éléments dans une base de données, et cela marche tres bien sinon mettez les en durs.
<option>Element 1</option>
<option>Element 2</option>
<option>Element 3</option>
</select>
</td>
//le code des boutons
<td>
<input type=\"button\" class=\"button\" style=\"width:100px\" onclick=\"Ajouter();\" value=\">>Ajouter>>\" /><br /> <br />
<input type=\"button\" class=\"button\" style=\"width:100px\" onclick=\"Supprimer();\" value=\"<<Supprimer<<\" /><br /> <br />
</td>
//le tableau ou l'on veut mettre les elements !
<td>
<select id=\"LstCible\" name=\"LstCible\" size=\"10\" width=\"200\" height=\"150\" ondblclick=\"Supprimer();\" multiple=\"multiple\">
<option value=\"\">*Ajouter les en cliquant dessus ou en les double cliquant*</option>
//la ne pas ajouter d'element puisque c'est ceux que l'on va recuperer :)
</select>
</td>
</tr>
</table>
//les boutons de submit pour valider les actions.
<input type=\"submit\" value=\"Valider \">
<input type=\"reset\" value=\"Annuler\">"; |
Voila la structure html est faite il ne reste plus qu'a implanter les fonctions javascript :) la par contre ils ne sont pas dans un echo pour laisser les commentaires :) vous pouvez l'integrer dans le code en ajoutant des petits \"\" pour les guillemets. ou le laisser en dehors :) mais au debut de votre fichier.!
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
|
<script language="javascript">
//script javascript pour l'utilisation du double tableau de selection
var NbSource=$nombre_de_source; //<-- ca c'est a vous a le changer suivant si vous connaissez le nombre d'éléments de votre liste de source, soit comme je l'ai fait grace a des fonctions sql si les elements sont dans une table de données.
var NbCible=0;
//Fonction ajoutant les elements du tableau de droite LstSource a celui de gauche LstCible
function Ajouter(){
var NbEle = -1;
var TxtEle= "";
for(i = 0; i < document.getElementById("LstSource").length; i++){
if (document.getElementById("LstSource").options[i].selected){
NbEle = i;
TxtEle = document.getElementById("LstSource").options[i].text;
}
}
if (NbSource != 0 && NbEle != -1){
document.getElementById("LstSource").options[NbEle] = null;
document.getElementById("LstCible").options[NbCible] = new Option(TxtEle);
NbCible = NbCible + 1;
NbSource = NbSource - 1;
}
}
//Fonction supprimant les elements de la liste de selection LstCible
function Supprimer() {
var NbEle = -1;
var TxtEle = "";
for(i = 0; i < document.getElementById("LstCible").length; i++)
{
if (document.getElementById("LstCible").options[i].selected)
{
NbEle = i;
TxtEle = document.getElementById("LstCible").options[i].text;
}
}
if (NbCible != 0 && NbEle != -1) {
document.getElementById("LstCible").options[NbEle] = null;
document.getElementById("LstSource").options[NbSource] = new Option(TxtEle);
NbCible = NbCible - 1;
NbSource = NbSource + 1;
}
}
//Fonction permettant lors du submit de selectionner tous les elements de la liste Cible.
function PostSelect(){
//calcule le nombre d'element de la liste
NbCol1 = document.getElementById('LstCible').length;
//Boucle qui en mettant a true les options d'elements les valides
for(a=0; a<NbCol1; a++){
document.getElementById('LstCible').options[a].selected = true;
}
//implantation des elements dans un tableau
document.getElementById('LstCible').name = "LstCible[]";
document.formSaisie.submit();
}
</script> |
Voila il ne vous reste plus qu'a recuperer la valeur dans le fichier de cible ou dans le meme grace a
Code:
1
2
3
4
| $ma_liste=array();
$ma_liste = $HTTP_POST_VARS["LstCible"];
ou bien de le mettre en Hidden pour l'utiliser plus tard !! |
Vous pouvez comptez les elements faire des boucles For pour attribuer les elements a des valeurs tableau
Code:
$ma_liste[$i] = $HTTP_POST_VARS["ma_liste$i"];
En esperant que ca pourra aider les codeurs :) encore merci a ceux qui m'ont aidé ! moi je vais m'en servir plein de fois :)
Et sans oublier de préciser que les fonctions javascript ont etait trouvé sur le site www.developpez.net je n'ai juste fais que rassemblé :)
PS pour admin : si on pouvait changer le titre du post pour une recherche plus facile en :
Utilisation d'un double tableau style boite mail Javascript --> PHP
merci :)
