• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Ein weiteres Eingabefeld unterhalb eines select-Feldes erstellen

S

stripling

New member
Hallo ihr Lieben!
Ich bin wirklich ganz neu in der Welt von Jacascript und habe schon die ersten Probleme. Für einen Einführungskurs an der Uni soll in HTML ein Formular erstellt werden, was u.a. eine Auswahlliste enthält. Soweit kein Problem. Jetzt soll bei Auswahl des Punkts "Presseanfrage" ein weiteres, mit javascript bz. innerHTML generiertes Eingabefeld erscheinen. Das möchte nicht so recht klappen.
Es wäre super, wenn mir jemand den Fehler sagen könnte, oder was ich anders/besser machen kann.
Ganz liebe Grüße und Vielen Dank :)

HTML: 
<label for="anliegen">Was ist Ihr Anliegen?*</label>
<br />

			<select id="anliegen" name="anliegen" onchange="myFunction()" required>
			
				<option value="">bitte auswählen</option>
				<option value="tickets">Ticketbestellung</option>
				<option value="presse">Presseanfrage</option>
				<option value="sonstiges">Sonstiges</option>
				
			</select>

			<p id="demo"></p>


Code: 
function myFunction() {

if (document.getElementById("anliegen").value === "presse") {
var x = document.createElement("FORM");
x.setAttribute("id", "myForm");
document.body.appendChild(x);

var y = document.createElement("INPUT");
y.setAttribute("type", "text");

document.getElementById("myForm").appendChild(y);

document.getElementById("demo").innerHTML = "Verlag: " + y;
} else {
return false;
}
}
 
Ich versteh ehrlich gesagt nicht so ganz, was genau jetzt "nicht so recht klappen" möchte bzw. du erreichen willst...
Normalerweise realisiert man das, indem man das zusätzliche Eingabefeld direkt ins HTML einbindet und dann ein-/ausblendet:
HTML: 
<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>zusätzliches Feld einblenden, wenn bestimmter Menüpunkt ausgewählt</title>
	<script>
		window.onload = function(){
			var selectMenu;
			selectMenu = document.getElementsByName('anliegen')[0];
			selectMenu.onchange = checkSelect;
			checkSelect();
		}
		function checkSelect(){
			var value, info;
			value = document.getElementsByName('anliegen')[0].value;
			info = document.getElementById("presse");
			if(value === "presse"){
				info.style.display = "";
			}
			else{
				info.style.display = "none";
			}
		}
	</script>
</head>
<body>

	<form method="post" action="process.php">
		<label for="anliegen">Was ist Ihr Anliegen?*</label>
		<br>
		<select name="anliegen" required>
			<option value="" selected disabled> -- bitte auswählen -- </option>
			<option value="tickets">Ticketbestellung</option>
			<option value="presse">Presseanfrage</option>
			<option value="sonstiges">Sonstiges</option>
		</select>
		<div id="presse">
			<br>
			<h1>Presseanfrage:</h1>
			Verlag: <input type="text">
		</div>
	</form>
</body>
PS: Variablennamen sollten aussagekräftig sein.
PPS: Für Standardattribute sollte man nicht setAttribute() verwenden, sondern diese direkt als .attribute setzen.
 
Vielen Dank schonmal dafür :)
Wie gesagt, bin noch ganz neu bei dem Thema, auf die Idee, das direkt ins HTML zu schreiben bin ich irgendwie gar nicht gekommen.
Eigentlich sollen wir auch ein Feld generieren lassen, hier ist es ja von Anfang an da und wird nur durch die Auswahl wieder eingeblendet.
Kann man das irgendwie mit Javascript generieren?! Bei meinem Beispiel oben Wir beim klick auf "Presseanfrage" ja leider nur Text eingeblendet, kein leeres Feld...das ist die Stelle, wo ich nicht weiterkomme.
LG :)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben