Supportnet Computer
Planet of Tech

Supportnet / Forum / Webseiten/HTML

Dropdown Menus mit Abschick-Knopf





Frage

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

Antwort 1 von rfb

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

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

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

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

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

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

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

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

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.

Antwort 10 von rfb

nun noch ein paar Anmerkungen zum HTML-Teil:

  • gebräuchlich (und ab XHTML zwingend vorgeschrieben) ist die Kleinschreibung von Tag-Namen und -Attributen
  • im form-Tag muss ein Wert bei
    action
    stehen, minimal ist daher
    <form action="">
    damit der Code valide ist.
  • das letzte
    </select>
    ist fehl am Platz

  • Antwort 11 von Esgeht

    Ich denke wir sind dann soweit fertig, denn nach Deiner kleinen Erklärung und Anleitung habe ich die Fehler alle beseitigt und auch direkt mal als kleinen test in Opera eingefügt. Und voila alles so wie es sein sollte. Jetzt musst ichnurnoch die anderen Seiten mit dem jeweiligen richtigen Namen erstellen und dann sollte es ja hoffentlich gehen.

    Wirklich ein herzliches Danke für die kompetente Hilfe und vorallem die Geduld und Arbeit. Sollten wiedererwarten Probleme auftreten, werde ich melden :-)

    Nochmals ein saftiges Danke

    Adolf

    Antwort 12 von Esgeht

    Hallo nochmal "nerv",

    Ich will ja nicht unverschämt erscheinen, aber da wir grade dabei sind:

    Habe da noch ne andere Frage und zwar ist es irgentwie möglich, dass man es so einstellen kann, dass weiterer Text erst erscheint, wenn man ein enstrechendes Wort anklickt? Also ich stelle mir das so vor, dass wenn ich das Wort Suche in einem Menü anklicke und dann darunter die ganzen Dropdowns erscheinen und die Wörter darunter automatisch nach unten platz machen? Und bei einem weiteren Klick auf Suche sollen die Dropdowns wieder verschwinden. Ist das irgentwie realisierbar oder zu hoch für einen Anfänger?

    Ich Frage das, weil meine gebastelte Startseite doch etwas überladen aussieht ^^

    Vielen lieben Dank
    Adolf

    Antwort 13 von rfb

    ergänze:
    <form action="" id="lokschuppen">


    sowie (vor <form ..> oder hinter </form>)
    <a href="javascript:anzeige()">Suche An/Aus</a>



    und im JavaScript:
    <script type="text/javascript">
    function anzeige() {
    var x=document.getElementById("lokschuppen");
    var y=arguments;
    var z=(x.style.display=="block")?"none":"block";
    if (y.length>-1) z=y[0];
    x.style.display=y;
    }
    function init() {
    ...
    }}}}}
    window.onload=function() {
    init();
    anzeige("none");
    }
    </script>


    Antwort 14 von rfb

    sorry, ein Fehler:

    ...
    if (y.length>0) z=y[0];
    ...


    Ich möchte kostenlos eine Frage an die Mitglieder stellen:


    Ähnliche Themen:


    Suche in allen vorhandenen Beiträgen: