[FRAGE] 2 select boxen mit if-Anweisung auswerten plus Ausgabe von Text

Vony · 22. Jan. 2015

Hallo Zusammen,

ich habe vor vielen Jahren mal erste Gehversuche in der Webseiten-Programmierung unternommen. Da meine bisherigen Arbeitgeber immer nur in Typo3 ihre Webseiten verwaltet haben, waren in den letzten Jahren keinerlei Kenntnisse mehr notwendig. Meine Kenntnisse in HTML und JavaScript sind also eher gering. Nun würde ich aber gerne etwas umsetzen, das ich in Typo3 nicht kann. Deshalb wollte ich es mit Javascript versuchen. Wenn ich richtig bin, kann ich den Code dann einfach in Typo3 hineinkopieren ;-)

Leider hänge ich nun aber schon seit 2 Tagen an einem Problem und komme nicht weiter :-(
Was will ich? Ich hätte gerne ein Formular, bei dem man 2 Optionen per Dropdown auswählen kann. Es soll dann ausgewertet werde, was gewählt wurde und anschließend soll unterhalb des Formulars in Abhängigkeit der gewählten Optionen ein Text ausgegeben werden, der ggf. auf weitere Seiten der Homepage verlinkt.

Das Formular habe ich hinbekommen. Ich arbeite am MAC und verwende einen Editor aus dem Store (Ich weiß nicht, ob ich an dieser Stelle den Namen nennen darf). Entweder gebe ich völligen Mist ein, oder das Programm hat irgendwie Probleme mit dem Code, denn die farbliche Formatierung meiner Eingabe passt schon nicht.

Ich habe massig recherchiert und ausprobiert, aber ich bekomme die Auswertung der Optionen einfach nicht hin. Ich wollte die Werte der select boxen in Variablen schreiben, dann mittels if-Anweiung prüfen, was die Folge der Optionen ist und dann Begriffe ausgeben lassen, die verlinkt sind. Bis zur Verlinkung bin ich bisher noch nicht mal gekommen. Ich habe das Gefühl, dass ich die Optionen schon nicht richtig auslese.

Ich hoffe es kann mir jemand helfen - und sorry, falls ich totalen Müll produziert habe. Ich hoffe Ihr fallt nicht vom Stuhl beim Lesen ;-)

Liebe Grüße,
Vony

Code:

<html>
<head>
</head>
<body>

