Inhalt aus Inputfeld nehmen und Text suchen

Setz mal bei allen Eingabefeldern, die erforderlich sind, das Attribut required, dann wird ebenfalls das Attribut ":invalid" gesetzt, wenn es leer ist.

    <label>Lied 1: <input id="input-liedname-1" list="datalist-lieder" type="text" required></label>

Ja, ich denke ich verstehe es. Du hast da ja ein variables Formular wo die Felder nach Bedarf ein- und ausgeblendet werden. Wahrscheinlich kommen wir dann nicht daran vorbei, es Feld für Feld zu prüfen, wie Du es anfangs hattest. Ich sehe mir das mal an.

Ja, ich denke, wir sollten das so machen, das ist wahrscheinlich am einfachsten:

        function jsonupload() {
            var json;
            var isValid = true;
            var verein = document.querySelector('input[name="verein"]:checked').value;
            if (verein === "liednummer1") {
                var nummer1 = document.getElementById("nummer1").value;
                if (nummer1.value == '') isValid = false;
                json = [
                    { "text": [74, 5, "MUSIKKAPELLE", "fonts/bahnschrift20", 1] },
                    { "text": [83, 36, nummer1, "fonts/calibrib80", 1] },
                    { "text": [48, 105, "Ort", "fonts/bahnschrift20", 1] }
                ];
            } else if (verein === "liednummer2") {
                var nummer1 = document.getElementById("nummer1").value;
                var nummer2 = document.getElementById("nummer2").value;
                if (nummer1.value == '' || nummer2.value == '') isValid = false;
                json = [
                    { "text": [74, 5, "MUSIKKAPELLE", "fonts/bahnschrift20", 1] },
                    { "text": [7, 36, nummer1, "fonts/calibrib80", 1] },
// usw.
// und am Schluss:
            // Gibt es keine Elemente mehr, die ":invalid" sind
            // und sind alle Eingabefelder ausgefüllt?
            const invalidElems = theForm.querySelectorAll(':invalid');
            if (invalidElems.length == 0 && isValid) {
                // Alle Elemente OK, wir können das JSON hochladen
                params = new FormData();
//usw.

Ja, da gab es noch einiges was nicht passte. Ich hatte mir noch nicht vollständig dein Formular angesehen und dachte, es gäbe immer zwei Liednamen und wenn nur ein Lied angezeigt wird, nimmt man input-liedname-1 aber das war ein Irrtum.

Zitat

Langsam werden es soviele verschachtelte Funktionen und viel zu viel Nice to have

Das hat man häufig, vor allem wenn es hunderte von Zeilen sind oder noch mehr. Deshalb habe ich versucht, das ganze wieder ein wenig zu straffen und die Prüfung, ob die Eingabe für das Lied OK ist, in die Funktion liedHolen hinein genommen. Die sieht dann so aus:

Zitat

        function liedHolen(sel) {
inputLied = document.querySelector(sel);
            // Zunächst prüfen wir ob die Eingabe das richtige Format hat:
            // Am Anfang eine Nummer, dann ": " und danach beliebig viele Zeichen
            // als Name
            if (inputLied.value.match(/\d+: .+/)) {
                // Das Format passt, wir zerlegen die Eingabe in Nummer und Name
                const splitted = inputLied.value.split(': ');
                // und geben das Objekt mit diesen Werte zurück, die Eingabe ist OK
                return { nr: splitted[0], name: splitted[1], invalid: false };
}
            // Die Eingabe ist nicht OK, wir geben für Nummer und Name jeweils ''
            // zurück uns setzen invalid auf true
            return { nr: '', name: '', invalid: true };
}

Alles anzeigen

Die Auswertung wird dann wesentlich einfacher und sieht für ein Lied so aus:

            if (verein === "liednummer1") {
                var lied = liedHolen('#input-liedname');
                if (lied.invalid) isValid = false;
                json = [
                    { "text": [148, 5, "MUSIKKAPELLE", "fonts/bahnschrift20", 1, 1] },
                    { "text": [148, 26, lied.nr, "fonts/calibrib80", 1, 1] },
                    { "text": [148, 97, lied.name, "t0_14b_tf", 1, 1] },
                    { "text": [148, 106, "ORT", "fonts/bahnschrift20", 1, 1] }
                ];
            } else if (verein === "liednummer2") {

Das vollständige HTML hänge ich an, ich habe es nur oberflächlich getestet.

Die Funktion liedHolen kann man noch ein wenig kürzen und verbessern:

        function liedHolen(sel) {
            inputLied = document.querySelector(sel);
            // Zunächst prüfen wir ob die Eingabe das richtige Format hat:
            // Am Anfang eine Nummer, dann ": " und danach beliebig viele Zeichen
            // als Name
            const matches = inputLied.value.match(/(\d+):( .+)/);
            if (matches) {
                // Das Format passt, wir geben das Objekt mit diesen Werten zurück, die Eingabe ist OK
                return { nr: matches[1], name: matches[2], invalid: false };
            }
            // Die Eingabe ist nicht OK, wir geben für Nummer und Name jeweils ''
            // zurück und setzen invalid auf true
            return { nr: '', name: '', invalid: true };
        }

Bei den übrigen Feldern war das auch schon implementiert aber es war noch ein Fehler drin:

            } else if (verein === "liednummermanuell") {
                var nummermanuell = document.getElementById("nummermanuell").value;
                var titelmanuell = document.getElementById("titelmanuell").value;
                // In nummermanuell und titelmanuell steht schon das value drin,
                // d. h. wir dürfen das nicht noch Mal notieren
                // if (nummermanuell.value == '' || titelmanuell.value == '') isValid = false;
                if (nummermanuell == '' || titelmanuell == '') isValid = false;
                json = [
                    { "text": [148, 5, "MUSIKKAPELLE", "fonts/bahnschrift20", 1, 1] },
                    { "text": [148, 26, nummermanuell, "fonts/calibrib80", 1, 1] },
                    { "text": [148, 97, titelmanuell, "t0_14b_tf", 1, 1] },
                    { "text": [250, 43, "evtl.", "t0_14b_tf", 2, 1] },

Bei den folgenden kannst Du es sicher selbst korrigieren.

Das liest man immer gern!

Bleibt noch das Rücksetzen des Formulars, dieses lässt sich sehr leicht machen, nur das onclick so ändern:

            <input style="height: 30px; width: 100px; color:#fafafa; background-color: #cf0a35;" type="button"
                value="Reset" onClick="document.getElementById('jsonupload').reset();">

Natürlich, Du brauchst den gleichen Code nur dort hin zu schreiben, wo die Antwort vom Server da ist:

            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', {
                fetch('testpost.php', {
                    method: 'post',
                    body: params
                }).then(() => {
                    document.getElementById('jsonupload').reset();
                    alert('Eingabe wurde an die TAGS übertragen');
                }).catch(reason => alert(reason));
            } else {
                alert('Eingaben nicht korrekt');
            }

Das wäre super. Meistens ist es ja so, dass ein Projekt nie fertig wird.

Eine normale Dropdownliste wäre schon ein wenig heftig bei 250 Einträgen. Mit diesen Kiosk-Sachen habe ich mich noch nicht beschäftigt. Ich sehe zwei Möglichkeiten, da weiter zu kommen:

1. Du versuchst, jemand zu finden, der sich damit auskennt, am besten indem Du einen neuen Thread für dieses spezielle Problem auf machst.
2. Bevor es datalist gab wurden Bibliotheken entwickelt, um so etwas mit Javascript nachzubilden. Ich kenne da https://selectize.dev und https://select2.org. Beide brauchen jQuery aber damit kann man leben. Ich hatte sie vor längerer Zeit schon kennen gelernt und benutzt. Durch erneutes Googeln habe ich jedoch dieses gefunden: https://www.cssscript.com/html-datalist-polyfill-safari/ Das braucht kein jQuery und scheint kinderleicht einzusetzen zu sein. Damit sollten wir es versuchen.

Allerdings will mir irgend wie nicht in den Kopf, dass dieses Android WebView Datalists nicht unterstützt. Aber möglicher Weise einfacher, dieses Polyfill einzubauen als in dieser Sache weiter nachzuforschen.

Dort steht:

Zitat

insert the JavaScript file ‘datalist-polyfill.min.js’ at the bottom of the webpage.

Also nicht in den head sondern ganz unten, vor dem schließenden </body>, denn sonst existieren die Elemente noch nicht.