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

Version imprimable

Voir 40 message(s) de cette discussion en une page

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:

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:

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

03/07/2007, 15h58
buzzkaido

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...
06/07/2007, 13h21
reineur

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
09/07/2007, 10h57
reineur

svp
09/07/2007, 11h09
buzzkaido

Citation:

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

J'ai rien compris de quoi tu parles... désolé.
09/07/2007, 11h23
reineur

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
09/07/2007, 11h24
buzzkaido

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

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
<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:

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

09/07/2007, 15h17
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.

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.
09/07/2007, 15h33
reineur

Citation:

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

Citation:

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:

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.

10/07/2007, 08h46
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:

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
10/07/2007, 09h17
buzzkaido

Euh, je vais essayer de t'expliquer :

Citation:

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.
10/07/2007, 09h29
reineur

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
10/07/2007, 09h56
buzzkaido

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.
10/07/2007, 09h57
buzzkaido
Citation:
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:

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:

1 2 3 var objListe = document.getElementById(idListe); valeurHidden= valeurHidden + objListe.options[i].value + ",";
10/07/2007, 13h44
reineur

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

Citation:

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:

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.

10/07/2007, 14h47
buzzkaido

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[]"
11/07/2007, 09h18
reineur

Bonjour,
Now je ne vois plus mes 2 selects avec print_r($_POST) dans mon fichier de traitement,
je vais regarder ca

Voir 40 message(s) de cette discussion en une page