Basculer des éléments d'une liste à l'autre

**PAYASS59** · 03/07/2007, 13h09

Bonjour,

voila mon petit souci.

J'ai télécharger le script permettant de faire basculer un élément ou des élément d'une liste à une autre.

Je voudrai savoir comment maintenant récupérer toutes les values de mes sélections..
A terme je vais devoir enregistrer ces valeurs dans une base de données...

merci d'avance pour info voila mon code....

la requete pour remplir la liste des valeurs

//fonction pour lister le personnel selon le secteur

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
function Liste_Personnel(){
 
 
$requete1=mysql_query("select * from gestiondesdemandes.personnel where date_sortie='oui' order by nom_util");
echo('<SELECT align=top name="liste1" size=7  style="width:150px" >');
while ($ligne1=mysql_fetch_object($requete1)){ 
echo('<option value="'.$ligne1->id_util.'">'.$ligne1->nom_util.'&nbsp;&nbsp;'.$ligne1->prenom_util.'</option>'); } 
echo('</select>');
 
}

le code de mes 2 listes

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
 
<TD align="center" class="ecriture">Personnels Secteur<BR>
	<? Liste_Personnel(); ?>
	</TD>
	<TD align="center">
	<INPUT type="button" value="Ajouter >>>" onClick="Deplacer(this.form.liste1,this.form.liste2)">
	<BR><BR>
	<INPUT type="button" value="&lt;&lt;&lt; Enlever" onClick="Deplacer(this.form.liste2,this.form.liste1)">
	</TD>
	<TD align="center" class="ecriture">Personnel(s) retenu(s)<BR>
	<SELECT align=top name="liste2" size=7 style="width:160px">
		<OPTION value="10">----------------------</OPTION>
	</SELECT>
	</TD>
	</TR></TABLE>
	<SCRIPT language="javascript">
		// Astuce pour Netscape qui ne supporte pas style="width:100"
		// Donc : création d'une ligne pour initialiser la largeur puis suppression par ce javascript
		document.demande.liste2.options.length=0;
	</SCRIPT>

encore merci

**buzzkaido** · 03/07/2007, 15h58

Au moment de poster le formulaire, il te suffit d'executer une fonction javascript.

Cette fonction selectionnera l'ensemble de tous les elements des deux listes avant d'envoyer le formulaire.

Il te suffit de la mettre dans l'attribut onSubmit du formulaire.

Comme ça, dans les données postées par la page, tu recupere toutes les valeurs des deux listes.

Ou sinon, autre solution :

- lors du chargement de la page, tu declare des champs "hidden" qui contiennent un tableau avec tous les elements de chaque liste
- lors du transfert de l'une à l'autre, tu met à jour ce tableau
- dans le script PHP, tu recupere ces deux tableaux avec l'ensemble des elements de tes deux listes

La premiere solution est plus simple, la deuxieme est visuellement plus propre...

**reineur** · 06/07/2007, 13h21

Bonjour,
J'ai le mm probleme, en faisant afficher la validation de mon formulaire par un print_r($_POST) je vois que ma liste ne contient aucun element.
Comment peut on changer le script pour le recevoir dans une liste (ce qui me parait etre le plus simple)
Merci

**reineur** · 09/07/2007, 10h57

svp

**buzzkaido** · 09/07/2007, 11h09

Comment peut on changer le script pour le recevoir dans une liste

J'ai rien compris de quoi tu parles... désolé.

**reineur** · 09/07/2007, 11h23

Bonjour, voila à partir du premier script je n'arrive pas à recuperer les valeurs de la liste2. j'ai essayé avec des tableaux mais cela n'a pas l'air de fonctionner.
As tu une autre solution ou celle-ci est-elle la bonne (si oui comment modifier le script precedent pour recevoir les elements de la liste2)
merci

**buzzkaido** · 09/07/2007, 11h24

Si tu nous montrais un minimum de code, ce serait peut-etre pas mal

**reineur** · 09/07/2007, 15h01

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
<script>
List = new Array();
function Remplir(valeur){
  var sel="";
  sel ="<select size='1' multiple='yes' name='souscat'>";
  // Parcourir le tableau
  for (var i=0;i<List.length;i++)
   {
     // tester si la ligne du tableau (Sous-catégorie) correspond à la valeur de la catéhorie
     if (List[i][1]==valeur)
     {
       // Ajouter une rubrique sous-catégorie au variable SEL
       sel= sel + "<option value="+List[i][0]+">"+List[i][1]+"</option>";
     }
 
   }
   sel =sel + "</select>";
   // Modifier le DIV scat par la nouvelle List à partir du variable SEL
   document.getElementById('scat').innerHTML=sel;
}
</script>
 
