Inhalt aus Inputfeld nehmen und Text suchen

Sempervivum · 4. August 2023

Immer gern, freut mich, dass Du zufrieden bist.

Hat der Dirigent denn alle Nummern im Kopf? Es würde sich nämlich anbieten, direkt die Liste der Namen zu zeigen und durch Eingabe von zwei oder drei Buchstaben werden dann die passenden Namen angezeigt.

draexler · 4. August 2023

Du bringst mich schon wieder auf den nächsten Feature request

Würde sagen Hälfte, Hälfte.

Cool wäre natürlich wenn man die Nummer oder den Namen eingibt und es würden vorschlage angezeigt.

Wo ich auch eine Lösung finden wollte, aber noch nichts gefunden habe ist folgendes.

Wenn auf Übertragen geklickt wird, kommt eine Bestätigungsseite. Besser wäre natürlich man würde auf der Seite bleiben und der Button würde z.B. auf Reset wechseln und die Felder wieder zurücksetzen, oder die Seite neu laden.

nextuser · 4. August 2023

Zitat von draexler

Wenn auf Übertragen geklickt wird, kommt eine Bestätigungsseite. Besser wäre natürlich man würde auf der Seite bleiben und der Button würde z.B. auf Reset wechseln und die Felder wieder zurücksetzen, oder die Seite neu laden.

Käme ein Request mittels Ajax nicht in Frage?

Sempervivum · 4. August 2023

Auch das ist recht einfach weil es heute das datalist-Element gibt. Füge dies statt des Eingabefeldes für die Nummer ins HTML ein:

Code

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

Und dies am Ende des body, vor dem schließenden </body>:

Code

    <script>
        const
            liednamen = {
                '1': 'Sternenbanner',
                '2': 'Weil ich dich gerne mag',
                '3': 'Posaunenparade',
                '10': 'Lieblingstück',
                '11': 'Trompetenserenade',
                '12': 'Hinter dem Wald',
                '123': 'Walzerliebe',
                '123': 'Wiener Marsch',
                '312': 'Dixie Land Parade',
                '402': 'Schritt für Schritt'
            },
            datalistLieder = document.querySelector('#datalist-lieder'),
            inputLiedname = document.querySelector('#input-liedname');
        for (const [key, value] of Object.entries(liednamen)) {
            const html = `<option value="${key}: ${value}"></option>`;
            datalistLieder.insertAdjacentHTML('beforeend', html);
        }
    </script>
</body>

Alles anzeigen

Edit, ich vergaß, auf Nummer und Liedname kannst Du dann so zugreifen:

Code

            var json;
            var verein = document.querySelector('input[name="verein"]:checked').value;
            if (verein === "liednummer1") {
                var liedname = inputLiedname.value;
                json = [
                            {"text":[74,5,"MUSIKKAPELLE","fonts/bahnschrift20",1]},
                            //{"text":[83,36,nummer1,"fonts/calibrib80",1]},
                            {"text":[95,36,liedname,"fonts/calibrib80",1]},
                            {"text":[48,105,"ORT","fonts/bahnschrift20",1]}

Über die Anordnung muss man vielleicht noch nachdenken. Müssen da Nummer und Name getrennt sein? Wäre auch kein Problem.

draexler · 4. August 2023

Danke für die schnelle Antwort.

Ist das so richtig?
Habe das jetzt mal eingefügt, aber wenn ich etwas in das Feld eingebe kommt da nichts, also kein Vorschlag.

Code

<p id="p1">
<label for="nummer1"><big><span style="font-size:16px;"><span style="font-family:tahoma,geneva,sans-serif;">Titelnummer:</span></span></big></label><br>
<label>Liednamen: <input id="input-liedname" list="datalist-lieder" type="text"></label>
<datalist id="datalist-lieder">
</datalist>
<big><span style="font-size:10px;"><span style="font-family:tahoma,geneva,sans-serif;">Max 3 Zeichen</span></span></big>
</p>
<p style="display:none;" id="p2">
<label for="nummer2"><big><span style="font-size:16px;"><span style="font-family:tahoma,geneva,sans-serif;">Titelnummer 2:</span></span></big></label><br>
<input type="text" id="nummer2" style="width:50px;height:20px;" maxlength="3"><br>
<big><span style="font-size:10px;"><span style="font-family:tahoma,geneva,sans-serif;">Max 3 Zeichen</span></span></big>
</p>
<p style="display:none;" id="p3">
<label for="freitextfeld"><big><span style="font-size:16px;"><span style="font-family:tahoma,geneva,sans-serif;">Freitext:</span></span></big></label><br>
<input type="text" id="freitextfeld" style="width:300px;height:20px;" maxlength="40"><br>
<big><span style="font-size:10px;"><span style="font-family:tahoma,geneva,sans-serif;">Max 40 Zeichen</span></span></big>
</p>
<p style="display:none;" id="p4">
<label for="pauseundzeit"><big><span style="font-size:16px;"><span style="font-family:tahoma,geneva,sans-serif;">Bis wann wieder da sein?</span></span></big></label><br>
<input type="text" id="pauseundzeit" style="width:50px;height:20px;" maxlength="5"><br>
<big><span style="font-size:10px;"><span style="font-family:tahoma,geneva,sans-serif;">Format mm:hh</span></span></big>
</p>
<p>
<input style="height: 40px; width: 100px;" type="button" value="Übertragen" onclick="jsonupload();">
</p>
</form>
<script>
const
liednamen = {
'1': 'Sternenbanner',
'2': 'Weil ich dich gerne mag',
'3': 'Posaunenparade',
'10': 'Lieblingstück',
'11': 'Trompetenserenade',
'12': 'Hinter dem Wald',
'123': 'Walzerliebe',
'123': 'Wiener Marsch',
'312': 'Dixie Land Parade',
'402': 'Schritt für Schritt'
},
datalistLieder = document.querySelector('#datalist-lieder'),
inputLiedname = document.querySelector('#input-liedname');
for (const [key, value] of Object.entries(liednamen)) {
const html = `<option value="${key}: ${value}"></option>`;
datalistLieder.insertAdjacentHTML('beforeend', html);
}
</script>
</body>

Alles anzeigen

Und zu der anderen Frage. Ja die Ordnung soll so sein. Deswegen getrennt wegen verschiedener Schriftarten.

Sempervivum · 4. August 2023

Hm, ich habe gerade deinen Code in meine Testdatei übernommen und da kommen die Vorschläge. Sieh doch mal in der Console nach ob da Fehlermeldungen kommen.

Nummer und Name kann man auf diese Weise aufteilen:

Code

    <script>
        const
            liednamen = {
                '1': 'Sternenbanner',
                '2': 'Weil ich dich gerne mag',
                '3': 'Posaunenparade',
                '10': 'Lieblingstück',
                '11': 'Trompetenserenade',
                '12': 'Hinter dem Wald',
                '123': 'Walzerliebe',
                '123': 'Wiener Marsch',
                '312': 'Dixie Land Parade',
                '402': 'Schritt für Schritt'
            },
            datalistLieder = document.querySelector('#datalist-lieder'),
            inputLiednamen = document.querySelector('#input-liedname');
        for (const [key, value] of Object.entries(liednamen)) {
            const html = `<option value="${key}: ${value}"></option>`;
            datalistLieder.insertAdjacentHTML('beforeend', html);
        }
    </script>
</body>

Alles anzeigen

Und dann kannst Du Nummer und Name so ermitteln:

Code

            const splitted = inputLiednamen.value.split(': ');
            let nr1= splitted[0];
            let name1= splitted[1]

draexler · 5. August 2023

Fehler gefunden. Ich hatte vergessen eine wichtige Zeile auszuklammern. Fremdschäm...

Aber das mit der Aufteilung verstehe ich noch nicht so ganz.

Wie muss jetzt der Bereich mit dem JSON Aufbau aufgebaut sein?

Und wo muss der Bereich hin?

Zitat

Und dann kannst Du Nummer und Name so ermitteln:

Code

            const splitted = inputLiednamen.value.split(': ');            let nr1= splitted[0];            let name1= splitted[1]

draexler · 5. August 2023

Ok ich habs hingebracht.

Aber was muss ich jetzt machen um das ganze auch für das zweite Liedstück hinzubekommen?

Code

<script>
        function jsonupload(){
        var json;
        var verein = document.querySelector('input[name="verein"]:checked').value;
        const splitted = inputLiednamen.value.split(': ');
        let nr1= splitted[0];
        let name1= splitted[1]
        if (verein === "liednummer1") {
                json = [
                            {"text":[148,5,"MUSIKKAPELLE","fonts/bahnschrift20",1,1]},
                            {"text":[148,26,nr1,"fonts/calibrib80",1,1]},
                            {"text":[148,97,name1,"t0_14b_tf",1,1]},
                            {"text":[148,106,"ORT","fonts/bahnschrift20",1,1]}
                ];
            } else if (verein === "liednummer2") {
                var nummer1 = document.getElementById("nummer1").value;
                var nummer2 = document.getElementById("nummer2").value;
                var liedname1 = liednamen[nummer1];
                var liedname2 = liednamen[nummer2];
                json = [
                        {"text": [148,5,"MUSIKKAPELLE","fonts/bahnschrift20",1,1]},
                              {"text": [7,26,nummer1,"fonts/calibrib80",1]},
                            {"text":[10,97,liedname1,"t0_14b_tf",1]},
                              {"triangle": [134,51,134,81,164,66,1]},
                              {"text": [165,26,nummer2,"fonts/calibrib80",1]},
                            {"text":[160,97,liedname2,"t0_14b_tf",1]},
                              {"text": [148,106,"ORT", "fonts/bahnschrift20",1,1]}
                ];

Alles anzeigen

draexler · 5. August 2023

Is es auch möglich das nur dieser Wertevorrat eingeben werden kann?

Sempervivum · 5. August 2023

Guten Morgen!

So wie Du zuvor zwei Eingabefelder gebraucht hast, wirst Du jetzt zwei Auswahllisten brauchen. Ich dachte erst, wir müssten auch die Liste verdoppeln aber das ist gar nicht nötig, die beiden können die selbe datalist verwenden:

Code

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

Die Generierung mit der for-of-Schleife bleibt dann wie sie ist.

Und die Werte kannst Du dann so heraus holen:

Zunächst eine Funktion definieren:

Code

        function liedHolen(sel) {
            inputLied = document.querySelector(sel);
            const splitted = inputLied ? inputLied.value.split(': ') : ['', ''];
            return { nr: splitted[0], name: splitted[1] };
        }

Und dann damit die Werte holen:

Code

       if (verein === "liednummer1") {
                json = [
                            {"text":[148,5,"MUSIKKAPELLE","fonts/bahnschrift20",1,1]},
                            {"text":[148,26,nr1,"fonts/calibrib80",1,1]},
                            {"text":[148,97,name1,"t0_14b_tf",1,1]},
                            {"text":[148,106,"ORT","fonts/bahnschrift20",1,1]}
                ];
            } else if (verein === "liednummer2") {
                var lied1 = liedHolen('#input-liedname-1');
                var lied2 = liedHolen('#input-liedname-2');
                // Jetzt stehen Nummer und Name in den Variablen bereit.
                // nummer1 = lied1.nr usw.
                // Wir können aber problemlos auf die Zwischenvariablen
                // nummer und name verzichten: 
                json = [
                        {"text": [148,5,"MUSIKKAPELLE","fonts/bahnschrift20",1,1]},
                              {"text": [7,26,lied1.nr,"fonts/calibrib80",1]},
                            {"text":[10,97,lied1.name,"t0_14b_tf",1]},
                              {"triangle": [134,51,134,81,164,66,1]},
                              {"text": [165,26,lied2.nr,"fonts/calibrib80",1]},
                            {"text":[160,97,lied2.name,"t0_14b_tf",1]},
                              {"text": [148,106,"ORT", "fonts/bahnschrift20",1,1]}
                ];
            lied1 = liedHolen('#input-liedname-1');
            lied2 = liedHolen('#input-liedname-2');

Alles anzeigen

Sempervivum · 5. August 2023

Was dieses betrifft:

Zitat

Wo ich auch eine Lösung finden wollte, aber noch nichts gefunden habe ist folgendes.

Wenn auf Übertragen geklickt wird, kommt eine Bestätigungsseite. Besser wäre natürlich man würde auf der Seite bleiben und der Button würde z.B. auf Reset wechseln und die Felder wieder zurücksetzen, oder die Seite neu laden.

Wo liegt denn diese HTML-Seite? Du kannst sie ja selbst ändern. Wird sie dann auf den ESP hoch geladen oder bleibt sie lokal und Du öffnest sie irgend wie durch Doppelklick o. ä.?

draexler · 5. August 2023

Also irgendwie funzt es nicht

Das hier gehört:

Code

        function liedHolen(sel) {
            inputLied = document.querySelector(sel);
            const splitted = inputLied ? inputLied.value.split(': ') : ['', ''];
            return { nr: splitted[0], name: splitted[1] };
        }

for dem Abschließenden Body in die Script Sektion? Richtig?

Also:

Code

        </form>
      <script>
        const
            liednamen = {
                '1': 'Sternenbanner',
                '2': 'Weil ich dich gerne mag',
                '3': 'Posaunenparade',
                '10': 'Lieblingstück',
                '11': 'Trompetenserenade',
                '12': 'Hinter dem Wald',
                '123': 'Walzerliebe',
                '123': 'Wiener Marsch',
                '312': 'Dixie Land Parade',
                '402': 'Schritt für Schritt'
            },
            datalistLieder = document.querySelector('#datalist-lieder'),
            inputLiednamen = document.querySelector('#input-liedname');
        for (const [key, value] of Object.entries(liednamen)) {
            const html = `<option value="${key}: ${value}"></option>`;
            datalistLieder.insertAdjacentHTML('beforeend', html);
        }
        
              function liedHolen(sel) {
            inputLied = document.querySelector(sel);
            const splitted = inputLied ? inputLied.value.split(': ') : ['', ''];
            return { nr: splitted[0], name: splitted[1] };
        }
      </script>
</body>

</html>

Alles anzeigen

Aber ich denke hier ist auf jeden Fall ein Problem

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Tagsteuerung Musikkapelle ORT</title> 
    <script>
        function jsonupload(){
        var json;
        var verein = document.querySelector('input[name="verein"]:checked').value;
        const splitted = inputLiednamen.value.split(': ');
        let nr1= splitted[0];
        let name1= splitted[1]
       if (verein === "liednummer1") {
                json = [
                            {"text":[148,5,"MUSIKKAPELLE","fonts/bahnschrift20",1,1]},
                            {"text":[148,26,nr1,"fonts/calibrib80",1,1]},
                            {"text":[148,97,name1,"t0_14b_tf",1,1]},
                            {"text":[148,106,"ORT","fonts/bahnschrift20",1,1]}
                ];
            } else if (verein === "liednummer2") {
                var lied1 = liedHolen('#input-liedname-1');
                var lied2 = liedHolen('#input-liedname-2');
                json = [
                        {"text": [148,5,"MUSIKKAPELLE","fonts/bahnschrift20",1,1]},
                              {"text": [7,26,lied1.nr,"fonts/calibrib80",1]},
                            {"text":[10,97,lied1.name,"t0_14b_tf",1]},
                              {"triangle": [134,51,134,81,164,66,1]},
                              {"text": [165,26,lied2.nr,"fonts/calibrib80",1]},
                            {"text":[160,97,lied2.name,"t0_14b_tf",1]},
                              {"text": [148,106,"ORT", "fonts/bahnschrift20",1,1]}
                ];
            lied1 = liedHolen('#input-liedname-1');
            lied2 = liedHolen('#input-liedname-2');
                ];
            } else if (verein === "liednummerprosit") {
                json = [
                        {"text": [148,5,"MUSIKKAPELLE","fonts/bahnschrift20",1,1]},
                              {"text": [7,26,nr1,"fonts/calibrib80",1]},
                            {"text":[95,97,name1,"t0_14b_tf",1]},
                              {"triangle": [134,51,134,81,164,66,1]},
                              {"text": [185,55,"PROSIT","fonts/calibrib30",1]},
                              {"text": [148,106,"ORT", "fonts/bahnschrift20",1,1]}
                ];
            } else if (verein === "hallo") {
                json = [
                            {"text": [148,5,"MUSIKKAPELLE","fonts/bahnschrift20",1,1]},
                            {"text": [75,36,"GRIAS EICH","fonts/calibrib30",1]},
                            {"text": [17,70,"Schee dasds do seits","fonts/calibrib30" ,1]},
                            {"text": [148,106,"ORT","fonts/bahnschrift20",1,1]}

Alles anzeigen

oder?

Nochmal vielen Dank für deine geduldige Hilfe Parallel lese ich mich in deine genannten Funktion etc. ein. Ist aber doch ganz schön viel Input auf einmal. Wenn es aber mal funktionsfähig ist, macht es beim mir immer klick.

Lass uns mal das zum laufen bringen. Dann schauen wir mal wegen der Buttonfunktion aus Post #31

draexler · 5. August 2023

So geschafft, was eine eckige Klammer zuviel so ausmacht....

Jetzt zu der nächsten Frage. Kann man das Eingabefeld so beschränken das nur der Wertevorrat möglich ist? Aktuell kann ich ja alles eingeben, was dann ja zu einer nicht verarbeitbaren JSON führt.

Sempervivum · 5. August 2023

Jetzt verstehe ich, was Du mit Wertevorrat meintest. Das ist nicht ganz so einfach wie es zunächst scheint weil man ja nicht einfach die Eingaben des Benutzers unterbinden kann. Man müsste abwarten bis er das JSON abschickt und es dann blockieren mit einem geeigneten Hinweis.

Versuche dies, zunächst einen Button für das Abschicken des JSON:

Code

    <button type="button" id="send-it">Abschicken</button>

Und dann dies Javascript:

Code

        // Eventlistener für Eingabe registrieren
        window.addEventListener('input', event => {
            // Wurde in ein Auswahlfeld für ein Lied eingeben?
            if (event.target.matches('[list="datalist-lieder"]')) {
                const val = event.target.value;
                // Ist der Wert des Eingabefeldes in den
                // Optionen enthalten?
                if (document.querySelector(`option[value="${val}"`)) {
                    console.log('valid');
                    // Klasse "invalid" hinzu fügen
                    event.target.classList.remove('invalid');
                } else {
                    console.log('invalid');
                    // Klasse "invalid" löschen
                    event.target.classList.add('invalid');
                }
            }
        });
        document.querySelector('#send-it').addEventListener('click', event => {
            if (document.querySelector('#input-liedname-1').classList.contains('invalid')
                || document.querySelector('#input-liedname-2').classList.contains('invalid')) {
                alert('Ungültige Eingabe');
                // Default-Aktion, Abschicken des Formulars, unterdrücken
                event.preventDefault();
            }
        });

Alles anzeigen

Es fügt eine Klasse "invalid" hinzu wenn die Eingabe ungültig ist. Damit können wir die Darstellung des Eingabefeldes mit CSS ändern, z. B. so:

Code

        input.invalid {
            color: red;
        }

Wird bei ungültiger Eingabe der Button gedrückt, bekommt der Benutzer einen Hinweis.

Sempervivum · 5. August 2023

PS: Man kann auch auf die browsereigene Validierung aufbauen, das würde dann so aussehen:

Code

        // Eventlistener für Eingabe registrieren
        window.addEventListener('input', event => {
            // Wurde in ein Auswahlfeld für ein Lied eingeben?
            if (event.target.matches('[list="datalist-lieder"]')) {
                const val = event.target.value;
                // Ist der Wert des Eingabefeldes in den
                // Optionen enthalten?
                if (document.querySelector(`option[value="${val}"`)) {
                    console.log('valid');
                    // Element auf "valid" setzen
                    event.target.setCustomValidity("");;
                } else {
                    console.log('invalid');
                    // Element auf "invalid" setzen
                    event.target.setCustomValidity("Ungültige Eingabe");;
                }
            }
        });
        document.querySelector('#send-it').addEventListener('click', event => {
            // Dadurch dass wir jetzt die browsereigene Validierung benutzen
            // brauchen wir nur noch zu prüfen ob irgend ein Element ungültig is
            if (document.querySelector(':invalid')) {
                alert('Ungültige Eingabe');
                // Default-Aktion, Abschicken des Formulars, unterdrücken
                event.preventDefault();
            }
        });

Alles anzeigen

Im CSS müssen wir uns dann auf die Pseudoklasse beziehen:

Code

        input:invalid {
            color: red;
        }

draexler · 7. August 2023

Hallo (sorry war unterwegs),

habe das jetzt wie im #34 umgesetzt. Funktioniert (wobei keine Fehlermeldung kommt wenn gar keine Eingabe gemacht wurde).

Anschließend habe ich das ganze einfach mal in den bestehenden Button eingesetzt.

Code

<input style="height: 40px; width: 100px;" id="send-it" type="button" value="Übertragen" onclick="jsonupload();"><br><br>

Die Prüfung funktioniert hier auch, aber natürlich wird der josonupload trotzdem durchgeführt (Hatte ich auch so erwartet). Wie könnte man das verhindern, wie müsste das ganze aussehen?

Vielleicht wäre hier auch der passende Zeitpunkt das Thema zu betrachten, das nach dem Klick ich nicht auf eine Bestätigungsseite geleitet werde, sonder auf der Seite bleibe.

Im Post #31 hattest du ja schon gefragt. Also die Eingabe .html öffne ich einfach über EspIP-Adresse/steuerung.html (Name der von mir hinterlegten .html)

Die Bestätigungseite ist aber in dem Projekt hartvercoded, da komme ich also nicht ran. Im Post #23 wurde AJAX vorgeschlagen?!

draexler · 7. August 2023

Hatte ja versprochen zu zeigen was der eigentliche Output ist, um ein besseres Verständnis zu bekommen.

Sempervivum · 7. August 2023

Danke, das hilft wirklich für ein besseres Verständnis und es wird sofort klar, dass Name und Nummer getrennt sein müssen. Ich antworte gleich wegen der anderen Dinge.

Sempervivum · 7. August 2023

Hier jetzt das Javascript für die Überprüfung ob alles OK ist und das Abschicken mit fetch. Ungetestet, wenn es nicht gleich läuft, versuche selbst, den Fehler zu finden.

Code

            } else if (verein === "freitext") {
                var freitextfeld = document.getElementById("freitextfeld").value;
                json = [
                    { "text": [74, 5, "MUSIKKAPELLE", "fonts/bahnschrift20", 1] },
                    { "text": [10, 63, freitextfeld, "t0_14b_tf", 1] },
                    { "text": [48, 105, "Ort", "fonts/bahnschrift20", 1] }
                ];
            }
            // var image = document.getElementById("image");
            // image.value = JSON.stringify(json);
            // document.getElementById("jsonupload").submit();

            // Gibt es keine Elemente mehr, die "invalid" sind?
            const invalidElems = document.querySelectorAll('form :invalid');
            if (invalidElems.length == 0) {
                // Alle Elemente OK, wir können das JSON hochladen
                params = new FormData();
                params.append('json', json);
                fetch('/jsonupload', {
                    method: 'post',
                    body: params
                }).then(response => text()).then(txt => {
                    // hier steht jetzt die Antwort vom Skript
                    // als Text bereit. Wir können sie evtl. auswerten
                    // und einen Hinweis anzeigen, dass die Verarbeitung
                    // erfolgreich war oder auch nicht.
                });
            } else {
                // Es gibt Elemente, wo die Eingabe nicht OK ist.
                // Einen Hinweis für den Benutzer anzeigen:
                alert('Eingaben noch nicht vollständig korrekt');
            }
        }

Alles anzeigen

draexler · 7. August 2023

Habe jetzt das mit dem Fetch hinbekommen (Keine Weiterleitung mehr)

Das läuft jetzt auf jeden Fall, musste den Code folgendermaßen anpassen:

Code

            } else if (verein === "freitext") {
                        var freitextfeld = document.getElementById("freitextfeld").value;
                json = [
                            {"text":[148,5,"MUSIKKAPELLE","fonts/bahnschrift20",1,1]},
                            {"text":[148,63,freitextfeld,"t0_14b_tf",1,1]},
                            {"text":[148,106,"ORT","fonts/bahnschrift20",1,1]}
                ];
      }
            const invalidElems = document.querySelectorAll('form :invalid');
            if (invalidElems.length == 0) {
                params = new FormData();
                params.append('json', JSON.stringify(json));
                params.append('mac', "0000021EDF033B15");
                fetch('/jsonupload', {
                    method: 'post',
                    body: params
                }).then(() => {
                    alert('Eingabe wurde an die TAGS übertragen');
                }).catch(reason => alert(reason));
            } else {
                alert('Eingaben nicht korrekt');
            }
        }
    </script>

Alles anzeigen

Leider funktioniert aber die Prüfung nicht ob etwas eingetragen ist oder nicht. Es springt nicht in die Else Schleife obwohl das Feld leer ist.

Steht vermutlich im Zusammenhang weil ich das Script aus #34 ist nicht mehr implementiert habe (Prüfung ob die Eingabe zum Wertevorrat passt), weil sonst ein abschicken auch nicht mehr möglich ist. Wahrscheinlich muss das auch in dieses Stück Code von Post #39 hinein? Keine Ahnung.

Inhalt aus Inputfeld nehmen und Text suchen

Jetzt mitmachen!

Teilen