Inhalt aus Inputfeld nehmen und Text suchen

draexler · 16. August 2023

Wie kann man den noch die Auswahlfelder ausblenden/zurücksetzten? Aktuell wird nur der Radiobutton zurückgesetzt und der Feldinhalt gelöscht.

Finde dazu nichts.

Sempervivum · 16. August 2023

Das geht sicher auch, ich muss es mir aber erst ansehen, wie Du das dynamische Einblenden gemacht hast. Ich bin jetzt erst Mal einige Stunden außer Haus, mache das später.

Sempervivum · 16. August 2023

Ich habe mir das jetzt angesehen. Du hast das mit inline-notierten Eventlistenern gemacht und das wird dann ein wenig lang. Daher habe ich es ein wenig kompakter angelegt mit einer Funktion, der man ein oder mehrere IDs übergibt und die dann die zugehörigen p-Elemente sichtbar und alle anderen unsichtbar macht:

Code

        $(document).ready(function () {
            // hier drin alles wie bisher
        });

        // Elemente zeigen oder verbergen entspr. Parameter
        function showHide(elemIds) {
            // Alle p-Elemente bereitstellen, deren ID mit einem p beginnt
            const elemsShowHide = document.querySelectorAll('p[id^="p"]');
            // Über alle diese p-Elemente:
            elemsShowHide.forEach(item => {
                // Ist das aktuelle Element in der Liste im Parameter?
                if (elemIds.includes(item.id)) {
                    // Element zeigen
                    item.style.display = 'block';
                } else {
                    // Element verbergen
                    item.style.display = 'none';
                }
            });
        }
    </script>

Alles anzeigen

Die Funktion muss außerhalb des document-ready liegen, damit sie später verfügbar ist.

Die Eventlistener musst Du dann anpassen und diese Funktion verwenden:

Code

        <fieldset style="text-align: left; width:280px">
            <legend><big><span style="font-size:16px;"><span
                            style="font-family:tahoma,geneva,sans-serif;">Auswahl:</span></span></big></legend>
            <div>
                <!-- p#p1 zeigen, alle anderen verbergen wenn dieser Radiobutton gedrückt wird -->
                <input type="radio" id="liednummer1" name="verein" value="liednummer1"
                    onchange="showHide(['p1']);">
                <label for="liednummer1"><big><span style="font-size:16px;"><span
                                style="font-family:tahoma,geneva,sans-serif;">Eine
                                Titelnummer</span></span></big></label>
            </div>
            <div>
                <!-- p#p2 zeigen, alle anderen verbergen wenn dieser Radiobutton gedrückt wird -->
                <input type="radio" id="liednummer2" name="verein" value="liednummer2"
                    onchange="showHide(['p2']);">
                <label for="liednummer2"><big><span style="font-size:16px;"><span
                                style="font-family:tahoma,geneva,sans-serif;">Zwei
                                Titelnummern</span></span></big></label>
            </div>
            <div>
<!-- usw. in dem selben Stil für die folgenden Elemente -->

Alles anzeigen

Soll gar kein p-Element angezeigt werden, musst Du ein leeres Array übergeben:

Code

showHide([]);

Auf diese Weise können wir auch beim Reset alle Elemente verbergen:

Code

        <p style="display:none;" id="p7">
            <input style="height: 40px; width: 308px; font-size:20px; color:#fafafa; background-color: #1c9407;"
                id="send-it" type="button" value="Übertragen"><br><br>
            <input style="height: 30px; width: 308px; font-size:20px; color:#fafafa; background-color: #cf0a35;"
                type="button" value="Reset" onClick="showHide([]);">
        </p>

Das Ganze habe ich nur oberflächlich getestet, einen genauen Test überlasse ich dir.

draexler · 16. August 2023

Super, hat funktioniert. Danke dir.

draexler · 17. August 2023

Wie muss ich den den ShowHide hier eintragen, damit beim erfolgreichen versenden die Felder zurückgesetzt werden?

Code

}
const invalidElems = document.querySelectorAll('form :invalid');
if (invalidElems.length == 0 && isValid) {
params = new FormData();
params.append('json', JSON.stringify(json));
params.append('mac', "0000021EDF033B15");
fetch('/jsonupload', {
method: 'post',
body: params
}).then(() => {
document.getElementById('jsonupload').reset();
alert('Eingabe wurde an die TAGS übertragen');
}).catch(reason => alert(reason));

Alles anzeigen

Sempervivum · 17. August 2023

Das sollte funktionieren, wenn Du den Funktionsaufruf im then-Zweig hinzu fügst:

Code

fetch('/jsonupload', {
method: 'post',
body: params
}).then(() => {
document.getElementById('jsonupload').reset();
showHide([]);
alert('Eingabe wurde an die TAGS übertragen');
}).catch(reason => alert(reason));

Inhalt aus Inputfeld nehmen und Text suchen

Jetzt mitmachen!

Teilen