Thema: Dropdown Menus mit Abschick-Knopf


Seite durchsuchen:
Home


zurück zur Übersicht

Diskussionsgruppe: Webseiten/HTML

Hallo erstmal,

ich habe Da ein sehr kniffeliges Probelm bei der "Programmierung" einer Index-Seite. Also vorab: Ich habe von Html-Programmieren keinerlei Ahnung und verwende MS FrontPage. Nun wollte ich mal all meine Fotos in einer Art Browsergestützter Datenbank ablegen. Nun zu meiner Frage:

Ich habe vor mir eine kleine Suchfunktion einzubauen, die mithilfe von Dropdownmenus zur Funktion gebracht werden soll. Jetzt habe ich z.B. das Dropdownmenu mit Namen Orte (Bahnhof, Lokschuppen, Drehscheibe, Volle Fahrt, usw.). Desweiteren habe ich jetzt noch ein Dropdownmenu mit dem Namen Baureihe (52, 114, 78, 56, 89, usw.). Es gibt noch ein paar andere Dropdownmenus aber es soll ja nur ein beispiel sein um zu erläutern was ich vorhabe.
Das Problem besteht darin, wie kriege ich es hin, dass wenn ich z.B. Drehscheibe aus dem Feld auswähle und in dem anderen DropDownmenu 52, dann soll es einen Abschick-Knopf geben, der wenn ich Ihn betätigt habe mir die Seite ausgibt, die ich mit Miniaturansichten bereits versehen habe und auf die auchnur oben genannte Kriterien entsprechen?

Man müsste ja im prinzip 1. Die Dropdowns so verknüpfen, das je nachdem was ausgewählt wurde der Absenden-Knopf mit der entsprechenden htm-Datei auf meiner Festplatte verknüft ist.

Über Hilfe würde ich mich sehr freuen.

Vielen Dank für Eure Aufmerksamkeit und Arbeit.

mfg
Adolf

 Von: NixGeht Datum: 28.04.2007, 01:49

alle Antworten zu dieser Frage


Antwort 1 von rfb vom 28.04.2007, 09:08
Zitat:
verwende MS FrontPage.
FP ist immer ein Fehler - dies Programm bereitet gerade Anfängern mehr Probleme als damit lösbar sind.

Zitat:
einer Art Browsergestützter Datenbank
was genau soll das sein? Ohne den Aufbau dieser "Datenbank" zu kennen würde ich jetzt einfach sagen:
JavaScript: mit onchange im Auswahlmenü das onclick-Attribut des Button dynamisch ändern.
Beinhaltet natürlich alle Probleme einer JavaScript-Navigation, insbesondere das Problem, dass für User ohne JavaScript ein Ersatz bereitstehen muss.

Antwort 2 von NixGeht vom 28.04.2007, 15:04
Das Problem besteht eigentlich nur darin, dass der Button nur mit der Webseite verlinkt werden soll, die dem in den 2 Dropdwonmenus ausgewählten Schlüsselwörtern entspricht. Vielleicht ist mein Vorhaben so einfacher zu verstehen. Mit JavaScript sollte es keine Probleme gebe, da die Seiten sowieso nicht ins Internet gelangen sondern nur lokal auf meiner Festplatte dümpeln.

Vielen Dank für Deine Hilfe
Adolf

Antwort 3 von rfb vom 28.04.2007, 18:50
einfach ausprobieren - die Schlüsselwort zum Erkennen der "richtigen" Datei liegen in den value-Attributeinträgen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function init() {
for (var j=1;j<3;j++) {
document.getElementById("liste"+j).onchange=function() {
var l1=document.getElementById("liste1");
var l2=document.getElementById("liste2");
var a1=l1.selectedIndex;
var a2=l2.selectedIndex;
if (a1>-1 && a2>-1) {
a1=l1.options[a1].value;
a2=l2.options[a2].value;
document.getElementById("derbutton").onclick=function () {
location.href=a1+a2+".htm";
}}}}}
window.onload=function() {
init();
}
</script>
</head>
<body>

<h1>Test</h1>
<form action="">
<p>
<select name="liste1" id="liste1">
<option value="a1">Heino</option>
<option value="a2">Michael Jackson</option>
<option value="a3">Tom Waits</option>
<option value="a4">Nina Hagen</option>
<option value="a5">Marianne Rosenberg</option>
</select>
</p>
<p>
<select name="liste2" id="liste2">
<option value="b1">Heino</option>
<option value="b2">Michael Jackson</option>
<option value="b3">Tom Waits</option>
<option value="b4">Nina Hagen</option>
<option value="b5">Marianne Rosenberg</option>
</select>
</p>
<input type="button" id="derbutton" value="Test">
</form>
</body>
</html>

PS: zu meiner Rehabilitation - die Listeneinträge stammen aus SelfHTML

Antwort 4 von NixGeht vom 28.04.2007, 22:43
Vielen herzlichen Dank rfb, nichtnur das Du mir sehr geholfen hast, sondern auch für die Höchst interessante seite, die Du mir da verlinkt hast. Jetzt hat es geklappt.

Vielen herzlichen Dank nochmals :-)

Jetzt kann ich ja weiterarbeiten :-)

Ergebens
Adolf

Antwort 5 von NixGeht vom 29.04.2007, 03:11
Hallo nochmals,
Habe da einen kleinen Nachtrag zu liefern: Könntest du mir oben gennaten code als fertige webseite zukommen lassen? ich habe da einige Copy&Paste Probleme mit Frontpage (wenn ich auf Quelltext umschalte kopiert er mir andere Zeichen als die obigen). Langsam verstehe ich was Du meinst mit Frontpage ;-). Also den Quellcode oben einfach als Quelltext verwenden und mir dann eine fertige htm-Seite senden oder irgentwo hochladen. Dann kann ich sie in frontpage laden und von da kopieren.

Entweder stell ich mich zu dieser Uhrzeit zu dumm an oder hier geht nix...

Entschuldigung für die Umstände

Adolf

Antwort 6 von rfb vom 29.04.2007, 09:15
einfacher:

kopiere den Code in den Windows-Editor (im Menü Start-Programme-Zubehör-Editor) und speichere die Datei als sonstwas.htm auf deinem Rechner.

Antwort 7 von NixGeht vom 29.04.2007, 15:55
Hallo,

es hat geklappt vielen Dank dafür. Bin jetzt auch gesehen und verstanden, wie ich das mit den verlinkten webseiten anstellen muss. Nun sollte es keine Probleme mehr geben. Scheinst ja wirklich Ahnung vom html-Programmieren zu haben. Alles selber beigebracht oder auch Kurse gemacht? Interessiere mich nämlich auch sehr für html.

mfg
Adolf

Antwort 8 von NixGeht vom 29.04.2007, 19:38
Malwieder ich (will Dich ja net nerven), aber kannst du mir verraten was ich mit dem Code falsch gemacht habe? Ich habe ihn nun mehr oder weniger meinen Bedürfnissen angepasst und habe nun nen Skriptfehler in zeile 15 (Bezeichner erwartet). Und der absenden Knopf funktioniert auchnichtmehr :-(

Hier der Code (hoffe es ist in Ordnung ihn hier anzufügen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>

<HEAD>
<META NAME="GENERATOR" CONTENT="Microsoft FrontPage 5.0">
<META NAME="ProgId" CONTENT="FrontPage.Editor.Document">
<TITLE>Test</TITLE>
<SCRIPT TYPE="text/javascript">
function init() {
for (var j=1;j<3;j++) {
document.getElementById("liste"+j).onchange=function() {
var l1=document.getElementById("liste1");
var l2=document.getElementById("liste2");
var 13=document.getElementById("liste3");
var 14=document.getElementById("liste4");
var 15=document.getElementById("liste5");
var 16=document.getElementById("liste6");
var 17=document.getElementById("liste7");
var a1=l1.selectedIndex;
var a2=l2.selectedIndex;
var a3=13.selectedIndex;
var a4=14.selectedIndex;
var a5=15.selectedIndex;
var a6=16.selectedIndex;
if (a1>-1 && a2>-1 && a3>-1 && a4>-1 && a5>-1 && a6>-1) {
a1=l1.options[a1].value;
a2=l2.options[a2].value;
a3=13.options[a3].value;
a4=14.options[a4].value;
a5=15.options[a5].value;
a6=16.options[a6].value;
document.getElementById("derbutton").onclick=function () {
location.href=a1+a2+a3+a4+a5+a6+".htm";
}}}}}
window.onload=function() {
init();
}
</SCRIPT>
</HEAD>

<BODY>

<H1>Test</H1>
<FORM ACTION>
<P><SELECT NAME="liste1" ID="liste1">
<OPTION VALUE="a1">-------any-------</OPTION>
<OPTION VALUE="a2">Heino</OPTION>
<OPTION VALUE="a3">Michael Jackson</OPTION>
<OPTION VALUE="a4">Tom Waits</OPTION>
<OPTION VALUE="a5">Nina Hagen</OPTION>
<OPTION VALUE="a6">Marianne Rosenberg</OPTION>
</SELECT> </P>
<P><SELECT NAME="liste2" ID="liste2">
<OPTION VALUE="b1">-------any-------</OPTION>
<OPTION VALUE="b2">test1</OPTION>
<OPTION VALUE="b3">test2</OPTION>
<OPTION VALUE="b4">test3</OPTION>
<OPTION VALUE="b5">test4</OPTION>
<OPTION VALUE="b6">test5</OPTION>
<OPTION VALUE="b7">test6</OPTION>
</SELECT> </P>
<P><SELECT NAME="liste3" ID="liste3">
<OPTION VALUE="c1">-------any-------</OPTION>
<OPTION VALUE="c2">test1</OPTION>
<OPTION VALUE="c3">test2</OPTION>
<OPTION VALUE="c4">test3</OPTION>
<OPTION VALUE="c5">test4</OPTION>
</SELECT> </P>
<P><SELECT NAME="liste4" ID="liste4">
<OPTION VALUE="d1">-------any-------</OPTION>
<OPTION VALUE="d2">test1</OPTION>
<OPTION VALUE="d3">test2</OPTION>
<OPTION VALUE="d4">test3</OPTION>
<OPTION VALUE="d5">test4</OPTION>
<OPTION VALUE="d6">test5</OPTION>
<OPTION VALUE="d7">Test6</OPTION>
</SELECT> </P>
<P><SELECT NAME="liste5" ID="liste5">
<OPTION VALUE="e1">-------any-------</OPTION>
<OPTION VALUE="e2">test1</OPTION>
<OPTION VALUE="e3">test2</OPTION>
<OPTION VALUE="e4">test3</OPTION>
<OPTION VALUE="e5">test4</OPTION>
<OPTION VALUE="e6">test5</OPTION>
<OPTION VALUE="e7">test6</OPTION>
<OPTION VALUE="e8">test7</OPTION>
<OPTION VALUE="e9">test8</OPTION>
<OPTION VALUE="e10">test9</OPTION>
</SELECT> </P>
<P><SELECT NAME="liste6" ID="liste6">
<OPTION VALUE="f1">-------any-------</OPTION>
<OPTION VALUE="f2">test1</OPTION>
<OPTION VALUE="f3">test2</OPTION>
<OPTION VALUE="f4">test3</OPTION>
</SELECT> </P>
<P><SELECT NAME="liste7" ID="liste7">
<OPTION VALUE="g1">-------any-------</OPTION>
<OPTION VALUE="g2">test1</OPTION>
<OPTION VALUE="g3">test2</OPTION>
<OPTION VALUE="g4">test3</OPTION>
</SELECT> </P>
<P><INPUT TYPE="button" ID="derbutton" VALUE="Test"></SELECT></P>
</FORM>

</BODY>

</HTML>

Danke für die Geduld

Antwort 9 von rfb vom 29.04.2007, 22:08
schau dir diese 2 Zeilen an - erkennst du den Unterschied?

var l2=document.getElementById("liste2");
var 13=document.getElementById("liste3");

Genau! In der 2ten Zeile steht die Zahl 13, in der ersten Zeile ein kleines L gefolgt von einer 2.

Als Variablenname ist die 13 aber nicht erlaubt, Variablennamen müssen mit einem Buchstaben beginnen.

Und die Frage in Antwort 7: keine Kurse für HTML & Co, im Wesentlichen SelfHTML und anderes im Eigenstudium durchgearbeitet.

Antworten der Gruppe: Webseiten/HTML
www.supportnet.de



Office 365 stellt vertraute Microsoft Office-Tools für die Zusammenarbeit und Produktivität über die Cloud bereit. So können alle ganz einfach von nahezu überall zusammenarbeiten und auf E-Mails, Webkonferenzen, Dokumente und Kalender zugreifen.