"Texteingabe mit Auswahlempfehlung" und Javascript

Question

Hallo zusammen,
ich habe folgendes Problem:
Ich würde gerne abhängig von der Auswahl eine weitere Auswahl anbieten (bisher exakt analog Beispiel 3: Alternative Fragen unter https://www.soscisurvey.de/help/doku.php/de:create:dynamic). Allerdings besteht die Auswahl der Lieblingsstadt nicht in einem Dropdown Auswahlfeld, sondern in einer "Texteingabe mit Auswahlempfehlung". In der Folge wird mir allerdings nicht nur die Frage zum Bauwerk der angegeben Stadt angezeigt, sondern alle gleichrangigen Fragen (gleichzeitig blockAB06 blockAB07 und blockAB08).
Handelt es sich um einen Programmierfehler von mir, der sich einfach umgehen lässt, oder ist es einfach mit dem Fragetyp nicht möglich Fragen auf der gleichen Seite dynamisch ein und auszublenden, da es sich hierbei um eine Mischform aus Textfeld und Dropdownauswahl handelt?
Istin den if-Bedingungen der Event Handler der numerische Code zu hinterlegen (also 1 für München, 2 für Hamburg und 3 für London) oder handelt es sich zu dem Zeitpunkt noch um einen Text der Hinterlegt werden muss?
Viele Dank für die Hilfe

Answer 1

Bei JavaScript-Fragen wäre ein Pretest-Link direkt (!) zur betroffenen Seite hilfreich. Oftmals ist es nur eine Kleinigkeit, welche in der Fehlerkonsole des Browsers schnell herauszufinden ist.

Unabhängig davon funktioniert die Texteingabe mit Auswahlempfehlung ein wenig anders als das normale Dropdown. Wenn Sie etwas im JavaScript das Texteingabefeld abfragen, dann bekommen Sie einen String, keinen Antwortcode.

Vielleicht möchten Sie kurz erklären, weshalb Sie eine Auswahlempfehlung verwenden? Normalerweise setzt man Filter wie den oben genannten eigentlich nur dann ein, wenn man relativ wenige Auswahloptionen hat. Und dann ist das "normale" Dropdown eigentlich in aller Regel handlicher.

Comments

Anbei finden Sie den ein Pretest-Link zu einer Beispielumfrage, die den gleichen Darstellungsfehler enthält, als auch die gleiche Meldung in der Fehler-Console.
https://www.soscisurvey.de/test114842/?act=gX6Ro42efrX5dZfgMUi0vbKc

Ich habe eine Reihe an Auswahloptionen in der ersten Auswahlfrage. Nicht für jeden Wahlkreis möchte ich die Gemeinden abfragen. Es sollen aber auch Teilnehmer mitmachen können, die Ihren Wahlkreis nicht kennen sondern vielleicht nur den Ort, bspw. Personen aus Lübbecke kennen vielleicht den Wahlkreisnamen "Minden-Lübbecke" nicht und würden bei einer Dropwdownauswahl unter L suchen und nicht unter M.

Answer 2

Danke für den Pretest-Link.

Die JavaScript-Fehlerkonsole im Browser (die Sie natürlich auch öffnen können, einfach mal fix für Ihren Browser googeln) zeigt folgendes:

TypeError: dropdown is null

Dabei verweist sie auf folgende Zeile im Code:

var auswahl = dropdown.value;

Okay, wenn die Variable "dropdown" nicht korrekt gesetzt ist, kann man kein "value" davon abfragen. Sehen wir uns also an, wo sie gesetzt wird:

var dropdown = document.getElementById("TT01");

Dann liegt die Vermutung nahe, dass es kein HTML-Element mit der Kennung TT01 gibt. Das lässt sich mit dem Inspektor (den man ebefnalls im browser bei den Entwicklertools findet) durch einen Klick auf das Eingabefeld schnell prüfen. Dort findet man folgenden HTML-Code für das Eingabefeld:

<input id="TT01e01" name="TT01e01" tabindex="50" type="text" style="width: 100%">

Die korrekte HTML-ID wäre also "TT01e01". Und dort ist dann auch wirklich der Wert "Aachen I" vermerkt und kein numerischer Code. Also muss folgende Zeile raus:

auswahl = parseInt(auswahl);

... und das ganze parseInt() darunter, denn Sie möchten keine Zahl. Und der Filter prüft dann natürlich auch nur auf den Text:

if (auswahl == "Aachen I") {

Comments

Vielen Dank für die sehr ausführliche Hilfe. Ich hätte noch eine Anschlussfrage: Wenn ich bspw. "Aachen I" komplett selbstständig eingebe und mit Enter bestätige passiert leider nichts, ich muss immer erst das Dropdown-Auswahlitem anklicken. Damit wird aber auch kein Event Handler ausgeführt. Erst nachdem ich nochmal in das Texteingabefeld klicke, wird der Handler ausgeführt. Meiner Meinung nach ist dies ein unnötiger Schritt. Wenn der Teilnehmer dies nicht weiß wird der Handler nicht ausgeführt. Lässt sich dieser stattdessen bereits mit dem Anklicken des Auswahl-Items "Aachen I" ausführen?
Der Pretest-Link ist immer noch aktiv

---

> Wenn ich bspw. "Aachen I" komplett selbstständig eingebe und mit Enter bestätige passiert leider nichts, ich muss immer erst das Dropdown-Auswahlitem anklicken.

Im Moment "horcht" Ihr JavaScript auf das "change" und "click" Event dessen, was Sie in der Variable "dropdown" gespeichert haben (das ist ja eigentlich das Texteingabefeld:

SoSciTools.attachEvent(dropdown, "change", blender);
SoSciTools.attachEvent(dropdown, "click", blender);

Im Prinzip ist die Zeile darunter schon die Lösung:

SoSciTools.attachEvent(textfeld, "keyup", blender);

... nur müsste dort statt "textfeld", wo Sie weiter oben einfach den Text speichern, nicht das Eingabefeld, "dropdown" heißen.

---

Dane Ihnen. Der Fehler hätte mir mittlerweile selber auffallen müssen. Das durch aktives Auswählen einer der Optionen aber bereits der Handler ausgeführt wird geht nicht? Also der Teilnehmer gibt "Sol" ein, Ihm werden zwei Auswahlmöglichkeiten angezeigt und er wählt "Solingen I" aus (Warum sollte er weiter schreiben, wenn Ihm bereits eine passende Option zur Auswahl angezeigt wird?) Dann wird der Event Handler aber nicht wie eigentlich gewünscht ausgeführt, sondern er muss nochmal in da Textfeld klicken.

---

>  Das durch aktives Auswählen einer der Optionen aber bereits der Handler ausgeführt wird geht nicht?

Dafür sollte ein "onchange" Handler auf dem Textfeld ausreichen. Allerdings bin ich nicht 100%ig sicher, ob das in allen Browsern auslöst. Wenn nicht, dann habe ich noch eine bessere Lösung in der Hinterhand. Aber dafür muss ich erst in den Quelltext schauen.

---

Ich habe die Funktionalität mit MS Edge, IE & Chrome geprüft. In allen Webbrowsers muss man nachdem man die Auswahl getätigt hat erneut in das Textfeld klicken, damit der Eventhandler ausgeführt wird.

---

Die Auswahlempfehlung bietet nun (zunächst nur auf www.soscisurvey.de) eine entsprechende JavaScript-Schnittstelle: https://www.soscisurvey.de/help/doku.php/de:create:questions:suggest#javascript-anbindung