SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist Alluvian's Avatar
    Join Date
    Jan 2007
    Location
    Orlando, FL
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    form help. Selecting 1-5 items from a list of 125

    I have a database of 125 items, which I need to tie to another database in an entry form.

    I need the user to pick several items from this database. I can output them all to a listbox in php easy enough, but there is no good way I can figure out how to select a handful of them on a form.

    Control clicking to multiselect while adjusting a slidebar is so cumbersome.

    I was wondering if there is a way to have the list of entries in one listbox on the left, and an empty listbox on the right with add/remove buttons in the middle?

    Even if I could get this to work, I would have to make sure all the items moved to the right were 'selected' so that they get passed on submit...

    Any suggestions for an interface to select a few from a large list as part of an entry form? What I want passed on submit is a list of IDs from the original database (the value field).

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why not use checkboxes instead?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a little example of linked lists
    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    
    <title>Nouvelle page 1</title>
    <script type='text/javascript' >
    
    
    window.onload=function(){
    
    
    var voiture=[];
    var t2=[];
    var ind=0;
    var sel0, sel;
    var m=document.getElementById("marques");
    var mod=document.getElementById("mods");
    var coul=document.getElementById("couls");
    
    function Car(marque, modele, couleur, ind) {
       this.marque=marque;
       this.modele=modele;
       this.couleur=couleur;
       this.ind=ind;
       this.col=[];
       this.spl=couleur.split(';');
       for(i=0;i<this.spl.length;i++){
          this.col.push(this.spl[i])   
          }
    }
    
    function AddCar(marque, modele, couleur) {
       voiture.push(new Car(marque, modele, couleur, ind));
       ind++;
    }
                     
    AddCar("Alpha Roméo", "143", "rouge;vert;bleu;noir");
    AddCar("Alpha Roméo", "155", "jaune;blanc;gris");
    AddCar("Renault", "laguna", "jaune;blanc;gris");
    AddCar("Renault", "twingo", "rose;rouge;indigo");
    AddCar("Citroen", "C5" , "bleu;magenta;noir;vert;jaune")
    
    
    
    
       
    
       for(i in voiture){
                if(t2.join().search(voiture[i].marque)==-1){
                  t2.push(voiture[i].marque);
             sel=document.createElement("option");
             m.appendChild(sel);
             sel.text=voiture[i].marque;
             sel.value=voiture[i].marque;
             
                }
          }
        
       m.onchange=function(){
          while(mod.lastChild){mod.removeChild(mod.lastChild)}
    
          if(this.value!="rien"){
             mod.style.display="block";
             sel0=document.createElement("option");
             mod.appendChild(sel0);
             sel0.text="Choisissez";
             sel0.value="rien";
                      
             for(i in voiture){
                if(voiture[i].marque==this.value){
                   sel=document.createElement("option");
                   mod.appendChild(sel);
                   sel.text=voiture[i].modele;
                   sel.value=voiture[i].ind;
                   
                }
             }
          }
          else{
             mod.style.display="none";
          };
          
          coul.style.display="none";
    
       }
    
       mod.onchange=function(){
          while(coul.lastChild){coul.removeChild(coul.lastChild)}
    
          if(this.value!="rien"){
             coul.style.display="block";
             sel0=document.createElement("option");
             coul.appendChild(sel0);
             sel0.text="Choisissez";
             sel0.value="rien";
    
             for(i in voiture[this.value].col){
                sel=document.createElement("option");
                coul.appendChild(sel);
                sel.text=voiture[this.value].col[i];
                sel.value=this.value;
             }
          }
          else{
             coul.style.display="none"
          }
       }
    
       coul.onchange=function(){
          if(this.value){
             alert(voiture[this.value].marque+" "+voiture[this.value].modele+" "+this.options[this.options.selectedIndex].text)
          }
       }
    
    }
    
    </script>
    
    </head>
    
    <body>
    
    <select style="width:200px" id="marques">
    <option value="rien">Choisissez</option>
    </select>
    
    <select style="width:200px;display:none" id="mods">
    <option>Choisissez</option>
    </select>
    
    <select style="width:200px;display:none" id="couls">
    <option>Choisissez</option>
    </select><br/>
    <input id="choix" type="button" onclick="ValidSelection()" value="Afficher Choix" style="display:none"/>
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •