✔ Formular - Elemente ein- bzw. ausblenden

E

eee

Mitglied
Liebe User,

ich habe ein kleines JS Problem, dass ich schon seit längerem vor mir herschiebe. Leider verstehe ich nichts von JS, da ich es kaum benötige (nur PHP und MySQL Grundkenntnisse sind vorhanden). Konkret möchte ich in einem Formular Text einbleden, wenn zuvor zwei Kriterien erfüllt sind. In folgendem Beispiel soll der Text nur sichtbar sein, wenn "Bier" und "Deutschland" ausgewählt wurde. Kann mir jemand den Code umschreiben? Ich hoffe es ist nicht zuviel verlangt, allerdings vermute ich, dass sich das Problem relativ schnell lösen lässt, wenn JS Kenntnisse vorhanden sind. Vielen Dank und schöne Grüße!

Code: 
<html>

<head>
<script type="text/javascript">
	function einblenden(){
		var select = document.getElementById('select_getraenk').selectedIndex;
		document.getElementById('bier').style.display = (select == 1? "block": "none");
	}
</script>
</head>

<body onload="einblenden()">
	<form>
		<select id="select_getraenk" onchange="einblenden()">
			<option value="">Getränk</option>
			<option value="1">Bier</option>
			<option value="2">Wein</option>
		</select>
		
		<select>
			<option value="">Land</option>
			<option value="1">Deutschland</option>
			<option value="2">Frankreich</option>
		</select>
		
		<div id="bier" style="display: none;">
		Dieser Text sollte nur sichtbar sein, wenn "Bier" und "Deutschland" ausgewählt wurden!
		</div>
	</form>
</body>

</html>
 
Hier mal eine "vereinfachte Version" wie es aussehen könnte:
HTML: 
<html>
 
<head>
<script type="text/javascript">
    function einblenden(){
        var select = document.getElementById('select_getraenk').selectedIndex;
        var land   = document.getElementById('select_land').selectedIndex;
        if(select == 1 && land == 1) document.getElementById('bier').style.display = "block";
        else document.getElementById('bier').style.display = "none";        
    }
</script>
</head>
 
<body>
    <form>
        <select id="select_getraenk" onchange="einblenden()">
            <option value="">Getränk</option>
            <option value="1">Bier</option>
            <option value="2">Wein</option>
        </select>
        
        <select id="select_land" onchange="einblenden();">
            <option value="">Land</option>
            <option value="1">Deutschland</option>
            <option value="2">Frankreich</option>
        </select>
        
        <div id="bier" style="display: none;">
        Dieser Text sollte nur sichtbar sein, wenn "Bier" und "Deutschland" ausgewählt wurden!
        </div>
    </form>
</body>
 
</html>
 
Zuletzt bearbeitet:
Hallo Maniac, danke für die rasche Antwort. Funktioniert ausgezeichnet und offensichtlich ist "onload" im Body Tag überhaupt nicht notwendig. Ich habe noch ein zweites (und letztes!) JS Problem, dass mir schon seit einiger Zeit in Magen liegt. In einem Select Feld lassen sich die Zahlen 1, 2 und 3 auswählen. Bei 2 und 3 sollen unterschiedliche Texte angezeigt werden (siehe div Tags im Code). Ich habe versucht das Problem selbst zu lösen aber es funktioniert nicht:

HTML: 
<html>
 
<head>
<script type="text/javascript">
    function einblenden(){
        var select = document.getElementById('select_zahl').selectedIndex;
		document.getElementById('zwei_drei').style.display = ((select == 2 || select == 3?) "block": "none");
        document.getElementById('drei').style.display = (select == 3? "block": "none");
    }
</script>
</head>
 
<body>
    <form>
        <select id="select_zahl" onchange="einblenden()">
            <option value="">Zahl</option>
            <option value="1">1</option>
            <option value="2">2</option>
			<option value="3">3</option>
        </select>
		
		<div id="zwei_drei" style="display: none;">
        Dieser Text sollte nur sichtbar sein, wenn "2" oder "3" gewählt wurde!
        </div>
        
        <div id="drei" style="display: none;">
        Dieser Text sollte nur sichtbar sein, wenn "3" gewählt wurde!
        </div>
    </form>
</body>
 
</html>
</html>

Sorry, den "Wichtig: Keine Ahnung von Javascript" Thread habe ich erst jetzt gesehen :/
 
Zuletzt bearbeitet:
HTML: 
document.getElementById('zwei_drei').style.display = ((select == 2 || select == 3?) "block": "none");
Hier ist das Fragezeichen an der falschen Stelle, es gehört eine Stelle hinter die Klammer.
 
  • Gefällt mir
Reaktionen: eee
Maniac hat gesagt.:
Hier mal eine "vereinfachte Version" wie es aussehen könnte:
HTML: 
<html>
 
<head>
<script type="text/javascript">
    function einblenden(){
        var select = document.getElementById('select_getraenk').selectedIndex;
        var land   = document.getElementById('select_land').selectedIndex;
        if(select == 1 && land == 1) document.getElementById('bier').style.display = "block";
        else document.getElementById('bier').style.display = "none";        
    }
</script>
</head>
 
<body>
    <form>
        <select id="select_getraenk" onchange="einblenden()">
            <option value="">Getränk</option>
            <option value="1">Bier</option>
            <option value="2">Wein</option>
        </select>
        
        <select id="select_land" onchange="einblenden();">
            <option value="">Land</option>
            <option value="1">Deutschland</option>
            <option value="2">Frankreich</option>
        </select>
        
        <div id="bier" style="display: none;">
        Dieser Text sollte nur sichtbar sein, wenn "Bier" und "Deutschland" ausgewählt wurden!
        </div>
    </form>
</body>
 
</html>
Zum Vergrößern anklicken....

Ich verwende diesen Code nun für mein Editier Formular. Die Werte "Deutschland" und "Bier" werden beim Aufruf des Formulars aus der MySQL Datenbank geholt, trotzdem wird der gewünschte Text nicht angezeigt. Erst wenn ich manuell z.B. von "Deutschland" auf "Frankreich" und danach wieder auf "Deutschland" wechsle erscheint mein Text. Der einzige Fehler, den der W3C Validator meldet, ist, dass <div> Tags anscheinend nicht in <dd> Tags geschrieben werden sollen (mein Formular ist eine Definitionsliste). Bei Texten, die nur von einer Auswahl abhängen, habe ich das Problem nicht. Wo könnte hier der Fehler liegen? Ein bekanntes Problem oder hilft hier nur noch die Glaskugel?

Edit sagt: Problem gelöst, mit "onload" im Body Tag (siehe Erstposting) funktionierts ;)
 
Zuletzt bearbeitet:
Hallo zusammen,

ich möchte dies Skript gerne mit "document.getElementsByName" verwenden, doch leider funktioniert ohne weiteres nicht, hat vielleicht wer ein Tip für mich?

LG
Andre
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück