molily: Popup-Menu

Beitrag lesen

Hallo nochmal,

Ich habe nicht alles verstanden, da ich noch nicht so lange mit JavaScript arbeite.

Ich habe auch noch nicht mit Formularen in der Weise gearbeitet (sie über JavaScript ansprechen/auslesen), habe es aber gerade in Selfhtml nachgeschlagen. :)

Natürlich möchte ich, wenn es geht alle Anwender mit einschließen. Könntest du mir erklären wie es anstelle, dass die gewünschten Werte an ein Skript übergeben werden, welches dann in einem Popup-Fenster mit Info "width=310,height=180,resizable=no,scrollbars=no" erscheint und mir darin zum Beispiel die Datei "meier.html" anzeigt.

Um auch die Benutzer zufriedenzustellen, welche JavaScript deaktiviert haben oder deren Browser es nicht unterstützen (dazu gehören auch Suchmaschinen, auch wenn diese dem Formular meist nicht folgen dürften), muss man eine kleine Brücke einbauen, denn über das Formular mit dem Dropdownfeld kann man nur auf *eine* Seite leiten, diese wird bei Formularen gewöhnlicherweise mit dem action-Attribut angegeben. Für Benutzer ohne JavaScript wäre folgendes Konzept passend:

Seite mit Formular --[gibt Parameter an]--> Weiterleitungsskript --[leitet weiter zu]--> meier.html/schulz.html/schneider.html

Im Falls dass JavaScript aktiviert/verfügbar ist, wird der Zwischenschritt nicht benötigt:

Seite mit Formular --[öffnet Popup-Fenster mit]--> meier.html/schulz.html/schneider.html

Das Formular wird genutzt, um den Parameter menu an das Weiterleitungsskript über die GET-Methode zu übermitteln (...was ja die eigentliche Aufgabe eines Formulars ist). Das Weiterleitungsskript muss ein serverseitiges CGI-Programm bzw. -Script sein, welches den Parameter auslesen kann. Im folgenden Beispiel habe ich die Skriptsprache PHP verwendet und die Datei rd.php genannt. Der Inhalt der Datei rd.php wäre wie folgt:

<?php
if (isset($HTTP_GET_VARS['menu']) and !empty($HTTP_GET_VARS['menu']))
 header('Location: '.$HTTP_GET_VARS['menu']);
else
 echo('Kein Parameter angegeben!');
?>

Über $HTTP_GET_VARS['menu'] liest man den Parameter aus, welcher der Datei über das Formular übergeben wurde (/rd.php?menu=meier/schulz/schneider.html), das wäre in dem Fall der Dateiname. Das Skript sendet einen HTTP-Header namens Location, welche ein zurücksenden von 302 Found bewirkt. Der Browser navigiert daraufhin zur angegebenen Datei, also fordert meier/schulz/schneider.html vom Server an.

Die Verwendung on PHP setzt natürlich voraus, dass der Server eine PHP-Modul bzw. -Interpreter installiert hat. Genauso kannst du jede andere CGI-fähige Sprache verwenden (Perl, ASP, JSP, Python, C, Brainfuck[*] ;)), je nachdem wie du dich auskennst.

[*] Es gibt sogar ein Brainfuck-Apache-Modul. ;) http://modbf.sourceforge.net/ (Du musst nicht wissen, was das bedeutet.)

Die zugehörige JavaScript-Funktion, welche das Weiterleitungsscript nicht benötigt, sähe so aus:

<script type="text/javascript">
function oeffne () {
 if (!document.form.menu.options[0].selected) {
  var url=document.form.menu.options[document.form.menu.selectedIndex].value;
  var fenster=window.open(url, 'fenster', 'width=310,height=180,resizable=no,scrollbars=no');
  fenster.focus();
 }
 return false;
}
</script>

Hier wird wie schon in der ersten Version direkt ein Popup-Fenster mit der gewünschten Datei geöffnet.
Übrigens hatte ich einen Fehler beim ersten Posting gemacht, die Funktion muss immer false zurückgeben, damit in jedem Fall verhindet wird, das das Formular abgesendet wird, wenn JavaScript aktiviert/verfügbar ist.

Das Formular sähe so aus:

<form name="form" action="rd.php" target="_blank" onsubmit="return oeffne()">
<select name="menu">
<option selected="selected" value="">Bitte PLZ wählen...</option>
<option value="meier.html">Herr Meier</option>
<option value="schulz.html">Herr Schulz</option>
<option value="schneider.html">Herr Schneider</option>
</select>
<input type="submit" value="OK">
</form>

Als action ist rd.php angegeben, das Weiterleitungsskript also. Hier wird angenommen, dass es im selben Verzeichnis liegt.
Ich habe angenommen, dass du auch bei Benutzern ohne JavaScript ein neues Fenster öffnen willst, deshalb habe ich target="_blank" für das form-Element notiert. Ich würde davon abraten, auch weil der Back-Button des Browsers funktionsunfähig wird, aber ich kenne deine Seitenstruktur nicht, das musst du entscheiden.

Es wäre klug, in der Zieldatei (meier/schulz/schneider.html) einen Link zurück zur Seite mit dem Auswahlformular zu legen, wenn dies nicht sowieso der Fall ist. Für Benutzer mit JavaScript wäre eine Link zum Schließen des Fensters hilfreich. Für Benutzer ohne JavaScript kannst du einen mit <noscript><p><a href="...">Zurück zur Auswahl/XYZ...</a></noscript> einbauen, dieser würde nur sichtbar, wenn JavaScript nicht aktiviert/verfügbar ist.

So, ich hoffe, ich habe alles bedacht... frage ruhig noch einmal wenn ich etwas unklar formuliert habe oder Fragen sind...

Mathias