Beiträge von DataPearl

Hallo Sempervivum,

ich danke dir sehr. Von den fieldset-Tags habe ich vorher noch nie gehört, dabei lösen sie mein Problem hervorragend. Und dass du gleich auch noch das Zusatz-Feature für mich gebastelt hast, ist eine supernette Geste. Daran hätte ich mich sonst am Ende setzen müssen und hätte es wahrscheinlich wieder unglaublich umständlich umgesetzt.

Danke, danke, danke.

Ich freue mich darauf, das alles einzubauen und dank deiner Hilfe ein tolles Ergebnis zu bekommen.

Viele Grüße

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

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

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

Darum neu, getrestet und für gut befunden:

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();
  }
}

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.

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();
  }
}

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

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:

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.

    <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