Weitere Auswahl nach erstem Absenden

[Franky]

Moin alle zusammen, ich hab auf einer Website eine Auswahl als Dropdown-Liste, die aus einer DB die Daten bekommt. Nun will ich das realisieren, dass man nachdem man einen Eintrag ausgewählt hat noch eine genauere Bestimmung machen muss.

Man wählt also erst eine Person aus und muss dann noch wählen welches Fach man von der Person haben will. Diese Auswahl will ich als Buttons machen. Danach soll man dann auf Weiter drücken und und man wird auf die nächste Seite weitergeleitet. Natürlich könnte man das so machen das mann noch eine extra Seite einschiebt, aber dann hab ich so viele Seiten und zu Teil nur mit 1 Dropdown-Liste und das will ich nicht so gerne...

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.

Danke schon mal
Franky

[TS]

Hello,

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

Ohne JavaScript und AJAX für eine weitere Stufe mit einem iFrame für die Subauswahl.

Liebe Grüße
Tom S.

[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

[TS]

Hello Janosch,

kann man mittels CSS die Selected-Eigenschaft einer beliebigen Option einer Selectbox ermitteln. also ob überhaupt etwas ausgewählt ist?

Liebe Grüße
Tom S.

[Camping_RIDER]

Aloha ;)

kann man mittels CSS die Selected-Eigenschaft einer beliebigen Option einer Selectbox ermitteln. also ob überhaupt etwas ausgewählt ist?

Klar.

Sobald ich wieder Zeit finde bin ich da auch weiter dran.

Grüße,

RIDER

[Camping_RIDER]

Aloha ;)

Ups. Da...

kann man mittels CSS die Selected-Eigenschaft einer beliebigen Option einer Selectbox ermitteln. also ob überhaupt etwas ausgewählt ist?

Klar.

Sobald ich wieder Zeit finde bin ich da auch weiter dran.

...hab ich mich glatt verlesen. Sorry. Ich las Checkbox statt Selectbox.

Aber ja, auch bei einer Selectbox sollte das gehen - nämlich indem der Defaultfall (select) gestyled wird und der Fall, dass überhaupt was ausgewählt ist, auch:

select[value]

Ich habs noch nicht getestet, sollte aber funktionieren.

Falls das select einen Defaultwert hat muss man wahrscheinlich andersrum vorgehen - In dem Fall müsste man dann für select[value=defaultwert] die Default-Formatierung einsetzen und select[value] wäre dann wohl der Fall, dass irgendwas anderes selektiert ist. Muss man in dem Fall nur aufpassen, weil der Default-Fall spezifischer ist als der „Spezialfall“, das muss man bei der Anwendbarkeit der Regeln beachten (konkret: die Regeln des Defaultfall greifen im Spezialfall nicht und die Regeln des Spezialfall müssen im Defaultfall explizit zurückgenommen werden).

Grüße,

RIDER

[Camping_RIDER]

Aloha ;)

Ich habs noch nicht getestet, sollte aber funktionieren.

Mea culpa, ich muss das zurücknehmen. Ein Test zeigt, dass nichts davon funktioniert. Offenbar wird der gesetzte Wert nicht im selektierbaren Attribut des select registriert.

Grüße,

RIDER

[MudGuard]

Hi,

Mea culpa, ich muss das zurücknehmen. Ein Test zeigt, dass nichts davon funktioniert. Offenbar wird der gesetzte Wert nicht im selektierbaren Attribut des select registriert.

Das könnte daran liegen, daß das select-Element schlicht und einfach kein value-Attribut hat.

Der selektierte Wert ist ja im value-Attribut des ausgewählten option-Element hinterlegt, nicht im select-Element.

Und da das select-Element auch mehrere selektierte option-Elemente haben kann, wäre das eh schwierig, diese values (die ja auch Leerzeichen usw. enthalten dürfen) in ein value-Attribut im select-Element zu packen.

Was man hier bräuchte, wäre eine Pseudoklasse a la "successful" (so hieß das zumindest bei HTML 4.01 noch) oder "submittable" (dieses Element könnte beim Form-Submit mitgeschickt werden). Denn anhand des selected-Attributs der Option kann ja derzeit das select nicht ausgewählt werden.

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@MudGuard

Mea culpa, ich muss das zurücknehmen. Ein Test zeigt, dass nichts davon funktioniert. Offenbar wird der gesetzte Wert nicht im selektierbaren Attribut des select registriert.

Das könnte daran liegen, daß das select-Element schlicht und einfach kein value-Attribut hat.

Nein, auch das ändert nichts. Sonst müsste sich der Hintergrund in diesem Beispiel bei Auswahl von black ja schwarz färben. Tut er aber nicht.

Und da das select-Element auch mehrere selektierte option-Elemente haben kann

Designfehler. <select multiple> sollte es nicht geben. Und obwohl es das gibt, sollte es nicht verwendet werden.

LLAP 🖖

[Gunnar Bittersmann]

@@MudGuard

Das könnte daran liegen, daß das select-Element schlicht und einfach kein value-Attribut hat.

Oh, ich hatte dich vermutlich falsch verstanden. Du meintest nicht, dass dieses select-Element (das in Camping_RIDERs Beispiel) kein value-Attribut hat; sondern dass ein select-Element gar kein value-Attribut haben darf‽

LLAP 🖖

[MudGuard]

Hi,

Das könnte daran liegen, daß das select-Element schlicht und einfach kein value-Attribut hat.

Oh, ich hatte dich vermutlich falsch verstanden. Du meintest nicht, dass dieses select-Element (das in Camping_RIDERs Beispiel) kein value-Attribut hat; sondern dass ein select-Element gar kein value-Attribut haben darf‽

natürlich. Weil nicht sein kann, was nicht sein darf 😉

cu,
Andreas a/k/a MudGuard

[Camping_RIDER]

Aloha ;)

...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.

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.

Den Ansatz muss ich leider (mindestens vorerst) zurücknehmen. Offenbar lässt sich value mit dem Attributselektor nicht auslesen. Für Hinweise wieso das so ist wäre ich allerdings dankbar. (Liegt es daran, dass CSS nur HTML-Attribute frisst, die tatsächlich exakt so vorliegen, oder liegt es an select?)

Grüße,

RIDER

[Camping_RIDER]

Aloha ;)

(Liegt es daran, dass CSS nur HTML-Attribute frisst, die tatsächlich exakt so vorliegen, oder liegt es an select?)

Okay. Es liegt daran, dass die value-Eigenschaft kein Attribut von select ist, sondern lediglich eine DOM-Eigenschaft und damit nicht mit Attribut-Selektor selektierbar. Schade. Es hätte so schön sein können.

Der Zustand eines select lässt sich im Moment nur über option:checked selektieren - und das lässt leider nach aktuellem Stand kein Styling des Parent, geschweige denn seiner Geschwisterelemente, zu.

Das könnte sich in Zukunft ändern, aber das ist wirklich Zukunftsmusik.

Was die Frage von Franky angeht gibt es im Moment keine Möglichkeit, die ohne JavaScript auskommt.

Grüße,

RIDER

[TS]

Hello,

eine Stufe Subselect muss mit einem iFrame aber funktionieren ohne JS.
Hauptselect steht im Form im Hauptdokument mit Target-Attribut aufs iFrame. Das ist am Anfang leer und dadurch quasi unsichtbar. Nach dem Select erscheint die Sub-Auswahl im iFrame.

Da man mit CSS ja scheinbar nicht feststellen kann, ob etwas selected wurde, geht das nur für eine Stufe. Man muss die tieferen zurücksetzen können, wenn davor wieder etwas geändert wurde, bzw. sie disablen/enablen können. Da aber nur ein Target im Request angegeben werden kann, (das alte "wie kann ich mehrere Frames...?") kann man immer nur ein Frame bedienen.

Bei passender Serverlogik könnte man die iFrames aber ggf. schachteln. Jedes aktive iFrame bringt also schon ein neues leeres als Kindelement und Target seines Forms mit. Ändert man nun etwas in einem höherwertigen Select, schickt der Server nur wieder die passende Subselectauswahl als Antwort mit einem zusätzlichen leeren Frame für die Antwort auf die Antwort, usw..

Das müsste mMn gehen!

Bin unterwegs, leider ohne Lappi...

Liebe Grüße
Tom S.

[Camping_RIDER]

Aloha ;)

eine Stufe Subselect muss mit einem iFrame aber funktionieren ohne JS.
Hauptselect steht im Form im Hauptdokument mit Target-Attribut aufs iFrame. Das ist am Anfang leer und dadurch quasi unsichtbar. Nach dem Select erscheint die Sub-Auswahl im iFrame.

[...]

Bei passender Serverlogik könnte man die iFrames aber ggf. schachteln. Jedes aktive iFrame bringt also schon ein neues leeres als Kindelement und Target seines Forms mit. Ändert man nun etwas in einem höherwertigen Select, schickt der Server nur wieder die passende Subselectauswahl als Antwort mit einem zusätzlichen leeren Frame für die Antwort auf die Antwort, usw..

