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.

    Code
        <label>Lied 1: <input id="input-liedname-1" list="datalist-lieder" type="text" required></label>
  • Sobald ich es in ein paar Eingabefelder eintrage greift nur noch:


    Code
                } else {
                    alert('Eingaben nicht korrekt');
                }

    Ergänzung: Wenn ich es nur bei einen Eingabefeld eingebe funktioniert es. Problem ist ja das ich durch die Auswahlfelder ja immer andere Eingabefelder nicht ausfülle. Sind aber als required gekennzeichnet...

  • 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:

  • Also irgendwie schaffe ich es nicht. Habe es eigentlich genauso gemacht wie du beschrieben hast (und was nach meiner Logik auch passen würde).

    Aber leider hat dann der Absendebutton keinerlei Funktion.

    Wie müsste man eigentlich dann hier die Funktion mit der Inputüberprüfung integrieren? Also Die Werte der "Liednamen" prüfen? Das hattest du schon vorher mal beschrieben. Habe aber leider keine Ahnung wie ich das dann auch noch integrieren müsste.


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

    Aber wenn das geht, dann wars das. Mehr kommt dann nicht mehr. Muss dann auch mal reichen.

  • 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:

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

    Code
                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:

  • Mensch was soll ich sagen, es läuft. Danke, danke dir :)

    Die Prüfung funktioniert aber so wie ich den Code verstehe aber nur bei den Eingabefeldern die die Function liedholen durchlaufen. Denn nur da wird ja der Wert auf invalid gesetzt, was ja hier abgeprüft wird, oder?


    Wie kann ich es jetzt noch schaffen das die anderen Felder, sollte nichts eingetragen werden, auch einen Fehlermeldung erzeugen? Also wenn z.B. nichts im "Freitext" Feld eingetragen worden ist?

    Braucht es hier auch noch eine extra Function?

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

    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:

    Code
                <input style="height: 30px; width: 100px; color:#fafafa; background-color: #cf0a35;" type="button"
                    value="Reset" onClick="document.getElementById('jsonupload').reset();">
  • Ah das ist besser. Ich hatte es so gemacht.


    Code
    <input style="height: 30px; width: 308px; font-size:20px; color:#fafafa; background-color: #cf0a35;" type="button" value="Reset" onClick="location.href=location.href">

    Deines ist aber besser :)


    Siehst du eine Möglichkeit wenn die Übertragung erfolgreich war, das Formular auch zurücksetzen?

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

  • Oh, wie recht du doch hast...

    Wollte das ganze jetzt auf einen Android tablet einrichten mit der Fully Browser Kiosk App. Usecase ist, Tablet wird eingeschaltet und die App startet sich und blockiert denn ganzen Rest, Kiosk Modus halt.

    Das ganze funktioniert über Android WebView, was ja Chromium entspricht.

    Leider funktionieren anscheinend aber über Android WebView "Datalists" nicht.


    Konnte ich relativ schnell rausfinden mit dem Code:


    Funktioniert nicht.


    Deswegen jetzt die Frage... Gibt es irgendeine alternative? Mir fällt leider nichts ein. Notfalls müsste ich mit einer Normalen Dropdownliste arbeiten.

  • 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.

  • Kinderleicht das sagst du so einfach ;)

    Meinen Verständnis zufolge lege ich die "datalist-polyfill.min.js" (eine Datei, obwohl in dem Package mehr gedownloadet wurde) in das gleiche Verzeichnis wo auch meine .html liegt. Dann ergänze ich mein .html mit den script:


    Aber leider funktioniert es trotzdem nicht, vorausgesetzt mein vorgehen war richtig...

  • 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.

  • Leider auch kein Erfolg. Habe mal die" datalist-polyfill.min.js" Datei in jedes Verzeichnis gelegt das ich habe. Natürlich mit Pfad Anpassungen. Kein Erfolg.


    Ach Mensch, gestern noch so erfreut und heute wegen so einer kleinen Sachen wieder Probleme.....

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!