Formulare

[Manuel Streibl]

Hi leute, hab ein kleines Problem.

Und zwar würd ich gern ein kleines Formular erstellen, das folgendes kann.

Es besteht aus 3 Dropdownfeldern.
1: Saison
2: Ort
3: BildNr

Ich möchte jetzt, dass wenn man im 1. Dropdownfeld (Saison) eine Saison auswählt (z.B.: 2003) dann soll im zweiten Dropdownfeld (Ort) nur die Orte von der Saison 03 auswählbar sein. Wenn man beim Ort nun einen Ort aus der Saison 03 auswählt, soll man beim 3. Dropdownfeld (BildNr) nur noch die Bildnummer (Bilder) die eben von der Saison 03 in dem Bestimmten Ort verfügbar sind.

Zur erklärung: Erstelle gerade eine Homepage von einer Krampusgruppe. Und ich möchte dort so eine Art Fotobestellung erstellen. Die User sehen sich die Komprimierten Bilder (abhänging von der Saison und dem Ort) auf der Homepage an. Wenn nun ein User eines dieser Bilder in Orginalgröße haben möchte, soll er eben durch dieses Formular genau das Bild bestimmen können.

Ich weiß, es würde einfacher gehen, wenn ich zu jedem Bild einfach eine BildID hinschreibe, und der User gibt einfach die BildID an und ferti. Aber ich würde gerne eine schönere Lösung dafür machen.

Jetzt meine Frage: Ist das mit JavaScript überhaupt realisierbar?
Wenn ja, gibts das schon irgendwo, oder sonst wie man das macht??

Ach ja, bin noch nicht wirklich gut in Javascript. Leider kenn ich mich mit anderen Sprachen wie PHP oder so noch nicht aus, deshalb erstell ich die Homepage ja auch in HTML mit Javascript.

Vielen Dank schon mal im Voraus

lg
Mani

Ps.: Ihr könnt euch die Homepage auch gern mal ansehen.
Anbei die Adresse
Unter Galerie/Fotos (zurzeit nur bilder in der Saison 04 vorhanden)

[Skeeve]

Moin!

Hier gibt es schon eine Lösung für ein sehr ähnliches Problem.
-- Skeeve

[Manuel Streibl]

Hi, danke erst mal.
Hab mir das mal angeschaut. Das problem ist, ich versteh wirklich nicht viel davon, vorallem das unter "eine Lösung" check ich nicht wirklich. Gibts da was einfacheres, oder schon ein kleines Beispiel, das ich dann nur noch umändern müsste.

Danke
lg
mani

[Skeeve]

Moin!

Gibts da was einfacheres, oder schon ein kleines Beispiel, das ich dann nur noch umändern müsste.

Einfacher? Was ist daran schwer? Hier mal im Zusammenhang...

file: functions.js

  
var autos= {  
 'Alfa Romeo' : {  
  'Sportwagon' : [  
   '1,6 T.Spark',  
   '1,8 T.Spark',  
   '1,9 JTD',  
   '1,9 JTD 16V M-JET',  
   '2,0 JTS',  
   '2,4 JTD 20V M-JET',  
   '2,5 V6 24V',  
   '3,2 V6 24V GTA'  
  ],  
  '159' : [  
   '1,9 JTDM 16V',  
   '1,9 JTDM 8V',  
   '1,9 JTS Twin Phaser',  
   '2,2 JTS Twin Phaser',  
   '2,4 JTDM 20V',  
   '3,2 JTS Twin Phaser Q4'  
  ],  
  '166' : [  
   '2,0 T.Spark',  
   '2,4 JTD',  
   '2,4 JTD M-JET 20V',  
   '3,0 V6 24V',  
   '3,2 V6 24V'  
  ],  
  'Spider' : [  
   '2,0 JTS',  
   '2,0 T.Spark',  
   '3,2 V6 24V'  
  ],  
  'GTV' : [  
   '2,0 JTS',  
   '2,0 T.Spark',  
   '3,2 V6 24V'  
  ],  
  'Crosswagon Q4' : [  
     '1,9 JTD 16V'  
  ],  
  'GT' : [  
   '1,8 T. Spark',  
   '1,9 JTD M-JET 16V',  
   '2,0 JTS',  
   '3,2 V6 24V'  
  ]  
 },  
 'Volvo' : {  
  'V70' : [  
   '2,4 (140PS)',  
   '2,4 (170PS)',  
   '2,4 AWD',  
   '2,4 Bi-Fuel',  
   '2,4 D (126PS)',  
   '2,4 D (130PS)',  
   '2,4 D (163PS)',  
   '2,4 D (163PS) AWD',  
   '2,5 T',  
   '2,5 T AWD',  
   'D5',  
   'D5 AWD',  
   'R',  
   'T5'  
  ],  
  'C70' : [  
   '2,0 T',  
   '2,4T',  
   'T5'  
  ],  
  'XC70' : [  
   '2,4 D',  
   '2,5 T',  
   'D5'  
  ],  
  'V50' : [  
   '1,6',  
   '1,6 D',  
   '1,8',  
   '2,0 D',  
   '2,4',  
   '2,4i',  
   'T5',  
   'T5 AWD'  
  ],  
  'S60' : [  
   '2,4 (140PS)',  
   '2,4 (170PS)',  
   '2,4 Bi-Fuel',  
   '2,4 D (126PS)',  
   '2,4 D (130PS)',  
   '2,4 D (163PS)',  
   '2,5 T',  
   '2,5 T AWD',  
   'D5',  
   'R',  
   'T5'  
  ],  
  'XC90' : [  
   '2,4 D',  
   '2.5 T',  
   'D5',  
   'T6',  
   'V8'  
  ],  
  'S40' : [  
   '1,6',  
   '1,6 D',  
   '1,8',  
   '2,0 D',  
   '2,4',  
   '2,4i',  
   'T5',  
   'T5 AWD'  
  ],  
  'S80' : [  
   '2,4 (140PS)',  
   '2,4 (170PS)',  
   '2,4 Bi-Fuel',  
   '2,4 D',  
   '2,5 T',  
   '2,5 T A AWD',  
   'D5',  
   'T6 A'  
  ]  
 },  
}  
  
