JS: Felder einblenden, wenn bestimmter Wert eingegenen

edit | delete

Autor: Ralf v.d.Mark

eingetragen: Dienstag, 06. August 2024 um 14:05 Uhr (32/2024 Kalenderwoche)

geändert: Dienstag, 06. August 2024 um 15:24 Uhr (32/2024 Kalenderwoche)

Keywords: Formularfelder einblenden ausblenden Werte getElementsByClassName

Kategorien: JavaScript,

Text:

Weitere Formular-Felder (Kind-Elemente) einblenden, wenn in einem definierten Formular-Feld (Eltern-Element) ein bestimmter Wert eingegeben/gecheckt/selektiert wurde.


Anleitung im Quelltext (Quellcode enthält komplette JavaScript-Datei)

Quellcode:   

/**
 * Diese Datei enthält JavaScripts um Formularfelder aus- oder einzublenden.
 *
 * @file       /js/fnc_felderAusUndEinblenden.js
 * @author     Artur Smolen, Fa. Explicatis <artur.smolen@explicatis.com>
 * @author     Ralf von der Mark (vdM), Ref. 223, BLE <Ralf.vonderMark@BLE.de>
 * @author     Varsamis Karamanidis (Macky), Ref. 223, BLE <Varsamis.Karamanidis@ble.de>
 * @copyright  2024, BLE
 * @version    06.08.2024, GIT: Yes
 *
 * @example
 * 1.) Beispiel für Steuerfeld mit bestimmten Value:
 *
 *     <div class="element-group">
 *         <label>Möchten Sie weitere Felder sehen?*</label>
 *         <label for="NEU_ElternElement_Nr_1">
 *             <input type="checkbox" name="NEU_ElternElement_Nr_1"
 *                    value="ja! (Felder einblenden)"
 *                    data-feld-id="NEU_ElternElement_Nr_1"
 *                    data-feld-wert="ja! (Felder müssen eingeblendet werden)"
 *                    id="NEU_ElternElement_Nr_1"
 *                    class="rmsCheckBoxPers">
 *                        ja! (Felder einblenden)
 *           </label>
 *     </div>
 *
 * 2.) Beispiel für Kind-Felder (anzeigen, wenn Steuerfeld einen bestimmten Value übergibt)
 *      <div class="element-group NEU_ElternElement_Nr_1">
 *         <label>
 *             Nachname:
 *             <input type="text" name="nachname" value="" id="nachname">
 *         </label>
 *     </div>
 *
 * 3.) JavaScript einbinden
 *     <script src="fnc_felderAusUndEinblenden.js"></script>
 *
 * 4.) Beispiel für CSS-Code:
 *      .langsamEinblenden {
 *          animation: fadeIn 3s;
 *      }
 *     @keyframes fadeIn {
 *         0% {
 *             opacity: 0;
 *         }
 *         100% {
 *             opacity: 1;
 *         }
 *     }
 *     .langsamVerstecken {
 *         display: none !important;
 *     }
 */

function blendeFelderEinOderAus(feldZurSteuerung, zielWert) {
    if (!feldZurSteuerung || !zielWert) {
        console.log('Parameter fehlen! Funktion "blendeFelderEinOderAus()" beendet!');
        return;//Fehler abgefangen!
    }
    var feldObjektZurSteuerung = document.getElementById(feldZurSteuerung);
    if (!feldObjektZurSteuerung) {
        console.log('Feld-Objekt "' + feldZurSteuerung + '" nicht gefunden/eindeutig!');
        return;//Fehler abgefangen!
    }
    console.log('Uebergebender Wert: "', feldObjektZurSteuerung.value,
        '" / Ziel-Wert: "', zielWert, '" / Feld-Type: ', feldObjektZurSteuerung.type);
    let feldBereiche = document.getElementsByClassName(feldZurSteuerung);
    for (var feldBereich of feldBereiche) {
        const hatZielWert = (zielWert === feldObjektZurSteuerung.value);
        const istCheckbar = ['radio', 'checkbox'].includes(feldObjektZurSteuerung.type);
        const istGecheckt = (feldObjektZurSteuerung.checked === true);
        console.log('hatZielWert : ', hatZielWert,
            ' / istCheckbar : ', istCheckbar,
            ' / istGecheckt : ', istGecheckt);
        let felderRequired = feldBereich.getElementsByClassName("required");
        if ((hatZielWert && !istCheckbar)
            || (istCheckbar && hatZielWert && istGecheckt)) {
            console.log("Steuerfeld-Wert ist *gefunden*!");
            feldBereich.style.display = "block";
            feldBereich.classList.remove("langsamVerstecken");
            feldBereich.classList.add("langsamEinblenden");
            for (var feldRequired of felderRequired) {
                feldRequired.setAttribute("required", "required");
            }
        } else {
            console.log("Steuerfeld-Wert ist *uninteressant*!");
            feldBereich.classList.remove("langsamEinblenden");
            feldBereich.classList.add("langsamVerstecken");
            feldBereich.style.display = "none";
            for (var feldRequired of felderRequired) {
                feldRequired.removeAttribute("required");
            }
        }
    }
}

document.querySelectorAll("[data-feld-id]").forEach(element => {
    console.log(element.dataset);
    blendeFelderEinOderAus(element.dataset.feldId, element.dataset.feldWert);
    element.addEventListener("change", () => {
        blendeFelderEinOderAus(element.dataset.feldId, element.dataset.feldWert);
    })
});