Eingabefelder Gruppierung

[pl]

Moin,

gibt es eine elegante Methode, die Inputfelder eines <fieldset id="colors"> zu ermitteln? Evntl. mit QuerySelector? Ichbin damit noch nicht so vertraut bitte mal etwas input 😉

MfG

[JürgenB]

Hallo Rolf,

gibt es eine elegante Methode, die Inputfelder eines <fieldset id="colors"> zu ermitteln? Evntl. mit QuerySelector? Ichbin damit noch nicht so vertraut bitte mal etwas input 😉

bei querySelector und querySelectorAll sieht der Selektor genau so aus, wie im css. Für deinen Fall könnte es so aussehen:

var alle_inputs_in_color = querySelectorAll("#colors input");

Gruß
Jürgen

[bobby]

Moin,

var alle_inputs_in_color = querySelectorAll("#colors input");

Ohne ein aufrufendes Object?? Das wird nicht funktionieren.

var alle_inputs_in_color = document.querySelectorAll("#colors input");

So wäre es richtig

Gruß Bobby

[JürgenB]

Hallo,

Ohne ein aufrufendes Object?? Das wird nicht funktionieren.

var alle_inputs_in_color = document.querySelectorAll("#colors input");

stimmt. Passiert mir leider hin und wieder mal, aber die Fehlerconsole rettet mich dann.

Gruß
Jürgen

[bobby]

Moin,

Das kann passieren. ich wollts nur nicht unberichtigt stehen lassen. Nicht dass der OP noch verzweifelt. 😉

Gruß Bobby

[Gunnar Bittersmann]

@@bobby

var alle_inputs_in_color = querySelectorAll("#colors input");

Ohne ein aufrufendes Object??

Ist windows denn kein Objekt? 😉

Das wird nicht funktionieren.

Allerdings. Das windows-Objekt hat keine Methode querySelectorAll.

LLAP 🖖

[bobby]

Moin,

Danke für die Konkretisierung. querySelectorAll ist natürlich eine Methode des Document-Objektes und durchsucht den DocumentTree nach den CSS-Eigenschaften. Die Methode wird vererbt an alle untergeordneten Elemente des Document-Elementes.

Gruß Bobby

[Rolf B]

Hallo Gunnar,

Ist windows denn kein Objekt? 😉

Nein. Windows ist, je nach dem wen man fragt, ein Virus, ein Bug oder das langsamste Batch-Script der Welt.

Rolf

[bobby]

Moin,

Verwechsel mal bitte nicht Windows mit Windows oder gar Windows

Gruß Bobby

[Rolf B]

Hallo bobby,

ich habe höchstens Windows und windows verwechselt, jedenfalls haben weder Windows noch das windows-Objekt in Javascript brauchbare Eigenschaften, solange man sie nicht selbst beisteuert.

Rolf

[Gunnar Bittersmann]

@@Rolf B

ich habe höchstens Windows und windows verwechselt, jedenfalls haben weder Windows noch das windows-Objekt in Javascript brauchbare Eigenschaften, solange man sie nicht selbst beisteuert.

window.windows = window; 😜

LLAP 🖖

[JürgenB]

Hallo Rolf,

Nein. Windows ist … das langsamste Batch-Script der Welt.

als Benutzer eines Windows-Laptop (6 Jahre alt, aber I7 und 8GB) und eines MacBook Air (2,5 Jahre alt, I5 und 4 GB), beide aktuelle Systeme, beide SSD, kann ich nur sagen, der Mac war mal schnell, ist aber seit den letzten Updates langsamer als die Windows-Büchse.

Gruß
Jürgen

[Mitleser]

Ohne ein aufrufendes Object?? Das wird nicht funktionieren.

Wenn man vorher:

window.querySelectorAll = document.querySelectorAll;

notiert, klappt auch das ;-)

[1unitedpower]

Wenn man vorher:

window.querySelectorAll = document.querySelectorAll;

notiert, klappt auch das ;-)

Da kommt dir der dynamic Dispatch von JavaScript in Queere, es müsste heißen:

window.querySelectorAll = document.querySelectorAll.bind(document)

oder etwas schöner

window.querySelectorAll = selector => document.querySelectorAll(selector)

[bobby]

Moin,

querySelectorAll ist hier das Stichwort. Das sollte dich zum Ziel führen.

let inputs = document.querySelectorAll('#colors input');

das selektiert alle Inputs in #colors

Gruß Bobby

[Gunnar Bittersmann]

@@bobby

Moin,

let inputs = document.querySelectorAll('#colors input');

Warum let?

Wenn man schon eine Referenz auf das form-Objekt hat (und die hat man durch das document.forms-Objekt, also bspw. document.forms[0] oder document.forms['my-form'], dann muss man nicht im ganzen DOM suchen, sodern nur im betreffenden Formular:

const myFormElement = document.forms['my-form'];
const inputs = myFormElement.querySelectorAll('#colors input');

oder

const inputs = document.forms[0].querySelectorAll('#colors input');

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Warum let?

Weil’s letta schmeckt‽

LLAP 🖖

[1unitedpower]

const inputs = document.forms[0].querySelectorAll('#colors input');

Macht den Code m.M.n. nur schlechter lesbar. ids müssen global eindeutig sein, also kann ich auch global danach suchen. Ich glaube auch nicht, dass deine Methode schneller wäre, was vermutlich der Grund für deinen Vorschlag war.

[Gunnar Bittersmann]

@@1unitedpower

ids müssen global eindeutig sein, also kann ich auch global danach suchen.

Warum sollte man im großen Heuhaufen suchen, wenn man schon weiß, in welchem kleinen Teil davon die Nadel zu finden ist?

Ich glaube auch nicht, dass deine Methode schneller wäre

Nicht?

Aber vermutlich Mikrooptimierung.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Ich glaube auch nicht, dass deine Methode schneller wäre

Nicht?

Legen Browser beim Parsen schon eine Liste mit allen Elementen mit IDs an? Dann …

Aber vermutlich Mikrooptimierung.

… vermutlich nicht einmal das.

LLAP 🖖

[1unitedpower]

Legen Browser beim Parsen schon eine Liste mit allen Elementen mit IDs an?

Ja, meine Vermuting ist, dass es einen Index für alle Elemente mit ID gibt.

[Gunnar Bittersmann]

@@1unitedpower

Ja, meine Vermuting ist, dass es einen Index für alle Elemente mit ID gibt.

Macht vor dem Hintergrund mein dortiges Geschreibsel überhaupt Sinn?

Ist es wirklich besser, document.getElementById('foo') außerhalb einer Eventhandlerfunktion (oder einer Schleife) in einer Variablen abzulegen und innerhalb die Referenz aus der Variablen zu verwenden? Oder ist document.getElementById('foo'); innerhalb einer Eventhandlerfunktion (oder einer Schleife) genauso schnell, weil das auch nur in einer schon bestehenden Liste nachsieht?

Und dann ist document.getElementById('foo') vermutlich performanter als document.querySelector('#foo')?

LLAP 🖖

[JürgenB]

Hallo Gunnar,

Und dann ist document.getElementById('foo') vermutlich performanter als document.querySelector('#foo')?

ich habe das mal getestet:

Bei einfachen Abfragen sind beide vergleichbar schnell, bei komplexeren Selektoren gewinnt querySelectorAll.

Gruß
Jürgen

[Christian Kruse]

Hallo Gunnar,

Ist es wirklich besser, document.getElementById('foo') außerhalb einer Eventhandlerfunktion

Wenn das Event nicht gerade zig mal pro Sekunde gefeuert wird: irrelevant.

(oder einer Schleife) in einer Variablen abzulegen und innerhalb die Referenz aus der Variablen zu verwenden?

In einer Schleife macht das durchaus Sinn. Funktions-/Methodenaufrufe sind nicht umsonst. Auch wenn die Funktion selber performant ist, muss bei einem Funktionsaufruf das komplette Stackmanagement abgearbeitet werden.

Und dann ist document.getElementById('foo') vermutlich performanter als document.querySelector('#foo')?

Warum benchmarkst du es nicht einfach? 😀

LG,
CK

[pl]

@Gunnar Bittersmann

Moin,

let inputs = document.querySelectorAll('#colors input');

Warum let?

Wenn man schon eine Referenz auf das form-Objekt hat (und die hat man durch das document.forms-Objekt, also bspw. document.forms[0] oder document.forms['my-form'], dann muss man nicht im ganzen DOM suchen, sodern nur im betreffenden Formular:

const myFormElement = document.forms['my-form'];
const inputs = myFormElement.querySelectorAll('#colors input');

oder

const inputs = document.forms[0].querySelectorAll('#colors input');

Danke für diese Ergänzung!!!

MfG

[pl]

Moin,

querySelectorAll ist hier das Stichwort. Das sollte dich zum Ziel führen.

let inputs = document.querySelectorAll('#colors input');

das selektiert alle Inputs in #colors

Leider kriege ich damit alle Felder des gesamten document. Es sollen jedoch nur die Felder des <fieldset id=colors> ermittelt werden.

Sorry, wr mein fehler bitte ignorieren!!!

MfG

[bobby]

Moin,

Dann hast du was anderes falsch gemacht. Siehe hier: https://jsfiddle.net/j7584zfw/3/

Gruß Bobby

[pl]

hi @bobby

Dann hast du was anderes falsch gemacht.

Das Übliche: Copy&Paste und damit natürlich auch die id kopiert 😉

MfG

[pl]

Danke Euch, das rockt und blubbert!!!

MfG

PS: Gegenleistung folgt natürlich 😉

[pl]

Danke Euch, das rockt und blubbert!!!

MfG

PS: Gegenleistung folgt natürlich 😉

Hier die Idee

Diesem Artikel liegt die Idee zugrunde, eine per HTML-Auszeichnung vorgenommene Gruppierung auf einen proprietären Content-Type abzubilden welcher eine dementsprechende Datentruktur transportiert. Hierzu werden Eingabefelder im HTML-Element fieldset gruppiert. Die mit den Eingaben erzeugte Datenstruktur ist ein JS-Objekt welches mehrere Unterobjekte speicher. Zur Übertragung werden diese Objekte serialisiert via POST gesendet mit dem dazugehörigen Content-Type eav/binary. Dieser Content-Type Header ist wichtig, damit der serverseitige Parser den dazu passenden De-Serializer finden und damit die Daten in ihrer Originalstruktur wiederherstellen kann.

Danke an Alle!

[Matthias Apsel]

Hallo pl,

Warum? Was gefällt dir an der herkömmlichen Übertragung nicht?

Bis demnächst
Matthias

[Mitleser]

Hallo pl, Warum? Was gefällt dir an der herkömmlichen Übertragung nicht?

+1, wer jetzt auch an die Büchse der Pandora denken musste.

[pl]

hi @Matthias Apsel

Warum? Was gefällt dir an der herkömmlichen Übertragung nicht?

Um die Frage, was mir gefällt oder nicht gefällt geht es hier nicht.

Vielmehr geht es darum, zu zeigen daß das Design kompexer Datenstukturen bereits mit der Semantik beginnt. Also wie man die Möglichkeiten, die HTML mit bestimmten Elementen hierzu bietet, dafür konsequent nutzen kann.

Der nächste Punkt betrifft Überlegungen zu einem daraus resultierenden neuen Enctype und wie dessen serverseitige Verarbeitung abwärtskompatibel umgesetzt werden kann. D.h., daß man hierzu serverseitig bereits einen Parser braucht welcher hereinkommende Enctypes auf einem Schichtenmodell abbildet, als Grundlage für dessen Erweiterbarkeit.

Und schließlich haften dem Encype application/x-www-form-urlencoded einige Nachteile an wie z.B. auch die Kontextproblematik Array/Hash woraus der CCC ein Sicherheitsproblem gemacht haben was dem Perlmodul CGI.pm angedichtet wurde.

Wie auch immer, Letzteres löst sich mit einem neuartigen und in meinem Artikel vorgestellten Conten-Type sozusagen in Luft auf, weil dieser Enctype dazu führt, daß Arrays grundsätzlich nur assoziativ übertragen werden. Also genauso wie das PHP auch macht, nur halt daß PHP hierzu keinen neuen Enctype vorsieht.

Die Idee an sich ist also weder neu noch exclusiv auf meinem Mist gewachsen.

MfG

[Gunnar Bittersmann]

@@pl

gibt es eine elegante Methode, die Inputfelder eines <fieldset id="colors"> zu ermitteln?

Wenn du alle Farbeingabefelder (die du als solche ausgezeichent hast) selektieren möchtest, dann tut’s ….querySelector('input[type="color"]').

LLAP 🖖

[beatovich]

hallo

Wenn du alle Farbeingabefelder (die du als solche ausgezeichent hast) selektieren möchtest, dann tut’s ….querySelector('input[type="color"]').

alle => .querySelectorAll()

[Gunnar Bittersmann]

@@beatovich

alle => .querySelectorAll()

Allmächtiger! Allerdings!

LLAP 🖖

[Orlok]

Hallo

gibt es eine elegante Methode, die Inputfelder eines <fieldset id="colors"> zu ermitteln?

Gemäß dem Fall, die zu ermittelnden Felder wären die einzigen Listed Elements in dem genannten fieldset-Element, wäre auch folgendes möglich:

const inputs = document.forms['nameOrIndex'].elements['colors'].elements;

Über die forms-Eigenschaft des Dokumentobjektes erhälst du eine HTMLCollection der form-Elemente des Dokuments.

const form = document.forms[0];

Das passende form-Element kann entweder über seinen Namen oder über seinen Index referenziert werden.

const fieldset = form.elements['colors'];

Das gesuchte fieldset kannst du über seine id in der HTMLFormControlsCollection ansprechen, die beim Zugriff auf die Eigenschaft elements zurückgegeben wird.

const inputs = fieldset.elements;

Das fieldset-Element besitzt ebenfalls eine solche Sammlung. Befinden sich außer den input-Elementen keine Listed Elements in dem fieldset, hast du genau die gesuchten Elemente.

Gruß,

Orlok

[pl]

Danke auch Dir @Orlok ,

Das Ganze befindet sich sozusagen noch in einer experimentellen Phase. Ich hatte schon vor Jahren die Idee, Eingabefelder über das class~Attribute zu gruppieren, was jedoch in der SELFHTML~Fraktion heftige Proteste hervorrief 😉

Ein neuerlicher Gedanke, daß man über <fieldset>~Attribute sämtliche darunterliegenden Eingabefelder disablen/enablen kann, ließ in mir diese gute alte Idee wieder aufleben.

Schöne Grüße.

[Matthias Apsel]

Hallo pl,

Ich hatte schon vor Jahren die Idee, Eingabefelder über das class~Attribute zu gruppieren, was jedoch in der SELFHTML~Fraktion heftige Proteste hervorrief 😉

Ein neuerlicher Gedanke, daß man über <fieldset>~Attribute sämtliche darunterliegenden Eingabefelder disablen/enablen kann, ließ in mir diese gute alte Idee wieder aufleben.

Das klingt in Verbindung mit deinem Artikel ziemlich wirr. gruppieren, disablen, enablen, senden?

Außerdem meinst du fieldset-Elemente.

Interessant in diesem Zusammenhang war für mich Jens Meierts Übersicht über die HTML-Elemente.

Bis demnächst
Matthias

[pl]

hi

Ich hatte schon vor Jahren die Idee, Eingabefelder über das class~Attribute zu gruppieren, was jedoch in der SELFHTML~Fraktion heftige Proteste hervorrief 😉

Ein neuerlicher Gedanke, daß man über <fieldset>~Attribute sämtliche darunterliegenden Eingabefelder disablen/enablen kann, ließ in mir diese gute alte Idee wieder aufleben.

Das klingt in Verbindung mit deinem Artikel ziemlich wirr. gruppieren, disablen, enablen, senden?

Da hast Du wohl meinen Artikel nicht gelesen. Und disable/enable bezieht sich doch auf senden! War übrigens kürzlich Thema hier. MfG

[Matthias Apsel]

Hallo pl,

Da hast Du wohl meinen Artikel nicht gelesen.

Doch.

Bis demnächst
Matthias