<script type=“text/javascript">
    function SFbest(form) {
    var woher = document.getElementById("woher").value;
    var wohin = document.getElementById("wohin").value;
    
    if (woher == “ohne“ && wohin == “BG“ {
    document.write(“Berufsvorebereitungsjahr“);
    else {
    if (woher == “ohne“ && wohin == “SEK11“ {
    dosument.write(“Berufsvorebereitungsjahr und Berufsschule“);
    else {
    }}}
	else {dosument.write(“Bitte korrigieren Sie Ihre Eingabe.“)}
    }
</script>


<form name=“SF“ method=“post“ id"SFall" onSubmit=“return SFbest()“>
<p>
Welchen Abschluss bringen Sie mit?
	<select name=“formWoher“>
	<option value=““>Bitte waehlen Sie aus</option>
	<option value=“ohne“>ohne Abschluss</option>
	<option value=“HS“>Hauptschulabschluss (Berufsreife)</option>
	<option value=“SEK1“>Qualifizierter Sekundarabschluss 1 / Mittlere Reife</option>
	<option value=“Abi">(Fach-)Hochschulreife</option>
</select>
</p>
<p>
Welchen Abschluss moechten Sie erreichen?
<select name=“formWohin">
	<option value=“">Bitte waehlen Sie aus</option>
	<option value=“BG">Berufliche Grundbildung</option>
	<option value=“SEK11">Qualifizierter Sekundarabschluss 1 / Mittlere Reife</option>
	<option value=“Assi">Assistent/-in</option>
	<option value=“BWT">Betriebswirt/-in / Techniker/-in</option>
	<option value=“FH1">Fachhochschulreife</option>
	<option value=“HS">Hochschulreife</option>
</select>
</p>

</form>
	<input type="submit" name="submit“ value="Senden"/>

</form>

Sempervivum · 22. Jan. 2015

Hallo Vony,
ich habe mich bisher zwar nicht mit Formularen befasst, aber um etwas zu lernen, habe ich dein Problem mal analysiert.

Da waren diverse Fehler drin:

Falsche Hochkommas “, man muss genau hinsehen, um es zu erkennen.

Strukturfehler im Javascript. Um sich in dem Dschungel von öffnenden und schließenden
Klammern zurecht zu finden, ist es sinnvoll, den Code einzurücken. So ist es richtig:

Code:

             function SFbest() {
                var woher = document.getElementById("woher").value;
                var wohin = document.getElementById("wohin").value;
            
                if (woher == "ohne" && wohin == "BG") {  // hier fehlte die schliessende Klammer )
                    document.getElementById("ausgabe").innerHTML = "Berufsvorebereitungsjahr";
                } // diese schliessende Klammer fehlte
                else {
                    if (woher == "ohne" && wohin == "SEK11") {  // hier fehlte die schliessende Klammer )
                        document.getElementById("ausgabe").innerHTML = "Berufsvorebereitungsjahr und Berufsschule";
                    } // diese schliessende Klammer fehlte
                    // dieses else ist ueberfluessig: else {
                    // diese Klammern sind überfluessig: }}}
                    else {document.getElementById("ausgabe").innerHTML = "Bitte korrigieren Sie Ihre Eingabe"}
                }
                return false;
             }

Außerdem muss diese Funktion false zurückliefern, damit das Absenden des Formulars beim Submit unterdrückt wird.

document.write sollte besser nicht verwendet werden. Versuch nur mal die Frage zu beantworten, wo die Ausgabe eigentlich hingeschrieben werden soll.

Damit dies
var woher = document.getElementById("woher").value;
var wohin = document.getElementById("wohin").value;
funktioniert, müssen die betr. select-Elemente die betr. ID bekommen.

Damit das Submit funktioniert, muss der Button innerhalb des form-Tags definiert werden.

HTML:

        <form name="SF" method="post" id="SFall" onsubmit="return SFbest()">
            <p>
Welchen Abschluss bringen Sie mit?
                <select id="woher" name="formWoher">
                    <option value="">Bitte waehlen Sie aus</option>
                    <option value="ohne">ohne Abschluss</option>
                    <option value="HS">Hauptschulabschluss (Berufsreife)</option>
                    <option value="SEK1">Qualifizierter Sekundarabschluss 1 / Mittlere Reife</option>
                    <option value="Abi">(Fach-)Hochschulreife</option>
                </select>
            </p>
            <p>
Welchen Abschluss moechten Sie erreichen?
                <select id="wohin" name="formWohin">
                    <option value="">Bitte waehlen Sie aus</option>
                    <option value="BG">Berufliche Grundbildung</option>
                    <option value="SEK11">Qualifizierter Sekundarabschluss 1 / Mittlere Reife</option>
                    <option value="Assi">Assistent/-in</option>
                    <option value="BWT">Betriebswirt/-in / Techniker/-in</option>
                    <option value="FH1">Fachhochschulreife</option>
                    <option value="HS">Hochschulreife</option>
                </select>
            </p>
            <input type="submit" name="submit" value="Senden" />
        </form>
        <span id="ausgabe"></span>

Ich hoffe, so ist es trotz meiner mangelnden Vorkenntnisse richtig. Funktionieren tut es jedenfalls.

- - - Aktualisiert - - -

PS: Wahrscheinlich musst du ja noch viel mehr Kombinationen berücksichtigen. Dann ist es effektiver, wenn Du diese und die Reaktionstexte in einem assoziativen Array ablegst und dieses für die Auswertung verwendest. Die verschachtelten ifs reduzieren sich dann auf einen Einzeiler.

Vony · 23. Jan. 2015

Hallo Sempervivum,

danke für die schnelle und vor allem so ausführliche Antwort. Nach dem Absenden lädt sich die Seite nun neu und die Eingaben werden geresetet.

Das mit der Ausgabe des Textes auf der Seite versuche ich dann heute Abend nach Feierabend umzusetzen. Ich melde mich dann mit meiner Lösung (oder Nicht-Lösung, falls ich es nicht hinbekomme). In die Geschichte mit den assoziativen Arrays muss ich mich auch erst noch einarbeiten - ich habe vergessen, wie viel Spaß solche Probleme machen ;-)

Edit: das Problem war nur, dass ich das Script nicht ordentlich in den Head eingebaut hatte - danach hat alles bestens funktioniert, danke!

[FRAGE] 2 select boxen mit if-Anweisung auswerten plus Ausgabe von Text

Vony

New member

Anhänge

Sempervivum

Banned

Vony

New member