Erweiterte Mehrfachauswahl: Textfeld bei Klick auf Auswahloption anzeigen

Question

Ich komme nicht mehr weiter. Ich möchte eine Erweiterte Mehrfachauswahl mit 76 Auswahloptionen erstellen. Der Aufbau ist dabei folgendermaßen:

01 Hämatologische Erkrankungen 
- 02 Autoimmunhämolytische Anämie (AIHA)
- 03 Akute Lymphatische Leukämie (ALL) 
- 04 Akute Myeloische Leukämie (AML) 
- 05 Akute Promyelozyten Leukämie (APL) 
- 06 Amyloidose (Leichtketten (AL) - Amyloidose) 
- 07 Aplastische Anämie 
- 08 Beta Thalassämie 
- 09 Blastische plasmazytoide dendritische Zellneoplasie (BPDCN) 
- 10 Bone Marrow Failure Syndrome (Fanconi A., Telomeropathien u. a.)
- 11 Burkitt Lymphom
- 12 Chronische Lymphatische Leukämie (CLL) 
- 13 Chronische Myeloische Leukämie (CML) 
- 14 Chronische Myelomonozytäre Leukämie (CMML) 
- 15 Chronische Neutrophilen-Leukämie (CNL) 
- 16 Diffuses großzelliges B-Zell-Lymphom 
- 17 Essentielle (oder primäre) Thrombozythämie (ET) 
- 18 Extranodales Marginalzonen-Lymphom (MALT LYMPHOM) 
- 19 Follikuläres Lymphom 
- 20 Haarzell-Leukämie (HZL) 
- 21 Hämophagozytische Lymphohistiozytose (HLH) 
- 22 HIV-assoziierte Lymphome 
- 23 HIV-assoziierte Neoplasien 
- 24 Hodgkin Lymphom 
- 25 Immundefekte, primär / sekundär
- 26 Immunthrombozytopenie (ITP) 
- 27 Mantelzell-Lymphom 
- 28 Mastozytose, systemische  
- 29 Morbus Castleman 
- 30 Morbus Waldenström (Lymphoplasmozytisches Lymphom) 
- 31 Multiples Myelom 
- 32 Myelodysplastische Neoplasien (Myelodysplastische Syndrome, MDS) 
- 33 Myeloische Neoplasien mit Eosinophilie (früher: Eosinophilie - assoziierte Myeloproliferative Erkrankungen (MPN-Eo)) 
- 34 Nodales Marginalzonen Lymphom 
- 35 Paroxysmale nächtliche Hämoglobinurie (PNH) 
- 36 Periphere T-Zell Lymphome 
- 37 Polycythaemia Vera (PV) 
- 38 Primäre Myelofibrose (PMF) 
- 39 Sichelzellkrankheiten 
- 40 T-Zell Prolymphozytenleukämie 
- 41 Thrombozytopenien
- 42 ZNS Lymphome 
43 Solide Tumore
- 44 Analkarzinom
- 45 Biliäre Karzinome 
- 46 Blasenkarzinom (Urothelkarzinom) 
- 47 CUP Syndrom - Krebserkrankungen mit unbekanntem Primärtumor 
- 48 Endometriumkarzinom
- 49 Ewing Sarkom 
- 50 Gastrointestinale Stromatumoren (GIST) 
- 51 Gliome im Erwachsenenalter 
- 52 HIV-assoziierte Lungenkarzinome 
- 53 HIV-assoziiertes Analkarzinom 
- 54 Kaposi-Sarkom 
- 55 Keimzelltumoren des Mannes 
- 56 Kolorektalkarzinom 
- 57 Kopf-Hals-Plattenepithelkarzinome 
- 58 Lungenkarzinom, kleinzellig (SCLC) 
- 59 Lungenkarzinom, nicht-kleinzellig (NSCLC) 
- 60 Magenkarzinom 
- 61 Mammakarzinom der Frau 
- 62 Mammakarzinom des Mannes 
- 63 Melanom 
- 64 Neuroendokrine Neoplasien
- 65 Nierenzellkarzinom (Hypernephrom) 
- 66 Ösophaguskarzinom 
- 67 Osteosarkome 
- 68 Ovarialkarzinom 
- 69 Pankreaskarzinom 
- 70 Peritoneales Mesotheliom und Pseudomyxoma peritonei 
- 71 Pleuramesotheliom
- 72 Prostatakarzinom 
- 73 Schilddrüsenkarzinom
- 74 Vulvakarzinom
- 75 Weichgewebssarkome (maligne Weichgewebstumoren) des Erwachsenen 
- 76 Zervixkarzinom

Außer Option 01 und 43 soll bei allen Optionen bei Click auf eine Option ein Textfeld eingeblendet werden, dass dann auch ausgefüllt werden muss, aber nur so lange die Option ausgewählt ist. Ich scheitere jedoch schon daran die Textfelder bei klick einzublenden. Ich bin auch kein Programmierer und habe mit Halbwissen und einer Plausibilitätsprüfung folgenden Code erstellt:

