Weitere Auswahl nach erstem Absenden

[Camping_RIDER]

Aloha ;)

Meine Frage ist deswegen, wie man es hin bekommt, dass ein Teil eines Formulars ausgewertet wird ohne das das gesamte Formular ausgewertet wird?

Ich hoffe jemand hat eine Idee wie ich das hinbekomme.

Ich hab aus dem Stegreif zwei Möglichkeiten im Kopf.

1.: onselect schickst du mit JavaScript einen XMLHttpRequest zu deinem Server und forderst von da die zusätzlichen Optionen für das, was ausgewählt wurde, an, und hängst das dynamisch mit JavaScript ein.

2.: Du lässt vorsorglich schon für alle Optionen der ersten Liste alle Zusatz-Optionen in dein HTML-Dokument schreiben, versteckst aber zunächst alle davon (display:none oder dergleichen - welche Option zum Verstecken da jetzt am Screenreader-freundlichsten ist können dir andere besser sagen als ich). onselect lässt du die Optionen anzeigen, die gefragt sind. Auf dem Server wertest du nicht alle Daten aus, sondern nur die, die zum in der ersten Liste ausgewählten gehören. Vorteile: kein weiterer Request, keine Wartezeit in der Bedienung, progressive enhancement (sofern das initiale Verstecken mit JavaScript passiert und jede Zusatzoption aussagekräftig beschriftet ist könnten auch Nutzer ohne JavaScript dein Formular grundsätzlich bedienen), Nachteil: großer Overhead an hin- und hergeschickten Daten (ist aber nur bei wirklich vielen Datensätzen relevant).

[EDIT: Folgendes funktioniert leider doch nicht. Es bleibt also bei den oben genannten Möglichkeiten.]

...und noch eine Alternative zu 2., die ohne Javascript auskommt, dafür aber eventuell das dynamische Zusammenstellen eines CSS-Dokuments (bspw. per PHP) benötigt (was besser ist, weil das die Problematik zu dir verschiebt und von deinen Nutzern fernhält):

Statt das verstecken mit Javascript zu lösen kannst du die Zusatz-Optionen alle initial mit CSS verstecken und dann mittels sibling selector und value-Attributwert nur das eine spezifisch benötigte sichtbar schalten. Das sieht dann etwa so aus (nur schnell runtergetippt, keine Gewähr):

.zusatzoption {
    display:none;
}

#liste[value=pizza] ~ .zusatzoption[name=pizza] {
    display:block;
}

#liste[value=vesperplatte] ~ .zusatzoption[name=vesperplatte] {
    display:block;
}

/*...*/

#liste[value=dessert] ~ .zusatzoption[name=dessert] {
    display:block;
}

Du musst auf HTML-Ebene natürlich dann sicherstellen, dass sich die Liste mit id liste und die Zusatzoptionen (wahrscheinlich je innerhalb eines Containers mit Klasse zusatzoption) innerhalb ein und desselben HTML-Elements befinden und, dass die Liste sich vor den Zusatzoptionen befindet (~ selektiert nur vorwärts), das ist aber ja sowieso die einzig sinnvolle Reihenfolge. Du brauchst hier php (o.ä.) um die css-Datei zu erzeugen, da du für jeden möglichen Listeneintrag eine eigene CSS-Regel benötigst. Mir fällt da auf die Schnelle keine einfache Automatisierung für ein, die ohne Präprozessor auskommt.

Ich hoffe das hilft dir weiter.

Grüße,

RIDER