brauchbar.de - WebDesign, Programmierung,Development in HTML, CSS, Javascript, PHP, Perl und mehr

[ Startseite | Artikel : HTML · JavaScript · CSS · Perl · Usability · Sonstiges | Services | Über ]


verwandte Artikel und Seiten

DropDown-Box-Navigation mit PHP und Javascript

von Thomas Salvador.

Wir haben bereits mehrere Möglichkeiten besprochen, eine DropDown-Box-Navigation zu realisieren. Aber wirklich perfekt war keine:

Hier finden Sie nun die optimale Implementierung, die das beste aus beiden Welten realisiert: Funktioniert immer und reagiert möglichst rasch.

Das Layout

Hier bleibt es bei der PHP-Version. Wir haben ein Formular mit einer DropDown-Box. Die Optionen dieser DropDown-Box sind mit den Zielen beschriftet, ihre Werte sind die Zieladressen.

Zusätzlich jedoch integrieren wir die Javascript-Version: Wir übernehmen die dortige onchange-Funktion in den select-Tag:

<form action="URL des programms" method="post">
  <select name="goto"
    onChange="location.href=this.options[this.selectedIndex].value">
    <option value="http://www.brauchbar.de/index.html">Bitte wählen
    <option value="http://www.brauchbar.de/index.html">Homepage
    <option value="http://www.brauchbar.de/wd/index.html">Newsletter
    <option value="http://www.brauchbar.de/wd/online/index.html">- Archiv
  </select>

<input type=submit value="go">
</form>
Das genügt nach wie vor zur Demonstration.

Natürlich muss nun als action das Programm eingetragen werden, welches die Formulardaten verarbeiten wird. Als Method sollte post verwendet werden, damit die Werte nicht in der Adresszeile erscheinen.

Das Programm

Das Programm ist die PHP-Version aus dem vorhergehenden Artikel. Natürlich könnten Sie auch die Perl-Version oder eine andere Sprache nutzen:

<php

if (isset($_POST['go'])) {
  header('Location: '.$_POST['go']);
} else {
  header('Location: '.$_SERVER['HTTP_REFERER']);
}

// --- eof

Das war es schon. Wir haben eine hybride Version.

Analyse

Vorteil

Funktioniert immer, da unabhängig vom Client der Besucher.

Wenn der Besucher Javascript aktiviert hat, wird direkt nach Auswahl rasch reagiert und ohne Server-Kontakt weitergeleitet.

Nachteil

Keine.


Verwandte Artikel und Seiten



brauchbar web
Diese Site anlinken. Artikel zu CSS | HTML | JavaScript | Perl | Usability | Sonst. | nach Ausgabe.

Copyright © 1999-2015 Thomas Salvador und brauchbar.de . Alle Rechte vorbehalten. Gehostet bei all-inkl.
Reproduktion, ganz oder in Teilen, nur mit schriftlicher Zustimmung von Thomas Salvador. Impressum · Datenschutzerklärung · Kontakt.

zum Inhaltsverzeichnis der 24. Ausgabe.

Linken Sie bitte zu der festen Adresse http://www.brauchbar.de/wd/artikel/83.html .