Das müsste mMn gehen!

Ja, du hast da Recht, das sollte gehen! Die Rückkehr aus der Verschachtelung kann mit target="_top" erfolgen.

Es ist aber eine Lösung, die ich keinesfalls empfehlen wollen würde - schon alleine wegen der Frames, die jedes erdenkliche Layout gnadenlos aufbrechen und gleichzeitig klare Killer für Barrierefreiheit sind (man denke nur mal an responsives Layout mit iframes oder die Ungewissheit, wie die Abmessungen der iframes sein müssen).

Es gibt für mich ein weiteres Problem: Und zwar, dass du ohne Einsatz von JavaScript nach jeder Auswahl noch einen Submit-Button drücken musst, damit der nächst-tiefer verschachtelte Iframe (also der nächste Teil des Formulars) lädt. Das ist sehr unintuitiv - vor allem dann, wenn sich das Formular für Nutzer wie "aus einem Guss" anfühlen soll. Ich als Nutzer hätte da irgendwie Angst, ein unfertiges Formular abzuschicken.

Wenn die Aufgabenstellung lautet, einen solchen Mechanismus unbedingt ohne JavaScript-Nutzung anzubieten, dann ist deine Idee wohl eine mögliche Strategie.

Wobei immer zu bedenken ist, dass sich ein solcher Ansatz nicht mehr sehr stark davon unterscheidet, Formulare mehrseitig anzubieten - und das ist ja für den TO hier beispielsweise ja gerade etwas, was er eigentlich vermeiden wollte.

Mir gefällt die Idee; aber im Zweifel, wenn ich vor der Wahl stehe, Iframes zu verschachteln oder mein Formular einfach mehrstufig (mit mehreren Seiten) anzubieten, würde ich mich für zweiteres entscheiden. Meine Nerven werden es mir danken, wenn ich ihnen den Versuch erspare, die verschachtelten Iframes zu stylen.

Grüße,

RIDER

[Gunnar Bittersmann]

@@Camping_RIDER

[Iframes], die jedes erdenkliche Layout gnadenlos aufbrechen und gleichzeitig klare Killer für Barrierefreiheit sind

??

(man denke nur mal an responsives Layout mit iframes oder die Ungewissheit, wie die Abmessungen der iframes sein müssen).

iframe
{
  max-width: 100%;
  max-height: 100vh;
}

(gern auch etwas weniger)

Wenn die Aufgabenstellung lautet, einen solchen Mechanismus unbedingt ohne JavaScript-Nutzung anzubieten

Eine solche Aufgabenstellung ist wegen ihrer Unsinnigkeit nicht auszuführen, sondern zurückzuweisen.

wenn ich vor der Wahl stehe, Iframes zu verschachteln oder mein Formular einfach mehrstufig (mit mehreren Seiten) anzubieten, würde ich mich für zweiteres entscheiden.

Natürlich. Das ist die Grundfunktionalität. Die Verbesserung mit JavaScript, dass es ein Formular ohne Wechsel der Seite gibt, ist progressive enhancement.

LLAP 🖖

[Camping_RIDER]

Aloha ;)

(man denke nur mal an responsives Layout mit iframes oder die Ungewissheit, wie die Abmessungen der iframes sein müssen).

iframe
{
  max-width: 100%;
  max-height: 100vh;
}

(gern auch etwas weniger)

Nö. Davon kriegt mein iframe nur ne Standardgröße von 300x150 Pixel und hässliche Scrollbalken. Damit der iframe die height von dem bekommt, was er darstellen soll, benötigt man JavaScript, um diese Höhe aus dem geladenen Dokument zu ermitteln (sofern nicht die SOP dazwischengrätscht). Wenn man das nicht macht (oder wegen SOP nicht kann) ergibt sich da alles mögliche, aber kein Eindruck eines Formulars aus einem Guss.

Grüße,

RIDER

[Franky]

Moin, erstmal danke für die Antworten (vor allem dir Janosch, weil du deine immer wieder überarbeitest).
Ich hab das jetzt mit nem XMLHttpRequest realisiert und es funktioniert einwandfrei.
Hier mein Code:
Javascript:

function zeigFach(name){
	if(name == ""){
		document.getElementById("fachWahl").innerHTML = "";
		return;
	} else{
		if (window.XMLHttpRequest) {
			// Code für IE7+, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
		} else {
			// Code für IE6 und IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange = function() {
			if (this.readyState == 4 && this.status == 200) {
			document.getElementById("fachWahl").innerHTML = this.responseText;
			}
		};
		xmlhttp.open("GET","getfach.php?name="+name,true);
		xmlhttp.send();
	}
}

HTML:

<h1>Personen</h1>
<p>Bitte wählen Sie eine Person und das Fach aus.</p>
<?php 	include('php/message.php');	?>
<label for="person">Person:</label><br>
<select name="person" id="person" onchange="javascript:zeigFach(this.value);">
	<option value="" selected>Bitte wählen Sie eine Person...</option>
<?php	while($row = $ldata->fetch_array(MYSQLI_ASSOC)):	?>
	<option value="<?php echo $row['Name'];	?>" ><?php echo $row['Anrede'] . ' ' . $row['Titel'] . ' ' . $row['Vorname'] . ' ' . $row['Name'] . ', ' . $row['Fach 1'] . ' / ' . $row['Fach 2'] . ' / ' . $row['Fach 3'];	?></option>
<?php 	endwhile;	?>
</select><br>
<div id="fachWahl">Bitte wählen Sie eine Person um weiter Informationen zu erhalten.</div>

Die Datei getfach.php:

include 'php/connect.php';
if($mysqli->connect_error){
	$message['fehler'] = 'Datenverbindung fehlgeschlagen: ' . $mysqli->connect_error;
} else{
	// Name abrufen
	$person = $_GET['name'];
	
	// Tabellen abfrage 2
	$data2 = sprintf(
		"SELECT `Fach 1`, `Fach 2`, `Fach 3`, `Info`, `Raum`
		FROM `Personen` 
		WHERE `Name` = '%s'",
		$mysqli->real_escape_string($person)
	);
	$ldata2 = $mysqli->query($data2);
	$lrow = $ldata2->fetch_array(MYSQLI_ASSOC);
	
	// Formular ausgeben
	echo	'<form method="post" action="person.php">
			<label for="fach">Fächer:</label><br>
			<input type="button" name="f1" id="fach" value="' . $lrow['Fach 1'] . '">
			<input type="button" name="f2" id="fach" value="' . $lrow['Fach 2'] . '">
			<input type="button" name="f3" id="fach" value="' . $lrow['Fach 3'] . '"><br>
			<br>
			<fieldset>
				<p><b>Info: </b>' . $lrow['Info'] . '</p>
				<p><b>Raum: </b>' . $lrow['Raum'] . '</p>
			</fieldset>
			<br>
			<input type="submit" name="absenden" value="Weiter">
		</form>';
}

Danke nochmal
Franky

[pl]

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

Mit JavaScript. Bei einem Legacy Submit hingegen geht immer alles raus, was innerhalb des <form>-Elemtents name+value hat.

Natürlich könntest Du nach der ersten Auswahl ein Submit machen und dasselbe Formular mit qualifizierten Daten erneut laden: Wenn das Formular ein Template ist mit den Platzhaltern, die dafür notwendig sind, ist das technisch ohne Weiteres machbar und beliebig wiederholbar solange bis Du dem Benutzer einen final-<button> gibst womit er die Eingabe beenden kann.

Schönen Sonntag!

[Camping_RIDER]

Aloha ;)

Natürlich könntest Du nach der ersten Auswahl ein Submit machen und dasselbe Formular mit qualifizierten Daten erneut laden: Wenn das Formular ein Template ist mit den Platzhaltern, die dafür notwendig sind, ist das technisch ohne Weiteres machbar und beliebig wiederholbar solange bis Du dem Benutzer einen final-<button> gibst womit er die Eingabe beenden kann.

Das ist eigentlich ne coole Idee und auch ein ganz guter Ausgangspunkt, um darauf mit Javascript ein progressive enhancement aufzubauen.

Grüße,

RIDER

[TS]

Hello,

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

Indem man g.eich mehrere For ulare daraus macht?

Liebe Grüße
Tom S.

[dedlfix]

Tach!

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

Auswerten ist serverseitige Programmierung. Du bist da frei, nur bestimmte Daten anzufassen, wenn du über ein geeignetes Kriterium erkennst, dass es nur die erste Stufe der Verarbeitung sein soll.

Oder meintest du, wie man dem Browser beibringen kann, nur ein Teil des Formulares zu versenden? Jedenfalls nicht ohne disabled-Attribute o.ä. oder Weglassen der noch nicht benötigten Elemente.

dedlfix.