function init( selection ) {  
 var i= selection.options.length;  
 for ( var marke in autos ) {  
  selection.options[i++]= new Option( marke );  
 }  
}  
  
function showModell( selection, variante, marke ) {  
 var i= selection.options.length= variante.options.length= 1;  
 for ( var modell in autos[ marke ] ) {  
  selection.options[i++]= new Option( modell );  
 }  
}  
  
function showVariante( selection, marke, modell ) {  
 var i= selection.options.length= 1;  
 for ( var j=0 ; j < autos[ marke ][ modell ].length ; ++j ) {  
  selection.options[i++]= new Option( autos[ marke ][ modell ][ j ] );  
 }  
}  

Die dazugehörige html

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  
<html>  
<head>  
 <title>Untitled</title>  
 <script src="function.js" type="text/javascript" language="JavaScript"></script>  
</head>  
  
<body onload="init( document.cars.aktAutomarke )">  
  
<form name="cars" method="post" target="_blank">  
 <fieldset id="formDefault">  
  <legend>Ihre gesamte Daten</legend>  
  <label>Vorname:</label><input type="text" name="name" value="" />  
  <br />  
  <label>Nachname:</label><input type="text" name="mail" value="" />  
  <br />  
  <label class="aktAutoMarkeModell">Aktuelle Automarke:</label>  
  <select name="aktAutomarke" id="automarke" onChange="showModell( this.form.autoModell, this.form.autoVariante, this.value );">  
   <option value="" selected="selected"></option>  
  </select>  
  <br />  
  <label class="aktAutoMarkeModell">Aktuelles Modell:</label>  
  <select name="autoModell" id="automodellA" onChange="showVariante( this.form.autoVariante, this.form.automarke.value, this.value);">  
   <option value="" selected="selected"></option>  
  </select>  
  <br />  
  <label class="neuAutoMarkeModell">Marke neues Auto:</label>  
  <select name="autoVariante" id="neuesAutoMarke">  
   <option value="" selected="selected"></option>  
  </select>  
  
  <br /><br />  
  <input type="Submit" value="Senden" style="width:100px;">  
 </fieldset>  
</form>  
  
  
</body>  
</html>  

-- Skeeve

[Mathias Brodala]

Hallo Manuel.

Und zwar würd ich gern ein kleines Formular erstellen, das folgendes kann.

Es besteht aus 3 Dropdownfeldern.
1: Saison
2: Ort
3: BildNr

Ich möchte jetzt, dass wenn man im 1. Dropdownfeld (Saison) eine Saison auswählt (z.B.: 2003) dann soll im zweiten Dropdownfeld (Ort) nur die Orte von der Saison 03 auswählbar sein.

Du möchtest also voneinander abhängige Auswahlfelder erstellen. Das verlinkte Archivposting sollte dir hierzu eine ausreichende Grundlage bieten.

Einen schönen Freitag noch.

Gruß, Mathias