<script type="text/javascript">
function DynamicFilter(auswahlID, frageID) {
  var optionA = document.getElementById("F002" + frageID);
  var textEingabe = document.getElementById(auswahlID + "_01");

  function toggle() {
    if (optionA.checked) {
      textEingabe.style.display = "block";
      textEingabe.required = true;
    } else {
      textEingabe.style.display = "none";
      textEingabe.required = false;
      textEingabe.value = "";
    }
  }

  optionA.addEventListener("change", toggle);

  toggle();
}

// Aufruf für jede Auswahloption und Texteingabefeld
for (var i = 2; i <= 76; i++) {
  if (i !== 43) {
    var frageID = (i < 10 ? "0" : "") + i;
    var auswahlID = "EF" + (i < 10 ? "0" : "") + i;
    DynamicFilter(auswahlID, frageID);
  }
}
</script>

Der Code scheint auch nicht falsch zu sein. Ich habe diesen unterhalb der Frage auf der entsprechenden Seite als HTML-Code eingefügt. Zumindest ist der Code im Pretest auch auf der entsprechenden Seite vorhanden, scheint aber nichts zu machen. Kann mir jemand helfen. Vielleicht sagen, wie der Code korrekt aussehen muss bzw. wie ich noch sicherstellen kann das ein mit der Auswahloption angezeigter Freitext als Pflichtfeld erscheint?
Das Handbuch hat mir zwar schon erklärt was nicht funktioniert, aber was funktioniert habe ich trotz langer Suche nicht gefunden.

Hier noch der Link zum Pretest:
https://www.soscisurvey.de/off-label-use/?act=USc0rnHuSokTOzkx3znx43YQ

Answer 1

Wenn Sie 76 Auswahloptionen haben, brauchen Sie - wenn ich Ihre Frage korrekt verstehe - auch 76 Texteingabefelder. Oder zumindest 43 Eingabefelder für die ersten 43 Optionen. Es scheint mir nur bedingt effizient, das manuell mittels Platzhaltern zu realisieren.

Nachdem Sie nur zwei Oberkategorien haben, würde ich empfehlen, dass Sie stattdessen mit zwei Fragen vom Typ "Mehrfachauswahl" arbeiten. Dort können Sie die Eingabefelder einfach für die einzelnen Optionen aktivieren - und SoSci Survey kümmert sich im Bedarfsfall auch darum, dass überprüft wird, ob diese (bei ausgewählter Option) auch ausgefüllt wurden.

Ob man das Ein- und Ausblenden braucht, ist Geschmackssache. Aber ich würde vorschlagen, dass wir uns erst einmal um die Eingabefelder und die Prüfung kümmern, und das Ein-/Ausblenden danach eventuell im zweiten Schritt angehen.

Comments

Da waren Sie zu schnell. Ich habe im Anschluss erst den Code eingefügt, weil mir aufgefallen ist, dass ich in meinen Code noch einen Fehler hatte. Doch auch mit der Korrektur (ist im Kommentar oben auch schon korrigiert) bekomme ich in der Browserkonsole eine Fehlermeldung. Ich weiß nicht wo der Fehler ist. Wie schon erwähnt, bin ich kein Profi in der Programmierung.

---

> Uncaught TypeError: optionA is null

Das bezieht sich auf diese Zeile:

optionA.addEventListener("change", toggle);

Und definiert wird optionA hier:

var optionA = document.getElementById("F002" + frageID);

Nachdem Sie auf F002_1 etc. hinaus wollen, müssten Sie vermutlich nur den Unterstrich ergänzen:

var optionA = document.getElementById("F002_" + frageID);

Aber lassen Sie sich zur Sicherheit in der Konsole anzeigen, was da herauskommt:

var optionA = document.getElementById("F002_" + frageID);
console.log("F002_" + frageID);

> Wie schon erwähnt, bin ich kein Profi in der Programmierung.


Schon klar, aber daran arbeiten wir ja gerade ;)

---

Ich habe den Unterstrich ergänzt. Leider war das nicht die Lösung. Jetzt hat sich der Fehler "Uncaught TypeError: Cannot read properties of null" vermehrt. Es scheint mit der "toggle();" Funktion zu tun zu haben. Ich weiß aber nicht wieso.

---

Die Meldung stamm daher, dass auch das zweite Element nicht gefunden wird, in dieser Zeil hier:

var textEingabe = document.getElementById(auswahlID + "_01");

Als auswahlID  übergeben Sie im Moment "EF" + frageID - wenn die frageID 1 ist, kommt da EF1 heraus, es müsste aber EF01 sein.

Ersetzen Sie daher

var auswahlID = "EF" + frageID;

Wie folgt:

var frageID0 = frageID;
if (frageID0 < 10) {
  frageID0 = "0" + frageID0;
}
var auswahlID = "EF" + frageID0;

Es ist wichtig, dass Sie die Variable frageID nicht ändern, sondern nur diese neue frageID0, denn die Zahl ohne 0 brauchen wir ja für die Auswahlfelder.

---

Vielen, herzlichen Dank für die Hilfe. Jetzt scheint es zu funktionieren. Wenn nicht im Pretest jetzt noch Probleme Auftreten, oder die Tester was geändert haben wollen, ist das jetzt soweit fertig und verwendbar.