Willkommen in der Webstatt Zum Webstatt Blog und Stories
Julian am 10.01.07 20:43

Hi,
Ich bin auf der Suche nach ein paar Codeschnipseln für ein intelligentes Formular mit JavaScript. Man soll mit einem Dropdownmenü das darunterliegende Formular beeinflußen können, also je nachdem was man auswählt sieht das Formular anders aus.
Inaktive Formularelemente sollen komplett ausgeblendet werden.

Gibt es sowas? Kann mir jemand helfen?

netcup.de Warum gibt es hier Werbung?
Chrisber am 10.01.07 20:47

Dies könntest du mit einigen Span's lösen.
Per Javascript wird das jeweilige Form/der Text im Span liegendem Bereich eingeblendet.

Wenn du den Code willst, wende dich an mich ;)

Julian am 13.01.07 12:40

Genau sowas hatte ich auch schon überlegt, kann es nur nicht umsetzen.
Wäre nett wenn ihr mir mit paar Codeschnipseln weiterhelfen könntet :)

Johannes am 13.01.07 12:47

Naja, dann kriegt das <select>-Element ein onChange-Attribut, durch das ein Javascript die Auswahlmöglichkeit überprüft und andere Elemente ein- oder ausblendet (Sprichwort CSS: display )

Chrisber am 14.01.07 03:42

Javascript:
<script language="JavaScript" type="text/javascript">
function ChangeForm (Number) {
if (Number == "1") {
document.getElementById("Form1").style.display = "";
document.getElementById("Form2").style.display = "none";
document.getElementById("Form3").style.display = "none";
document.getElementById("Form4").style.display = "none";
}
if (Number == "2") {
document.getElementById("Form1").style.display = "none";
document.getElementById("Form2").style.display = "";
document.getElementById("Form3").style.display = "none";
document.getElementById("Form4").style.display = "none";
}
if (Number == "3") {
document.getElementById("Form1").style.display = "none";
document.getElementById("Form2").style.display = "none";
document.getElementById("Form3").style.display = "";
document.getElementById("Form4").style.display = "none";
}
if (Number == "4") {
document.getElementById("Form1").style.display = "none";
document.getElementById("Form2").style.display = "none";
document.getElementById("Form3").style.display = "none";
document.getElementById("Form4").style.display = "";
}
}
</script>

Den Javascript einfach nach belieben erweitern (wenn du mehr brauchst und nicht weiterkommst, sag bescheid)

Hier das Select zum wechseln:
<form name="wechseln">
<select name="wechselnsel" onChange="ChangeForm(options[this]);">
<option value="1">Form1</option>
<option value="2">Form2</option>
<option value="3">Form3</option>
<option value="4">Form4</option>
</select>
</form>

Snake am 14.01.07 12:07

mal abgesehen davon, dass da eine klammer zu fehlt, is doch da ne schleife um einiges praktischer oder?
viel weniger code

Franky Franky am 15.01.07 17:23

grml [FONT=courier new][COLOR=red]this.[/COLOR]options[this][/FONT]
aber wie gesagt, mach lieber ne schleife drum ;)

Chrisber am 16.01.07 20:14

[hust]peinlich[/hust] :D

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt