Inhalt von input ändern und zeitgleich auf Inhalt prüfen

DataPearl

Liebe Community,

ich bastle seit einiger Zeit an einem Formular herum, komme aber an einer Stelle nicht weiter.

Ich möchte den Inhalt eines inputs durch Klicks ändern, was ich mit jQuery gut hinbekomme:

Code

function test1(){ $('#inputeins').val('Test1'); }
function test2(){ $('#inputeins').val('Test2'); }
function leer(){ $('#inputeins').val(''); }

Das Input selbst wird dabei nicht per Tastatur gefüllt oder geleert, sondern ausschließlich über onClicks, die die Funktionen oben ausführen.

Nun möchte ich, dass der Inhalt des inputs dynamisch ausgelesen und überprüft wird.

Solange das Input leer ist, soll ein inaktiver Weiter-Button (ein div) angezeigt werden. Wenn das Input mit Inhalt gefüllt ist, soll das eine div ausgeblendet und ein anderes eingeblendet werden.

Code

    <div id=\"weiterinaktiv\" class=\"buttonoff\" style=\"\" onclick=\"\">Weiter</div>
    <div id=\"weiteraktiv\" class=\"buttonon\" style=\"display:none;\" onclick=\"weiter1();\">Weiter</div>

Die Funktion mit show/hide steht und funktioniert. Was ich aber nicht hinbekomme: Wie kann ich den Inhalt des inputs dynamisch auslesen und je nachdem, ob es grade einen Inhalt hat oder nicht das entsprechende show/hide auslösen?

Alle Versionen, die ich gefunden habe, gehen davon aus, dass in das input geschrieben wird und feuern auf Fokus oder Tastenaktionen (keyup, keydown etc.). Aber eine funktionierende Überprüfung, ohne dass das input vom Nutzer selbst angesprochen wird, habe ich nicht gefunden.

Am Ende sollen je Seite mehrere Inputs überprüft werden, aber für das Beispiel reicht mir natürlich ein einziges.

Ich hoffe, ihr könnt mir helfen.

Viele Grüße und danke für eure Hilfe

DataPearl

Sempervivum

Hallo DataPearl und willkommen im Forum!

Ich dachte zunächst, das die Events "change" oder "input" dein Problem lösen aber das war ein Irrtum, wie auch hier angegeben wird:

Pure JavaScript listen to input value change

Is there a way I can create a constant function that listens to an input, so when that the input value changes, something is triggered immediately? I am…

stackoverflow.com

Die Lösungen mit Custom-Events, die dort angegeben werden sind unnötig kompliziert. Besser eine Funktion definieren, die deine Aktionen ausführt und explizit aufrufen:

Code

    <button onclick="test1()">Test 1</button>
    <button onclick="test2()">Test 2</button>
    <button onclick="leer()">Leeren</button>
    <input id="inputeins">
    <script>
        function test1() {
            $('#inputeins').val('Test1');
            aenderung();
        }
        function test2() {
            $('#inputeins').val('Test2');
            aenderung();
        }
        function leer() {
            $('#inputeins').val('');
            aenderung();
        }
        function aenderung() {
            console.log('Wert von #inputeins geändert zu ' + $('#inputeins').val());
        }
    </script>

Alles anzeigen

Oder etwas kompakter:

Code

    <button onclick="aenderung('test1')">Test 1</button>
    <button onclick="aenderung('test2')">Test 2</button>
    <button onclick="aenderung('')">Leeren</button>
    <input id="inputeins">
    <script>
        function aenderung(theValue) {
            $('#inputeins').val(theValue);
            aenderungReaktion();
        }
        function aenderungReaktion() {
            console.log('Wert von #inputeins geändert zu ' + $('#inputeins').val());
        }
    </script>

Alles anzeigen

Alternativ könnte man das auch noch etwas moderner aufziehen und das Ganze mit Klassen steuern und das Eventbubbling ausnutzen:

Code

    <button class="button-for-test1" data-val="test1">Test 1</button>
    <button class="button-for-test1" data-val="test2">Test 2</button>
    <button class="button-for-test1" data-val="">Leeren</button>
    <input id="inputeins">
    <button id="weiter">Weiter</button>
    <script>
        document.addEventListener('click', event => {
            // Wurde ein Button für das Eintragen in #inputeins gedrückt?
            if (event.target.classList.contains('button-for-test1')) {
                const
                    // Einzutragenden Wert bereit stellen:
                    dat = event.target.dataset.val,
                    input1 = document.getElementById('inputeins'),
                    weiterBtn = document.getElementById('weiter');
                input1.value = dat;
                // Ist der einzutragende Wert kein Leerstring?
                if (dat != '') {
                    // Klasse "aktiv" beim weiter-Button eintragen:
                    weiterBtn.classList.add('aktiv')
                } else {
                    // Klasse "aktiv" beim weiter-Button loeschen:
                    weiterBtn.classList.remove('aktiv')
                }
            }
            // Wurd der weiter-Button gedrückt?
            if (event.target.id == 'weiter') {
                // Weitere Verarbeitung abhängig von der Klasse "aktiv":
                if (event.target.classList.contains('aktiv')) {
                    console.log('weiter-Button gedrückt bei Zustand "aktiv"');
                } else {
                    console.log('weiter-Button gedrückt bei Zustand "inaktiv"');
                }
            }
        });
    </script>

Alles anzeigen

Dann kannst Du auch die Gestaltung des weiter-Buttons mit CSS steuern:

Code

        button#weiter {
            background-color: red;
        }

        button#weiter.aktiv {
            background-color: lightgrey;
        }

DataPearl

Hallo Sempervivum,

danke für deine lieben Einstiegsworte und deine umfassende Hilfe.

Ich hatte am Anfang auch gehofft, es mit change oder input lösen zu können, doch dazu muss ich ja immer selbst im input-Feld aktiv werden.

Die Costum-Lösungen habe ich zum Teil ausprobiert. Entweder, sie funktionieren nicht, weil ich den INPUT nicht selbst befülle, oder sie sind so umfassend, dass ich das nicht für so viele Felder ausüben kann.

Auf die eigentlich offensichtliche Lösung, die Funktion der Inhaltsüberprüfung bei jedem Click aufzurufen, bin ich tatsächlich nicht gekommen, weil ich es unbedingt ganzheitlich wollte. Aber das werde ich natürlich erstmal so umsetzen.

Code

function test1(){ $('#inputeins').val('Test1'); }
function test2(){ $('#inputeins').val('Test2'); }
function leer(){ $('#inputeins').val(''); }
function pruefung(){
  const inputeins = document.querySelector('#inputeins');
  const inputzwei = document.querySelector('#inputzwei');
  if (inputeins && inputeins.textContent.trim() !== "" && inputzwei && inputzwei.textContent.trim() !== "") {
    $('#weiterinaktiv').hide(); $('#weiteraktiv').show();
  }
  else {
    $('#weiteraktiv').hide(); $('#weiterinaktiv').show();
  }
}

Alles anzeigen

So müsste es funktionieren (wenn ich grad keinen Fehler eingebaut habe).

Gibt es trotzdem auch eine "elegante" Lösung, den Inhalt eines Elements dauerhaft dynamisch zu überprüfen und daraus eine Aktion abzuleiten?

Ich würde diese Methode später gern noch für ein anderes Projekt anwenden, bei dem andere NutzerInnen eine Eingabe vornehmen und diese beim Hauptadmin angezeigt wird. Wie ich diese Eingaben dynamsich in einen DIV oder INPUT lade, habe ich bereits gelöst, doch auch hier müsste ich die Seite bis zur Eingabe der letzten Daten permanent neu laden lassen, damit das Auslesen beim Neuladen eine Aktion feuert, wenn alle Felder ausgefüllt sind. Eine dynamische Überprüfung aller Felder könnte mir auch hier das ständige Neuladen ersparen.

Viele Grüße

DataPearl

DataPearl

Nachtrag: Ich hab den Code nochmal angepasst, so wie oben funktioniert er nämlich auch nicht.

Darum neu, getrestet und für gut befunden:

Code

function test1(){ $('#inputeins').val('Test1'); }
function test2(){ $('#inputeins').val('Test2'); }
function leer(){ $('#inputeins').val(''); }
function pruefung(){
  if (document.getElementById('inputeins').value !== '' && document.getElementById('inputzwei').value !== ''){
    $('#weiterinaktiv').hide(); $('#weiteraktiv').show();
  }
  else {
    $('#weiteraktiv').hide(); $('#weiterinaktiv').show();
  }
}

Alles anzeigen

Sempervivum

Guten Morgen,

ich hatte gestern schon die Idee, den MutationObserver zu verwenden, aber das scheitert daran, dass beim Setzen des Value sich das DOM nicht ändert und der Observer nicht feuert. Aber hier:

MutationObserver doesn't react to changes to text input fields

I'm working on adapting an IE-specific website to other browsers. For example, onpropertychange has been used extensively, and I'm using MutationObserver to…

stackoverflow.com

wird eine Lösung vorgeschlagen: Das value-Attribut ändern, dann feuert der MutationObserver. Hat zwar den Nachteil, dass Du zweigleisig fahren musst, wenn Du auch manuelle Eingaben erfassen willst, wäre aber eine recht elegante Lösung.

Und auch zu deinem letzten Code für die Überprüfung mehrerer Inputs fällt mir ein elegantere Lösung ein:

Den betr. Inputs eine Klasse geben und sie in einer Schleife abarbeiten:

Code

<input id="input1" class="to-check">
<input id="input2" class="to-check">
<input id="input3" class="to-check">
<script>
    let alleGefuellt = true;
    document.querySelectorAll('.to-check').forEach(item => {
         if (item.value === '') {
             alleGefuellt = false;
         }
    });
    if (alleGefuellt) {
        // weiter-Button aktivieren
    } else {
        // weiter-Button deaktivieren
    }
</script>

Alles anzeigen

(ungetestet)

Sempervivum

PS: Noch einfacher geht es, wenn Du die Formularvalidierung von HTML5 benutzt:

Die Inputs in ein Formular legen und ihnen ein "required" geben, dann kannst Du mit der Funktion checkValidity prüfen, ob alles valide ist bzw. in deinem Fall alle Inputs ausgefüllt:

Code

    <form>
        <input id="test1" required oninput="pruefung()">Test 1
        <input id="test2" required oninput="pruefung()">Test 2
        <input id="test3" required oninput="pruefung()">Test 3
    </form>
    <script>
        function pruefung() {
            const frm = document.querySelector('form');
            if (frm.checkValidity()) {
                console.log('valid, alle Eingabefelder gefüllt');
            } else {
                console.log('invalid');
            }
        }
    </script>

Alles anzeigen

tk1234

Zitat von DataPearl

Wenn das Input mit Inhalt gefüllt ist, soll das eine div ausgeblendet und ein anderes eingeblendet werden.
Code <div id=\"weiterinaktiv\" class=\"buttonoff\" style=\"\" onclick=\"\">Weiter</div> <div id=\"weiteraktiv\" class=\"buttonon\" style=\"display:none;\" onclick=\"weiter1();\">Weiter</div>

Div-Elemente dürfen (wie alle nicht interaktiven Elemente) nicht mit click-Handlern klickbar gemacht werden - so ist dein Formular unbedienbar da das div nicht per Tastaturbedienung erreichbar ist. Und selbst wenn das zwei richtige Buttons wären: die sind überflüssig, es reicht völlig einen Button zu verwenden und nur den disabled-Status zu setzen/zu entfernen.

Und: vergiss dass es jQuery mal gab, das ist überflüssig geworden und kann problemlos durch ganz normales Javascript ersetzt werden.

Zitat von Sempervivum

PS: Noch einfacher geht es, wenn Du die Formularvalidierung von HTML5 benutzt:
Die Inputs in ein Formular legen und ihnen ein "required" geben, dann kannst Du mit der Funktion checkValidity prüfen, ob alles valide ist bzw. in deinem Fall alle Inputs ausgefüllt: […]

Das geht auch einfacher: einen input-EventHandler auf form registrieren (natürlich nicht mit oninput sondern mit addEventListener), dann macht ein einziger Eventhandler das gleiche.

DataPearl

Hallo Sempervivum ,

bitte entschuldige die sehr späte Antwort, ich habe einige ziemlich stressige Tage hinter mir, die mir eine Programmierpause verordneten.

Die setAttribute-Lösung gefällt mir ganz gut, auch wenn ich damit erst ein wenig herumprobieren muss, um ihre Funktionsweise komplett zu verstehen.

Gegen das Zweigleisige habe ich nichts, das ist meines Erachtens ja nur eine Geschmackssache. Aktuell fahre ich ja auch zweigleisig, indem ich bei jedem onkeyup und beim Verlassen eines jeden Feldes die Überprüfungsfunktion ausführen lasse. Dabei macht JS natürlich reichlich überstunden, da es quasi bei jeder noch so kleinen Aktion auf der Seite die gesamte Funktion ausführen muss. setAttribute könnte dies in meinen Augen tatsächlich vereinfachen und auch die Rechenleistung bzw. die Hintergrundaktionen im Browser minimieren.

Die Klassenlösung der Überprüfung mag ich ebenfalls sehr. Aktuell fragt jQuery jede einzelne ID ab und führt erst dann die entsprechende Aktion aus. Über die Klasse kann ich mir ziemlich viel Code sparen und muss bei Formularveränderungen nicht jedesmal auch noch ans javascript gehen. Es kann so einfach sein, wenn man es weiß, aber manchmal sieht man den Baum vor lauter Wäldern nicht.

Die FORM-Lösung ist leider so nicht realisierbar, da alle INPUT-Felder zusammen bereits in einem großen FORM liegen. Aus Übersichtsgründen (und auch wegen zwei Hintergrundprozessen) möchte ich aber nicht alle INPUT-Felder auf einmal anzeigen lassen, sondern sie in inhaltlich logische Abschnitte unterteilen. Mittels der zu aktivierenden Weiter-"Buttons" (keine Buttons im programmiertechnischen Sinn), um die es hier in erster Linie geht, werden die NutzerInnen dann durch "Blättern" durch das gesamte Formular geleitet. Beim Klick zweier der Weiter-DIVs werden zudem je nach vorheriger Auswahl zwei php-Scripte geladen, die auf einer der späteren Seiten eingeblendet werden.

Ich weiß, das Ganze klingt kompliziert und bin mir auch der aufschreienden Kritik bewusst.
"Das macht man doch nicht!"
"Das ist für die Nutzenden nur unnötig kompliziert und nicht übersichtlich!"
"Das ist ein unnötiges Script-Chaos, das nur unsauberen Code produziert!"

Die Seite ist nicht für einen großen Durchlauf an NutzerInnen gedacht. Das Zielpublikum ist stark eingegrenzt. Zudem ist es ein einmaliger Registrierungsprozess, durch den sie hier geführt werden, niemand muss also mehrfach da durch. Und auch Analysen durch professionelle ProgrammierInnen wird es durch die kleine Zielgruppe eher nicht geben, es darf also auch ruhig chaotisch aussehen, solange ich selbst verstehe, wie alles zusammen am Ende ineinanderhakt.

Vielen Dank für deine große Hilfe.

Wenn dir noch etwas Schönes einfällt, bin ich für alles offen. Der Austausch mit dir ist sehr anregend und angenehm auf Augenhöhe.

Viele Grüße

DataPearl

DataPearl

Hallo tk1234,

danke für deine Antwort.

Dass das Formular nicht rein über die Tastatur bedient werden kann, ist in diesem Fall tatsächlich ein positiver Nebeneffekt, da das Formular so nicht aus Versehen unvollständig abgeschickt oder mittendrin überprüft werden soll. Der enge Nutzerkreis, die sich hier registrieren, müssen ihre Eingaben sehr sorgfältig machen, da bestimmte Angaben später nicht mehr geändert werden dürfen (hat etwas mit der späteren Verwendung der Seite zu tun). Da OPTION-Felder in einigen Mobilgeräten hinterlegte onClicks ignorieren, weil sie die OPTION-Felder in ihrem eigen Programm ausführen (getestet u.A. mit einigen Android-Geräten), musste ich die Auswahl hier ohnehin über eine Auswahl an DIVs realisieren, damit alle Aktionen ausgeführt werden.

Mir ist bewusst, dass dies für viele ProgrammiererInnen quasi eine Beleidigung im Quellcode darstellt, aber es war für mich nach unglaublich vielen Versuchen und Recherchen die einzige Lösung, um das zu erreichen, was ich am Ende erreichen möchte. Und für den ziemlich kleinen Nutzerkreis ist diese Hürde in meinen Augen vertretbar, zumal ohnehin die Meisten von ihnen das Formular mit dem Smartphone bedienen werden. Da fällt ein Touch mehr oder weniger kaum ins Gewicht.

Ich weiß, dass javascript mir in diesem Fall alles geben kann, was jQuery hier erfüllt, doch ich finde jQuery hier kürzer und übersichtlicher für mich, da ich so nicht mit unzähligen getElementByID und den damit verbundenen var oder const arbeiten muss, bei denen ich in der Summe irgendwann den Überblick verliere. jQuery spricht die Elemente immer direkt an und bietet mir damit einen besseren Überblick in den vielen Funktionen.

Danke für deine Tipps und Hinweise. Für andere Projekte sind sie definitv hilfreich und lassen mich bestimmte Dinge nochmal selbst hinterfragen.

Viele Grüße

DataPearl

Sempervivum

Hallo DataPearl

Zitat

da alle INPUT-Felder zusammen bereits in einem großen FORM liegen. Aus Übersichtsgründen (und auch wegen zwei Hintergrundprozessen) möchte ich aber nicht alle INPUT-Felder auf einmal anzeigen lassen, sondern sie in inhaltlich logische Abschnitte unterteilen.

In dem Fall würde es sich anbieten, fieldset-Tags für die Unterteilung zu benutzen. Ich habe dafür mal eine Demo gemacht:

HTML

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Test Eingabe-Events</title>
    <style>
        input:invalid {
            background-color: red;
        }

        fieldset:invalid {
            border: 2px solid red;
        }
    </style>
</head>

<body>
    <form>
        <fieldset>
            <input id="test1" required oninput="pruefung(this)">Test 1
            <input id="test2" required oninput="pruefung(this)">Test 2
            <input id="test3" required oninput="pruefung(this)">Test 3
            <button type="button">Weiter</button>
        </fieldset>
        <fieldset>
            <input id="test4" required oninput="pruefung(this)">Test 4
            <input id="test5" required oninput="pruefung(this)">Test 5
            <input id="test6" required oninput="pruefung(this)">Test 6
            <button type="button">Weiter</button>
        </fieldset>
    </form>
    <!-- Dieser Button nur zum Testen der Eingabe durch Skript: -->
    <button id="btn-for-test" onclick="eingabe('#test3', 'teststring')">Eintragen</button>
    <script>
        function eingabe(sel, val) {
            const elem = document.querySelector(sel);
            elem.value = val;
            pruefung(elem);
        }
        function pruefung(elem) {
            const
                // Wir suchen aufwärts im Baum das Fieldset wo das Input drin liegt:
                fldset = elem.closest('fieldset'),
                // Ausgehend vom Fieldset suchen wir abwärts den Button innerhalb des Fieldset:
                btn = fldset.querySelector('button');
            // Jetzt prüfen wir, ob alle Elemente im Fieldset valide bzw. 
            // in unserem Fall ausgefüllt sind. Das ist der Fall wenn das Fieldset
            // die Pseudoklasse ":valid" besitzt:
            if (fldset.matches(':valid')) {
                console.log('valid, alle Eingabefelder des aktuellen Fieldset gefüllt');
            } else {
                console.log('invalid');
            }
        }
    </script>
</body>

</html>

Alles anzeigen

So geht es mit wenigen Zeilen ganz ohne Klassen, nur die IDs für die Inputs brauchst Du wahrscheinlich, um die Werte auch durch das Skript ändern zu können.

Und, Du hast zwar nicht danach gefragt, aber ich habe ein Feature benutzt was häufig als hilfreich für den Benutzer angesehen wird: Abhängig davon ob ein Element valide oder nicht valide ist, kann man die Anzeige variabel gestalten, hier mit rotem Hintergrund bzw. Rahmen.

Jetzt mitmachen!

Tags