<script language="Javascript">
// Transfert une ligne de la liste Origine à la liste Destination
function TransfertListe(idOrigine, idDestination)
{	var objOrigine = document.getElementById(idOrigine);
	var objDestination = document.getElementById(idDestination);
	if (objOrigine.options.selectedIndex<0) return false;
	if (VerifValeurDansListe(idDestination, objOrigine.options[objOrigine.options.selectedIndex].value, true)) return false;
	var ADeplacer = new Option(objOrigine.options[objOrigine.options.selectedIndex].text, objOrigine.options[objOrigine.options.selectedIndex].value);
	objDestination.options[objDestination.length]=ADeplacer;
	objOrigine.options[objOrigine.options.selectedIndex]=null;
}
 
// Vérifie la présence de Valeur dans IdListe
function VerifValeurDansListe(IdListe, Valeur, blnAlerte) {
	var objListe = document.getElementById(IdListe);
	for (i=objListe.length-1;i>=0;i--) if (objListe.options[i].value == Valeur) {if (blnAlerte) alert('Déjà présent.'); return true;}
	return false;
}
</script>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<select multiple name="cat" id="cat"  style="width:160px;" size="10" ondblclick="TransfertListe('cat','souscat');" >
<?$i=0;
while($row=mysql_fetch_row($req)
{
?><option value="<?echo $row[0]?>"><?echo $row[1];></option><?
}?>	
</select>
</td>
<td>&nbsp;&nbsp;	</td>
<td>
<select name="souscat" id="souscat" style="width:160px;" size="10" ondblclick="TransfertListe('souscat','cat');">		
</select>

Voila il est a peu pres identique a celui du dessus

**buzzkaido** · 09/07/2007, 15h17

Et au moment ou tu postes le formulaire, est-ce que tu selectionnes bien TOUS les elements des deux listes ?

Car pour les listes HTML, seuls les elements selectionnés sont postés.

Tu peux faire ça dans le "onSubmit" du formulaire.

Ou alors (un poil plus complexe, mais plus propre) au chargement de la page, tu crées deux input de type HIDDEN qui contiennent les references des elements de tes deux listes.

A chaque fois que tu passes un element d'une liste à l'autre, tu mets à jour le contenu des champs HIDDEN correspondant.

Et dans le script PHP, tu te bases sur le contenu des champs HIDDEN.

**reineur** · 09/07/2007, 15h33

Envoyé par buzzkaido

Et au moment ou tu postes le formulaire, est-ce que tu selectionnes bien TOUS les elements des deux listes ?

Car pour les listes HTML, seuls les elements selectionnés sont postés.

Tu peux faire ça dans le "onSubmit" du formulaire.

C'est a dire?
il faut que tous les elements de ma 2eme liste soit selectionné avant de faire le submit?

Y a t-il sur un site la methode avec les types hidden?
je ne vois pas trop comment le faire

**buzzkaido** · 09/07/2007, 15h47

il faut que tous les elements de ma 2eme liste soit selectionné avant de faire le submit?

Si tu veux recuperer TOUS les elements du'une liste, il faut TOUS les selectionner.

Donc si tu veux recuperer TOUS les elements de DEUX listes, il faut selectionner TOUS les elements des DEUX listes.

Pour la methodes avec le hidden le plus simple c'est de faire ça :

(ça marche si tes valeurs dans les listes sont uniquement des chiffres)

en javascript :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
fonction creerHiddenListe(idListe, idHidden)
{
    var valeurHidden = "";
    var objListe = document.getElementById(idListe);
    var objHidden = document.getElementById(idHidden);
 
    for (var i=0;i<List.length;i++)
    {
        valeurHidden= valeurHidden + options[i].value + ",";
    }
 
    objHidden.value = valeurHidden;
}

Et tu executes cette fonction :
- au chargement de la page (pour initialiser la valeur du champ hidden)
- à chaque changement dans la liste
ou
- au moment de soumettre le formulaire (onSubmit)

Comme ça, si une liste contient les valeurs "12,25,68,14" ton champ hidden a pour valeur "12,25,68,14" meme si aucun element n'est selectionné dans la liste.

Ensuite, dans le PHP tu fait un explode de cette valeur et tu a recupéré un tableau des valeurs qui etaient dans ta liste.

**reineur** · 10/07/2007, 08h46

Je m'y connais pas trop, je dois donc appeler la fonction javascript dans ma fonction transfertList et mette un input hidden dans mes balises select de ma 2eme liste (si je recupere seulement la 2eme liste)?

Dans le javascript

Code :

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

1
2
3
 var objListe = document.getElementById(idListe);
 
valeurHidden= valeurHidden + options[i].value + ",";

c'est bien options[i] et pas objListe[i] sinon pourquoi creer cette variable?

Merci

**buzzkaido** · 10/07/2007, 09h17

Euh, je vais essayer de t'expliquer :

mette un input hidden dans mes balises select

Absolument pas. Un "input hidden" EST une balise, dans tu ne la mets pas dans une autre balise. Tu la met tout court.

Si tu ne sait pas ce qu'est un "hidden", cherche sur google d'abord.

Ensuite, le but de ta page, si j'ai bien compris, c'est de recuperer TOUS les elements d'une ou plusieurs listes, non ?

(une ou plusieurs, ca ne change rien)

Bon, lorsque tu met une balise SELECT dans un formulaire, seules les options SELECTIONNEES sont postées. Ca c'est le fonctionnement de la balise SELECT, tu peux pas le changer.

Donc, il faut trouver une astuce pour poster TOUTES les options d'une liste.

1/ La premiere solution consiste a selectionner TOUTES les options au moment de poster le formulaire. Ainsi dans le PHP tu recupereres TOUTES les options de la liste.

2/ La deuxieme solution consiste à utiliser un autre INPUT, par exemple HIDDEN. Ce champ a la particularité de ne pas etre visible. Comme ça tu ne genes pas l'affichage de la page. Il suffit de stocker dans ce champ une liste des options presentes dans ta liste SELECT.
Comme ça, quand le formulaire est posté, tu ne regardes pas les données envoyées par la balise SELECT, mais les données envoyées par la balise HIDDEN.

Bon, maintenant, il faudrait peut-etre chercher un peu par toi-même au lieu de poser 4 fois la même question. Surtout que si tu cherches un peu des tutoriaux et des exemples, ce genre de technique est très courante.

Ne me demande pas des adresses de sites ou de tutoriaux, je ne les chercherais pas à ta place.

Chercher fait partie de la formation.

**reineur** · 10/07/2007, 09h29

Merci pour ta reponse mais si je poste 3 ou 4 fois la mm chose c'est parce que tu ne m'expliques pas ce qu'il faut, je sais deja ce que tu me dis "hidden" bouton caché et autre.
D'ailleur tu m'expliques toi 3 fois la mm choses alors que je change de question mais bon !!!
J'ai deja cherché sinon je ne posterai pas, et les tuto montrent bien comment faire les listes doubles (passage d'une liste a l'autre) mais aucun ( ou peut etre que je cherche mal) ne montre comment recuperer les valeurs mises dans une liste.
mais merci de ton aide

**buzzkaido** · 10/07/2007, 09h56

Si j'explique 3 fois la même chose, c'est parce que j'ai vraiment l'impression que tu demandes 3 fois la même chose.

C'est quoi le probleme exactement ?

1/ Tu n'arrives pas à recuperer tous les elements d'une liste ?
2/ Tu n'arrives pas à recuperer tous les elements de plusieurs listes ?
3/ Tu n'arrives pas à faire passer les éléments d'un liste à l'autre ?
4/ Autre chose ?

Pour 1/, 2/ et 3/ il y a dans cette discussion largement assez d'éléments pour que tu y arrives.

**buzzkaido** · 10/07/2007, 09h57

Envoyé par reineur

Je m'y connais pas trop, je dois donc appeler la fonction javascript dans ma fonction transfertList et mette un input hidden dans mes balises select de ma 2eme liste (si je recupere seulement la 2eme liste)?

Dans le javascript

Code :

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

1
2
3
 var objListe = document.getElementById(idListe);
 
valeurHidden= valeurHidden + options[i].value + ",";

c'est bien options[i] et pas objListe[i] sinon pourquoi creer cette variable?

Merci

Je viens de relire, désolé erruer de frappe, il fallait lire :

Code :

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

1
2
3
 var objListe = document.getElementById(idListe);

valeurHidden= valeurHidden + objListe.options[i].value + ",";

**reineur** · 10/07/2007, 13h44

je n'arrive pas a recuperer les elements d'une seule liste (celle que je complete depuis les element de la 1ere liste) pour les passer dans mon fichier qui traite le formulaire,
Merci d'avoir relu, et de m'avoir aidé,
s'il y a assez je vais cherché seul alors, désolé de t'avoir poser des questions

**buzzkaido** · 10/07/2007, 13h50

Si tu veux recuperer TOUS les elements du'une liste, il faut TOUS les selectionner.

Donc, par exemple, si ta liste s'appelle "maListe" :

1/ dans la balise <form> tu mets : onSubmit="selectionneTout('maListe');"
2/ tu fais une fonction "selectionneTout" :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
function selectionneTout(idListe)
{
    var objListe = document.getElementById(idListe);
    if (objListe.length > 0)
    {
        for (var i=0; i<objListe.length; i++)
        {
            if (objListe.options[i].selected == true)
        }
    }
}

Comme ça, au moment où tu envoies le formulaire, tous les éléments de la liste sont selectionnés et donc postés.

**buzzkaido** · 10/07/2007, 14h47

Euh... je tiens à preciser au passage, que pour recuperer plusieurs valeurs dans PHP provenant d'une seule balise HTML, il faut que cette balise soit nommée comme un tableau en PHP.

Par exemple, si ta liste s'appelle "maListe" tu ne recupereras qu'une valeur.

Ta liste doit s'appeller "maListe[]" et lorsque tu y fait reference en javascript, il faut bien l'appeller "maListe[]"