Artikel - Detailansicht

Icon Aktuelles Userfreundliche Formulare mit Javascript 1

Mit normalem HTML hat man nicht sehr viele Möglichkeiten bedienfreundliche Formulare zu gestallten. Es gibt zwar einige Java-Applets, die komplexere Formularoberflächen zur Verfügung stehen, die Benutzung von Java-Applets in Webseiten ist jedoch nicht immer sehr beliebt (Ladezeit, Netscape-Gedenkminute bei Start der VM).
Dass man mit Selectboxen und etwas Javascript schon recht nette Formularelemente selber erzeugen kann, soll dieser Artikel zeigen.

Als erstes Beispiel soll eine Liste dienen, der man einzeln neue Texte hinzufügen und wieder entfernen kann:





Der Javascript-Code mit dem Formular sieht dann so aus:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
function sel(){
  if (document.fo.liste.length==0) {
      //submit nur, wenn ein eintrag vorhanden!
alert("Kein Eintrag gemacht!");
return false;
}
  document.fo.hid_liste.value=document.fo.liste.options[0].value;
     for(i=1;i<document.fo.liste.length;i++){
        document.fo.hid_liste.value=
        document.fo.hid_liste.value+","+
        document.fo.liste.options[i].value;
     }
//for
   return true;
}//function

function del(){
   //gewaehlter eintrag wird geloescht
   if (document.fo.liste.selectedIndex == -1) {
      alert('nichts gewählt!');
      return
   }
   //array zur speicherung der nichtgewaehlten eintraege
   arr=new Array(document.fo.liste.length-1);
   idx=0
   for(i=0;i<document.fo.liste.length;i++){
      if (!(document.fo.liste.options[i].selected)) {
         //nichtgewaehlte eintraege zwischenspeichern
         arr[idx]=document.fo.liste.options[i].value;
         idx++;
       }
   }
//for

   document.fo.liste.options.length=0; //selectbox loeschen
   for (var i=0; i<arr.length; i++) {
      //nichtgewaehlte eintraege wieder reinkopieren
      document.fo.liste.options[document.fo.liste.options.length]=
      new Option(arr[i],arr[i]);
   }
   document.fo.liste.selectedIndex=-1;

}//function

function ins(){
   //neuer eintrag wird eingefuegt
   ret=window.prompt("Was?",""); //usereingabe abfragen
   if (ret==null) return (false);
   //test in die selectbox schreiben
   document.fo.liste.options[document.fo.liste.options.length]=
   new Option(ret,ret);
}
</SCRIPT>
<form name="fo" onSubmit="return sel()" action="foo.cfm" method="post">
    <input type="hidden" name="hid_liste" value="">
    
    <select name="liste" size="6" multiple>
   <option><--------------------->
    </select>
    <br>
    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
    <!--
    document.fo.liste.options.length=0;
    //-->
    </SCRIPT>
  
    <input type="button" value="hinzufügen" onClick="javascript:ins()">
    <br>
    <input type="button" value="entfernen" onClick="javascript:del()">
    <br>
   <input type="submit" value="abschicken">
</form>

Mit dem 'Einfügen'-Button (ruft die Funktionm ins() auf) kann man jetzt über eine Javascript-Eingabebox neuen Einträge in die Selectbox einfügen. Dem dem 'Entfernen'-Button (ruft die Funktion del() auf) lassen sich gewählte Einträge wieder entfernen.
Da man nicht einzelne Einträge aus einer Selectbox löschen kann, werden beim Entfernen von Einträgen alle nicht zum löschen gewählten Einträge im Array arr gespeichert, dann die ganze Selectbox gelöscht und anschliessend die in arr gespeicherten Elemente wieder neu in die Selectbox geschrieben (del()).

Jetzt muss nur noch sichergestellt werden, dass die Einträge der Selectbox beim Abschicken des Formulars auch an die nächste Seite übertragen werden. Das werden sie aber nur, wenn alle Einträge beim Submit auch selektiert wären. Das sind sie aber nicht und der Benutzer soll die Einträge auch nicht noch nachträglich selektieren müssen.
Damit die Daten aber trozdem übertragen werden, kann man folgenden Workaround benutzen: Im Im onSubmit-Event des Formulars wird eine Function aufgerufen (hier sel()) die alle Einträge der Selectbox als kommaseparierte Liste in ein HIDDEN-Element schreibt (hid_liste).
Man muss also bei der Auswertung des Formulars das HIDDEN-Element auswerten.



Steffen Goldfuss steffen@goldfuss.de - 06.05.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