begin process at 2010 03 17 06:42:27
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript et le navigateur

 > 

Autre

 > 

Liste double et javascript


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Liste double et javascript

jeudi 26 juin 2008 à 17:22:28 | Liste double et javascript

daris

Bonjour,

J'ai mis en place un système liste double en m'inpirant de ce site.
Mais je sollicite de l'aide car mon scripte ne fonctionne pas convenablement.

J'ai un formulaire comme ci dessous avec deux function javascript:

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT LANGUAGE="JavaScript">
    function Deplacer(l1,l2) {
        if (l1.options.selectedIndex>=0) {
            o=new Option(l1.options[l1.options.selectedIndex].text,l1.options[l1.options.selectedIndex].value);
            l2.options[l2.options.length]=o;
            l1.options[l1.options.selectedIndex]=null;
            //document.formulaire.PROJET_ID+= l1.options[l1.options.selectedIndex].value+"," ;
        }else{
            alert("Aucune activite selectionnee");
        }
    }
</SCRIPT>

 <SCRIPT  LANGUAGE="JavaScript">
    function posterListes()
{
     // On compte le nombre d'item de la liste select
    NbCol1 = document.forms['formulaire'].ListeDroite.length;
   
    // On lance une boucle pour selectionner tous les items
    for (a = 0; a < NbCol1; a++)
    {
    document.forms['formulaire'].ListeDroite.options[a].selected = true;
    }
   
     // On compte le nombre d'item de la liste select
    NbCol2 = document.forms['formulaire'].ListeGauche.length;
      
    // On modifie l'ID  du champ select pour que PHP traite cette
    // derni?re comme un array
   //document.forms['formulaire'].ListeDroite.name = "ListeDroite[]"; 
}

</SCRIPT>

<BODY>
                ......
                    <td align="left" colspan="" rowspan ="2">
                     <select align="top" name="ListeGauche" multiple="multiple" size="6" style="width:200px">
                    <?php
                    foreach($tab1 as $cle => $valeur){
                    ?>
                        <OPTION VALUE=<?=urlencode($cle)?>><?=$cle." - ".$valeur?></OPTION> <?php
                    }
                    ?>       
               </select>
               </td>
               <TD align="center" colspan="" rowspan ="2">
                    <INPUT type="button" value="Ajouter >>>"    onClick="Deplacer(this.form.ListeGauche,this.form.ListeDroite);posterListes()" >
                    <BR><BR>
                    <INPUT type="button" value="&lt;&lt;&lt; Enlever" onClick="Deplacer(this.form.ListeDroite,this.form.ListeGauche);posterListes()" >
                </TD>    
                <TD align="left" colspan="" rowspan ="2">
                    <select align="top" name="ListeDroite" multiple="multiple" size="6" style="width:200px">
                    <?php
                    foreach($tab2 as $key => $value){
                    ?>
                        <OPTION  VALUE=<?=urlencode($key)?>><?=$key." - ".$value?></OPTION> <?php
                    }
                    ?>
                    </select>
                </TD>
Mon objectif  est que les deux listes soient remplis au chargement du formulaire  graces aux resultats des requetes sql que j'ai mis dans les tableux($tab1 et $tab2 ) et qu'après j'ai la possibilité de modifier les élément de chaque liste  par les bouton >><ajouter et <<<Enlever.
Mon problème est le suivant:
    Je n'arrive pas avec ce code à afficher mes valeurs de la ListeDroite.
    Parcontre si dans si dans la deuxieme select je mets name="ListeDroite[]" , l'affichage de la ListeDroite se fait au chargement du formulaire mais la fonction Deplacer() ne marche plus.

Si vous avez des idée  pour m'aider à débloquer cette situation.

Merci d'avance.

Daris
vendredi 27 juin 2008 à 10:50:55 | Re : Liste double et javascript

bultez

Membre Club


Bonjour,
pas tout suivi, mais si tu nommes ta liste ListeDroite[], quand tu l'utilises
il ne faut pas mettre this.form.ListeDroite !
peut-être this.form['ListeDroite[]']
ou document.name_du_formulaire['ListeDroite[]']

pour le reste, traiter les select,  si tu veux un exemple : ici

                Cordialement            Bul         [mon Site]     [M'écrire]
vendredi 27 juin 2008 à 11:34:44 | Re : Liste double et javascript

daris

Bonjour, Merci pour ton attention.
Effectivement en faisant this.form['ListeDroite[]'] ca marche parcontre je pense qu'il faut aussi modifier l'ecriture de ListeDroite dans  poster liste car javascript me signale une erreur de syntax que je n'arrive pas à debeguer.

// On compte le nombre d'item de la liste select
    NbCol1 = document.forms['formulaire'].ListeDroite.length;

L'erreur :  document.forms['formulaire'].ListeDroite as no properties se porte sur la ligne ci dessus

Merci d'avance
vendredi 27 juin 2008 à 11:44:54 | Re : Liste double et javascript

bultez

Membre Club
Réponse acceptée !
"bien entendu"    ;o)

   var NbCol1 = document.formulaire['ListeDroite[]'].length

   document.formulaire['ListeDroite[]'].options[a].selected = true;
  
... et autres 'il y a.


                Cordialement            Bul         [mon Site]     [M'écrire]
vendredi 27 juin 2008 à 12:03:25 | Re : Liste double et javascript

daris

Merci beaucoup pour ton aide bultez
vendredi 27 juin 2008 à 12:40:01 | Re : Liste double et javascript

David78390

J'avais vu ce bout de code hier soir, mais il y avait beaucoup de chose
qui manquait:
forms['formulaire']   mais  formulaire n'existe pas?
this.form.listegauche ressort des erreurs aussi (cf bultez).

En plus pour ajouter, et ou supprimer des options dans un select,
il y a des fonction déjà existante.

Mais bon l'idée du code m'a paru sympa et je m'y suis penché;
voila donc une solution en version js pur, a toi de voir l'adaptation avec php:

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
    function Ajout_Supprime_2(P_M)
    {
        if(P_M=="+")
        {
        //Mise a jour du Select:
            //Nombre d'option deja present
        var NbsOptionExistant = document.getElementById("ListeComplete").length;
        var NewNbsOption=NbsOptionExistant+1;
            //Ajout d'une option
        var newOPT=document.createElement("OPTION");
            //Ajout du texte de cette option
        newOPT.text=texte.value;
            //insertion de l'option
        ListeComplete.add(newOPT,4);
        }

        if(P_M=="-")
        {
        var i=0,j=0;
        for(i=0;i<document.getElementById("ListeComplete").length;i++)
            {
            if(document.getElementById("ListeComplete").options[i].selected==true)
                {ListeComplete.remove(i);j--;}
                else j++;
            }
        if(i==j) alert("Aucune option selectionnee");
        }
    }
</SCRIPT>

<BODY>
                ......<br>

<table align="center" cellspacing="0" cellpadding="0">

<tr>
    <td colspan="2"><br><br>Un tableau avec posibilité d'ajouter et ou d'enlever (1 ou plus d'un coup)</td>
</tr>
<tr>
    <td>
      <select align="top" id="ListeComplete" name="ListeComplete" multiple="multiple" size="10"

style="width:200px">
        <OPTION  VALUE=0>n°0</OPTION>
        <OPTION  VALUE=1>n°1</OPTION>
        <OPTION  VALUE=2>n°2</OPTION>
        <OPTION  VALUE=3>n°3</OPTION>
      </select>
    </td>
    <td>
        <input type="Text" name="texte" value="tapper l'option a inserer" align="LEFT" size="30"

maxlength="10">
        <INPUT type="button" value="Ajouter ..." onClick="Ajout_Supprime_2('+');" >
        <br><br>
        <textarea name="instruction" cols="30" rows="3" wrap="VIRTUAL">Cliquer sur l'option a

supprimer puis appuyer sur Enlever</textarea>
        <INPUT type="button" value="... Enlever" onClick="Ajout_Supprime_2('-');" >
    </td>
</tr>
</table>
</body>
</html>


P.S: la fonction ajout ne marche pas sous firefox

@+

L'entre-aide est la force de notre savoir
vendredi 27 juin 2008 à 13:03:32 | Re : Liste double et javascript

bultez

Membre Club
passer par le ID est une alternative.
>>la fonction ajout ne marche pas sous firefox
pas de raisons ( mais pas contrôlé le script ! )
une erreur doit être signalée :
.--------.----------------------------------------------------------.
|FireFox |regarder la "console d'erreurs" |
| | Outils / Console d'erreurs |
| | et mieux, : télécharger FireBug |
.--------.----------------------------------------------------------.


                Cordialement            Bul         [mon Site]     [M'écrire]
vendredi 27 juin 2008 à 17:31:22 | Re : Liste double et javascript

David78390

Merci bultez,
Je regarderais plus en profondeur ce w-e avec la console

@+

L'entre-aide est la force de notre savoir

vendredi 27 juin 2008 à 17:46:10 | Re : Liste double et javascript

bultez

Membre Club
sinon reviens et dis nous... on regardera de plus près.

                Cordialement            Bul         [mon Site]     [M'écrire]
mardi 1 juillet 2008 à 13:34:43 | Re : Liste double et javascript

David78390

Bon me reloiva, apres un petit bout de temps.

L'erreur signalé par la console sous FireFox est:
ligne           newOPT.text=texte.value;
erreur :       text is not define
Il semblerais que le texte tapé dans l'input text n'est pas pris en compte.

alors que tout passe bian sous IE.

Y-a-t-il une subtilité pour FF au niveau de l'input?

Merci de me le dire si tu connait bultez

P.S: petite correction dans la partie du script:
            //insertion de l'option
        ListeComplete.add(newOPT,4);  
Il faut mettre NewNbsOption au lieu de 4


L'entre-aide est la force de notre savoir


1 2

Cette discussion est classée dans : formulaire, liste, options, l1, listedroite


Répondre à ce message

Sujets en rapport avec ce message

Recupérer le contenu de cette liste [ par voge ] Voila j'essaye d'utiliser ce petit script : Choix Mails <!--script de déplacement d'une liste a Liste déroulante [ par piep14 ] Bonjour, j'essais de faire une newsletter pour mon site ! J'ai fait une liste déroulante qui contient les adresses emails. recupération d'élément d'une liste [ par val_lala ] Bonjour,je commence tout juste le javaScript! et la je bloque...J'ai fait deux listes et on peut selectionner un element de la premiere liste et il va Checkbox et formulaire dynamique [ par petitelarve ] bonjour, Je cherche un moyen d'afficher des liste et  des textearea suite au check sur une checkbox.Par exemble , si on click sur la checkbox Auteur, basculer des elements d'une liste a l'autre [ par attentio ] Bonjour,voila j'ai un script qui me permet de basculer des elements d'une liste a l'autre, ca fonctionne mais je voudrais utilser non pas le nom mais script de verification formulaire [ par nacer_1954 ] SVP  j'ai un formulaire ou il ya des boutons radios et un champ de sais verification formulaire [ par nacer_1954 ] SVP  j'ai un formulaire ou il ya des boutons radios et un champ de saisie et une liste deroulante. j'ai des affaire qui sont dans une base de don Problème tableau à bascule : comment recuprer les infos [ par evenkil ] Bonjour, j'ai un tableau à bascule et j'aimerai y récuperer les infos sélectionnée, mais je n'y arrive pas.En effet lors de la soumission du formulair Fonction Javascript [ par yacouba85 ] Bonjour je voulais savoir s'il était possible d'insérer du code PHP dans une fonction javascript? comme ceci: function sauvegarder(formulaire, liste) Demande d'aide sur les formulaires en Javascript [ par kadran ] Bonjour et Bonsoir à tous ! Si je poste ce message aujourd'hui c'est parce que je suis bloqué sur un code depuis 7 jours et j'espère pouvoir trouver


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

Photothèque

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,374 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales