Artikel - Detailansicht

Icon Aktuelles Userfreundliche Formulare mit Javascript 2

Im ersten Teil des Artikels wurden einzelne Einträge einer Selectbox zugewiesen, wobei der Benutzer die Einträge selbst eingeben konnte. Oft sieht man in Programmen die Möglichkeit, aus einer Liste von vorhandenen Möglichkeiten, Werte einer anderen Liste zuzuweisen, wobei gewählte Werte aus der Ausgangsliste verschwinden.
Das zweite Beispiel zeigt, wie dieses Verhalten mit Javascript simuliert werden kann:



Dazu der entsprechende Code:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function sel(){
   if (document.fo.liste1.length==0){
      //nur, wenn ein eintrag vorhanden!
      alert("Kein Eintrag gemacht!");
      return false;
   }


   //werte in hidden-element uebertragen
   document.fo.hid_liste.value=document.fo.liste1.options[0].value;
   for(i=1;i<document.fo.liste1.length;i++){
      document.fo.hid_liste.value=document.fo.hid_liste.value+","+
      document.fo.liste1.options[i].value;
   }

  
   //und abschicken
  return true;
}


function swap(outBox,inBox){

   //schiebt selektierten wert von outBox  nach inBox
   if (outBox.selectedIndex==-1) return;

   var wert=outBox.options[outBox.selectedIndex].value;
   inBox.options[inBox.options.length]=new Option(wert,wert);
   arr=new
   Array(outBox.length-1);
   idx=0
   for(i=0;i<outBox.length;i++){
      if (!(outBox.options[i].selected)) {
         arr[idx]=outBox.options[i].value;
         idx++;
      }
   }//for
  
   outBox.options.length=0;

   for (var i=0; i<arr.length; i++) {
      outBox.options[outBox.options.length]=new Option(arr[i],arr[i]);
   }
   outBox.selectedIndex=-1;

}
//-->
</SCRIPT>

<form name="fo" action="x.cfm" onSubmit="return sel()" method="post">
   <input type="hidden" name="hid_liste" value="">
   <table>
      <tr>
          <td>
              <select name="liste1" size="6">
     option><--------------------->
  </select>
            <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
              <!--
              document.fo.liste1.options.length=0;
              //-->
             </SCRIPT>
          </td>
          <td>
              <input type="button" value="<<"
                onClick="javascript:swap(document.fo.liste2,document.fo.liste1)">
              <br>
              <input type="button" value=">>"
                onClick="javascript:swap(document.fo.liste1,document.fo.liste2)">
          </td>
          <td>
                 <select name="liste2" size="6">
                 <option value="Aqua">Aqua
                 <option value="Black">Black
                 <option value="Blue">Blue
                 <option value="Fuchsia">Fuchsia
                 <option value="Gray">Gray
                 <option value="Green">Green
                 <option value="Lime">Lime
                 <option value="Maroon">Maroon
                 <option value="Navy">Navy
                 <option value="Teal">Teal
              </select>
          </td>
      </tr>
      <tr>
          <td colspan="3">
              <input type="submit">
          </td>
      </tr>
   </table>
</form>


Die Funktion ist ähnlich wie im ersten Teil erklärt. Auch hier werden beim Abschicken des Formulars die Werte aus der rechten Selectbox in ein HIDDEN-Feld übertragen.



Steffen Goldfuss steffen@goldfuss.de - 06.03.2000

Zurück


Das deutsche ColdFusion-Forum cfml.de ist das Portal für Einsteiger und Experten zum Thema ColdFusion und der ColdFusion Markup Language (CFML).

© 2017 Webdesign & Hosting: CHC ONLINE Kassel | SOLVA Content-Management-System CMS
Urlaub-Angebote.de - Urlaub mit Bestpreis-Garantie buchen