Interaktive Formularelemente

Computer: Software & Programmierung JavaScript & Script-Sprachen
#1

Geehrtes Forum,

ich benötige für mein Projekt etwas Javascript und hoffe hier Hilfe zu finden. Konkret geht es um eine Selectbox mit mehreren Auswahlmöglichkeiten. Abhängig von der getroffenen Auswahl sollen weitere Formularelemente angezeigt werden. Wird z.B. der Wert „Auto“ gewählt sollen Formularelemente zur Angabe der Farbe, des Verbrauchs etc. erscheinen. Erfolgt in der Selectbox die Auswahl „Haus“ könnten z.B. Angaben zur Anzahl der Fenster oder zur Farbe des Daches gemacht werden. Ich hoffe ihr wisst, was ich meine.

Grundsätzlich möchte ich mich nicht näher mit Javascript beschäftigen - dies ist mir allein aus gesundheitlichen Gründen nicht möglich - weshalb ich schon seit einiger Zeit auf der Suche nach einer Vorlage bin, die ich modifiziert in meine Website einbauen kann. Ich habe zwar einige Beispielskripte für interaktive Formularelemente im Internet gefunden, ein Passendes, das mein Problem beschreibt, ist mir allerdings noch nicht untergekommen. Kann mir dabei jemand helfen?

Schöne Grüße, Harald

#2

Hallo Harald,

Abhängig von der getroffenen
Auswahl sollen weitere Formularelemente angezeigt werden. Wird
z.B. der Wert „Auto“ gewählt sollen Formularelemente zur
Angabe der Farbe, des Verbrauchs etc. erscheinen. Erfolgt in
der Selectbox die Auswahl „Haus“ könnten z.B. Angaben zur
Anzahl der Fenster oder zur Farbe des Daches gemacht werden.

Ansich kein Problem

eine Möglichkeit:
formular-elemente neu generieren und eventuell wieder zu löschen, wenn sich die Auswahl ändert

die andere Möglichkeit:
vorhandene versteckte formular-elemente zu ändern und anzeigen

welche Möglichkeit hättest Du denn gerne? :smile:)

Beide Möglichkeiten haben den gleichen Effekt, wobei ich denke, dass die 2. leichter zu verstehen ist.

mfg
Klaus

#3

Hallo KKO,

wieder einmal vielen Dank für deine Antwort. Welche der zwei Möglichkeiten ist denn die Elegantere (Für mich klingt die erste Möglichkeit „besser“)? Und vor allem, kennst du eine Quelle, wo ich ein Beispielskript finden kann? Trotz größerer Recherche tappe ich leider noch im Dunkeln.

#4

Hallo sax408,

in der Zwischenzeit mal ein bißchen geschreibselt,
mit der 2. Möglichkeit kann es so aussehen:

muss sein
var das ={
Auto:{att1:„Autofarbe“,att2:„Verbrauch“,att3:„PS“},
Haus:{att1:„Dachfarbe“,att2:„Fensteranzahl“,att3:„Garagen“},
Ehefrau:{att1:„Haarfarbe“,att2:„Beinlänge“,att3:„sonstige Wünsche“}
}

function wechsel(wahl){
if (wahl != „Auswahl…“){
for (var i=1; i< 4; i++){
var elId=„in“ + i; var teId=„text“+i; var teAT=„att“+i;
document.getElementById(teId).innerHTML=das[wahl][teAT] +"<br>"
document.getElementById(elId).disabled=""
document.getElementById(elId).style.visibility=„visible“
}
}

else{
for (var i=1; i< 4; i++){
var elId=„in“ + i
var teId=„text“+i
document.getElementById(elId).disabled=„disable“
document.getElementById(elId).style.visibility=„hidden“
document.getElementById(teId).innerHTML=""
}
}
}

Auswahl…AutoHausEhefrau












Browser muss im Standardmodus laufen … also DOCTYPE-Zeile beim Testen muss dabei sein!!

Mit createElement(), setAttribute(), appendChild(), replaceChild(), removeChild() … geht es auch … ist aber wohl aufwendiger

mfg
Klaus

#5

Ein großes Danke!!! Ich werde mir das Skript bis morgen genau ansehen. Ich muss einige der Text Felder durch Select Auswahllisten tauschen, bzw. habe ich nicht bei jedem Wert („Auto“, „Haus“, „Frau“) die gleiche Anzahl an dazugehörigen Formularelementen. Ich melde mich dann morgen, nochmals vielen Dank für deine Mühen!

#6

Ein großes Danke!!! Ich werde mir das Skript bis morgen genau
ansehen. Ich muss einige der Text Felder durch Select
Auswahllisten tauschen, bzw. habe ich nicht bei jedem Wert
(„Auto“, „Haus“, „Frau“) die gleiche Anzahl an dazugehörigen
Formularelementen.

na das macht ja nichts … es kann geprüft werden, ob z.B. „att5“ eine Wert hat oder „“ ist und dann erst die aktivieren etc … und wenn man display:none/block nimmt anstatt visibiltiy, dann gibt es auch keine Lücken :smile:)

Nachtrag zum Formular:
der IE braucht ein value in option, sonst funkt es nicht

Auswahl…AutoHausFrau

#7

na das macht ja nichts … es kann geprüft werden, ob z.B.
„att5“ eine Wert hat oder „“ ist und dann erst die aktivieren
etc … und wenn man display:none/block nimmt anstatt
visibiltiy, dann gibt es auch keine Lücken :smile:)

Wunderbar, ich werde morgen gleich versuchen das Skript so umzubauen, dass es wie auf folgenden Links aussieht:

http://img812.imageshack.us/img812/1637/57679729.jpg
http://img689.imageshack.us/img689/5100/53258174.jpg
http://img9.imageshack.us/img9/1610/52295036.jpg

Nachtrag zum Formular:

der IE braucht ein value in option, sonst funkt es nicht

Danke für den Hinweis, aber ein „value“ unter „option“ ist doch ohnehin immer nötig, um den Wert in die Datenbank zu schreiben bzw. ihn auszulesen. Oder stehe ich gerade auf der Leitung?

Gute Nacht, Harald

1 Like
#8

schöne Bildchen …
hättest Du gleich mit dabei geben sollen

muss sein
var out;
window.onload=function(){out=document.getElementById(‚box‘)}
var das ={
Auto:{att1:„Autofarbe“, att2:„Verbrauch“, att3:„PS“, attX:false},
Haus:{att1:„Dachfarbe“, att2:„Fensteranzahl“,att3:false, attX:„HausX“},
HausX:{sel0:„Dach-Typ“, sel1:„Satteldach“,sel2:„Flachdach“, sel3:„Walmdach“},
Frau:{att1:„Haarfarbe“, att2:„Beinlänge“, att3:„sonstiges“, attX:„FrauX“},
FrauX:{sel0:„Po-Form“, sel1:„Apfel“,sel2:„Birne“, sel3:„Tomate“}
}

function Neu_sel(was) {
var neu_p = document.createElement(„p“);
neu_p.innerHTML= das[was][‚sel0‘] +"<br>";
var neu_sel = document.createElement(„select“);
neu_sel.name=das[was][‚sel0‘];
var addme = new Option("…", „…“, false, false);
neu_sel.options[0] = addme;
for ( var i=1; i < 4; i++){
var sel=„sel“+i;
var addme = new Option(das[was][sel], das[was][sel], false, false);
neu_sel.options[i] = addme;
}
neu_p.appendChild(neu_sel);
out.appendChild(neu_p);
}

function Neu(wahl){
out.innerHTML=""
if(wahl != „false“){
for (var i=1; i< 4; i++){
var ATT=„att“+i;
if(das[wahl][ATT]){
var neu_p = document.createElement(„p“);
neu_p.innerHTML= das[wahl][ATT] +"<br>"+
‚<input type=„text“ name="‘+das[wahl][ATT]+’">’;
out.appendChild(neu_p);
}
}
}
if(das[wahl][‚attX‘]){Neu_sel(das[wahl][‚attX‘])}
}

Auswahl…AutoHausFrau







mfg
Klaus