Alle name-Attribute ermitteln

[Daggie]

Zu ermitteln sind alle Name-Attribute innerhalb eines Formulars. Wie ist da vorzugehen? Im Ergebnis sollen alle im <form> vorligenden name-Attribute als eindeutige Einträge in einem Array vorliegen, also eindeutig auch dann, wenn es mehrere Eingabe-Elemente mit gleichlautenden name= gibt.

Bitte mal um Unterstützung

[TS]

Hallo und guten Morgen,

Zu ermitteln sind alle Name-Attribute innerhalb eines Formulars. Wie ist da vorzugehen? Im Ergebnis sollen alle im <form> vorligenden name-Attribute als eindeutige Einträge in einem Array vorliegen, also eindeutig auch dann, wenn es mehrere Eingabe-Elemente mit gleichlautenden name= gibt.

Hat das Formular eine ID?
Dann hole dir diese Node mittels document.getElementByID(FormularID);

Dann kannst Du anschließend die Liste der Child-Nodes zusammenstellen.
Diese kannst Du dann iterieren und die Name-Attribute auslesen.

http://wiki.selfhtml.org/wiki/JavaScript/Objekte/DOM/document/node ff
http://wiki.selfhtml.org/wiki/JavaScript/Objekte/DOM/element
http://wiki.selfhtml.org/wiki/JavaScript/Objekte/DOM/element/childNodes

Grüße
TS

[Gunnar Bittersmann]

@@TS

Hat das Formular eine ID?
Dann hole dir diese Node mittels document.getElementByID(FormularID);

Dann kannst Du anschließend die Liste der Child-Nodes zusammenstellen.

Die kriegt man ganz einfach in einem Rutsch mit document.querySelectorAll('#FormularID [name]')

LLAP 🖖

[var]

Hallo Daggie

Zu ermitteln sind alle Name-Attribute innerhalb eines Formulars. Wie ist da vorzugehen? Im Ergebnis sollen alle im <form> vorligenden name-Attribute als eindeutige Einträge in einem Array vorliegen, also eindeutig auch dann, wenn es mehrere Eingabe-Elemente mit gleichlautenden name= gibt.

var elements = document.getElementsByTagName('FORM');

var names = [ ];

for (var i = 0; i < elements.length; i++) {

  if (elements[i].hasAttribute('name')) {

    var val = elements[i].getAttribute('name');

    if (names.indexOf(val) === -1) {

      names.push(val);

    }

  }

}

Ungeprüft, aber so ähnlich könnte es funktionieren.

Gruß,

var

[Felix Riesterer]

Liebe(r) var,

  if (elements[i].hasAttribute('name')) {

    var val = elements[i].getAttribute('name');

    if (names.indexOf(val) === -1) {

      names.push(val);

    }

  }

da fehlt jetzt aber die eindeutige Zuordnung von Name und Element, insbesondere beim mehrfachen Vorkommen des selben Namens - was aber gefordert war.

Liebe Grüße,

Felix Riesterer.

[var]

Hallo Felix

da fehlt jetzt aber die eindeutige Zuordnung von Name und Element, insbesondere beim mehrfachen Vorkommen des selben Namens - was aber gefordert war.

Das stimmt. Ich hatte es erst so verstanden, dass im Ergebnis ein Array mit allen names aller form Elemente vorliegen soll, ohne Doppeleinträge. ;-)

Gruß,

var

[Felix Riesterer]

Liebe(r) Daggie,

Du willst ein Array:

var ergebnis = new Array(); // umständlich
var ergebnis = []; // besser

Du willst alle name-Attribute... also musst Du alle Elemente des Formulars daraufhin untersuchen, ob sie ein solches haben:

var el = meinFormular.getElementsByTagName("*"); // alle Elemente des Formulars
var n;

for (var i = 0; i < el.length; i++) {
    // hat el[i] ein name-Attribut?
    if (el[i].hasAttribute("name") {
        // name-Wert herausfinden
        n = el[i].getAttribute("name");

        // und was mache ich jetzt mit n und el[i]...?
    }
}

Je nach Deinem Einsatzzweck, den Du noch nicht verraten hast, ist nun die Frage, wie Du Deine Funde im Array "ergebnis" ablegen möchtest.

Liebe Grüße,

Felix Riesterer.

[Daggie]

Liebe(r) Daggie,

egal ;) Dig, Dag, Digedag

Du willst ein Array: var ergebnis = []; // besser

var names = [];

if (el[i].hasAttribute("name") {

ahh, danke, hasAttribue() ist genau das zu. In Verbindung mit den Child-Nodes... Es ist nur aber so, dass die Input-Elemente nicht unmittelbar unter dem Form-Element liegen sondern ggf. in FieldSet-Elemente geschachtelt sind. Hier fehlt mir noch die zündende Idee.

Je nach Deinem Einsatzzweck, den Du noch nicht verraten hast, ist nun die Frage, wie Du Deine Funde im Array "ergebnis" ablegen möchtest.

z.B. so: var request = fetchinput(['auswahl','blumen','namen','senddata','vname','farben','mesg']); bzw. nunmehr so var request = fetchinput(names);

und das objekt sieht dann so aus:

$request = { 'blumen' => { # input type='checkbox' name='blumen', mehrere Checkboxen '1' => 'Tulpen', '0' => 'Rosen', # Mehrfachauswahl, Auswahl des Benutzers '2' => 'Nelken' }, 'namen' => { # input type='text' name='namen', mehrere Inputfelder '1' => 'Berta', '0' => 'Anton', # Benutzer hat diese Felder mit Werten befüllt '2' => 'Cäsar' }, 'farben' => { # input type='radio' name='farben', mehrere radio-Boxen '0' => 'Blau' # Auswahl des Benutzers, value='Blau' }, 'param' => { # Inputfelder, bei denen name='' nur einmal vorkommt 'senddata' => '1', # button name='senddata' 'mesg' => 'Jawoll, das hier ist die Message!', # textarea name='mesg' 'vname' => 'Hannes', # input name='vname' 'auswahl' => 'vielleicht' # select name='auswahl' } };

fetchinput() habe ich soweit fertig, kann das jetzt ergänzen um eine weitere Funktion zum Ermitteln der in einem bestimmten Form (per Form-Name oder ID) eingetragenen Namen und somit recht einfach auch mal mehrere Forms auf einer Seite haben.

Danke Euch!!

[Gunnar Bittersmann]

@@Daggie

Du willst alle name-Attribute... also musst Du alle Elemente des Formulars daraufhin untersuchen, ob sie ein solches haben:

var el = meinFormular.getElementsByTagName("*"); // alle Elemente des Formulars

Wozu erst alle Elemente des Formulars holen, wenn man nur die mit name-Attribut haben will?

Es ist nur aber so, dass die Input-Elemente nicht unmittelbar unter dem Form-Element liegen sondern ggf. in FieldSet-Elemente geschachtelt sind.

Deshalb ja Nachfahren, nicht Kinder selektieren.

LLAP 🖖

[Daggie]

hi,

Deshalb ja Nachfahren, nicht Kinder selektieren.

Ahh, verstehe, ja, das funktioniert, danke Dir!

Hier nocheinmal der Verwendungszweck, schön formatiert

$request = {
      'blumen' => {                     # input type='checkbox' name='blumen', mehrere Checkboxen
                    '1' => 'Tulpen',
                    '0' => 'Rosen',           # Mehrfachauswahl, Auswahl des Benutzers
                    '2' => 'Nelken'
                  },
      'namen' => {                      # input type='text' name='namen', mehrere Inputfelder
                   '1' => 'Berta',
                   '0' => 'Anton',            # Benutzer hat diese Felder mit Werten befüllt
                   '2' => 'Cäsar'
                 },
      'farben' => {                     # input type='radio' name='farben', mehrere radio-Boxen
                    '0' => 'Blau'                                 # Auswahl des Benutzers, value='Blau'
                  },
      'param' => {                      # Inputfelder, bei denen name='' nur einmal vorkommt
                   'senddata' => '1',                                 # button   name='senddata'
                   'mesg'     => 'Jawoll, das hier ist die Message!', # textarea name='mesg'
                   'vname'    => 'Hannes',                            # input    name='vname'
                   'auswahl'  => 'vielleicht'                         # select   name='auswahl'
                 }
};

[Jörg Reinholz]

Moin!

Zu ermitteln sind alle Name-Attribute innerhalb eines Formulars. Wie ist da vorzugehen? Im Ergebnis sollen alle im <form> vorligenden name-Attribute als eindeutige Einträge in einem Array vorliegen, also eindeutig auch dann, wenn es mehrere Eingabe-Elemente mit gleichlautenden name= gibt.

Frage:

• Scheiterst Du am Holen der Namen oder an der Bildung des Arrays?

Hinweis:

array[0]='foo';
array[1]='foo';

ist eindeutig, weil jedem Array-Element genau ein Name zugeordnet ist.

array[0]='foo_0';
array[1]='foo_1';

wäre eineindeutig, weil jedem Array-Element genau ein Name und jedem Name genau ein Array-Element zugeordnet ist.

Fragen:

• Was meint Dein "eindeutig"?
• Wenn "eineindeutig" gemeint ist, nach welcher Vorschrift soll der neue Name gebildet werden?

Jörg Reinholz

[Der Martin]

Hallo,

Zu ermitteln sind alle Name-Attribute innerhalb eines Formulars.

du meinst vermutlich alle Formularelemente mit einem name-Attribut? - So eine Liste gibt es schon, die stellt Javascript in form.elements[] als Array zur Verfügung. Nein, strenggenommen kein Array, sondern eine Collection; aber man kann damit weitgehend wie mit einem Array agieren. Zum Beispiel mit einer for-in-Schleife darüber iterieren.

Im Ergebnis sollen alle im <form> vorligenden name-Attribute als eindeutige Einträge in einem Array vorliegen, also eindeutig auch dann, wenn es mehrere Eingabe-Elemente mit gleichlautenden name= gibt.

Wie willst du die Eindeutigkeit dann realisieren? Sollen Elemente, die als zweite, dritte ... mit demselben Namen auftreten, einfach ignoriert werden? In form.elements[] ist das so gelöst, dass der jeweilige Eintrag dann seinerseits wieder ein Array ist, das alle gleichnamigen Elemente enthält.

Bitte mal um Unterstützung

Gern, aber mir ist noch nicht klar, was du wirklich willst.

So long,
 Martin

[Daggie]

Das Ergebnis habe ich doch schon, hier isses:

    var xnames = document.querySelectorAll('#myform [name]')    ; // Gunnar

    var names = [];
    for(var i = 0; i < xnames.length; i++){
        var name = xnames[i].name;
        if(names.indexOf(name) === -1){
            names.push(name);
            console.log(name);
        }
    }

    
    var request = fetchinput(names); // erzeugt dann das Request-objekt mit allen Eingaben

Das Form ist kompatibel zum herkömmlichen Submit, keine weitere Konfiguration erforderlich. Lediglich eine ID ist an das Form zu übergeben.

[Gunnar Bittersmann]

@@Daggie

Das Ergebnis habe ich doch schon, hier isses:
var xnames = document.querySelectorAll('#myform [name]') ; // Gunnar

Wo die Collection myFormElement.elements^[1] schon mal existiert, sollte man die natürlich verwenden. Da muss man sich die Elemente nicht nochmals raussuchen; da hat Der Martin schon recht.

Also bspw.
var xnames = document.querySelector('#myform').elements ; // Der Martin & Gunnar

LLAP 🖖

---

1. myFormElement muss natürlich gefüllt werden, bspw. var myFormElement = document.querySelector('#myform'); ↩︎

[var]

@Gunnar

Wo die Collection myFormElement.elements[^1] schon mal existiert, sollte man die natürlich verwenden. Da muss man sich die Elemente nicht nochmals raussuchen; da hat Der Martin schon recht.

[...] myFormElement muss natürlich gefüllt werden, bspw. var myFormElement = document.querySelector('#myform');

Und wo die Collection forms schon mal existiert, könnte man, sofern das form Element ebenfalls ein name Attribut hat, dieses auch direkt darüber ansprechen: var myFormElement = forms['name'] (und sich die ID-Vergabe so unter Umständen sparen).

Gruß,

var

[var]

@var

Und wo die Collection forms schon mal existiert, könnte man, sofern das form Element ebenfalls ein name Attribut hat, dieses auch direkt darüber ansprechen: var myFormElement = forms['name'] (und sich die ID-Vergabe so unter Umständen sparen).

Oder wenn es kein name-Attribut hat, dann einfach über den Index (also die Reihenfolge der form Elemente im Dokument).

Zum Beispiel var xnames = forms[0].elements, wenn ohnehin das einzige derartige Element auf der Seite ist...

Gruß,

var

[Daggie]

Der Aufruf mit name-Übergabe like

var request = fetchinput(['auswahl','blumen','namen','senddata','vname','farben','mesg']);

hat natürlich auch Vorteile, ua. den, dass die Liste der Parameternamen serverseitig verwaltet und über Platzhalter in das Template gegeben werden kann. Zweckmäßig ist sowas, wenn schließlich auch die Input-Elemente serververseitig (automatisiert) erstellt werden sollen.

Last but not least liefert fetchinput() ein Objekt, in welchem Parameter, resultierend aus Input-Feldern mit einem name-Attribut, sauber getrennt sind von Parametern die aus Input-Feldern resultieren, wovon es mehrere mit demselben name-Attribut gibt. Z.B. mehrere checkbox mit dem gleichen Namen für eine Mehrfachauswahl oder mehrere Input-Felder mit denen mehrere Werte unter einem Parameternamen erfasst werden sollen. Eine solche Trennung verfreundlicht dann auch den serverseitigen Code.

Das Objekt wird z.B. als JSON-String via POST gesendet, diesbez. Libs liegen fix&fertig vor.

Danke an Alle, freundliche Grüße, Dag

[var]

Hallo Martin

[...] So eine Liste gibt es schon, die stellt Javascript in form.elements[] als Array zur Verfügung.

Besser forms.elements[ ] ;-)

Gruß,

var

[Der Martin]

Hi,

[...] So eine Liste gibt es schon, die stellt Javascript in form.elements[] als Array zur Verfügung.

Besser forms.elements[ ] ;-)

ich bin davon ausgegangen, dass ich schon eine Referenz auf das Formular-Objekt habe; so gesehen war form hier als Platzhalter gemeint.

So long,
 Martin

[var]

Heja

ich bin davon ausgegangen, dass ich schon eine Referenz auf das Formular-Objekt habe; so gesehen war form hier als Platzhalter gemeint.

Ist mir beim nochmaligen durchlesen deines Posts auch aufgefallen, aber meine Antwort war auch unglücklich formuliert...

forms[ ].elements[ ] ;-)

Gruß,

var

[Daggie]

hi,

Zu ermitteln sind alle Name-Attribute innerhalb eines Formulars.

du meinst vermutlich alle Formularelemente mit einem name-Attribut? - So eine Liste gibt es schon, die stellt Javascript in form.elements[] als Array zur Verfügung.

Juhu, das ist ja ideal, und ich hab das heute mal getestet. Cool!!! und der IE kanns auch ;)

Gern, aber mir ist noch nicht klar, was du wirklich willst.

Herkömmlich für CGI/Submit bei Formularverarbeitung sind die im Attribute name= konfigurierten Werte. Für mich steht bei einer Erweiterung auf Ajax die Kompatibilität im Vordergrund. D.h., an bereits vorliegenden Formularen soll nichts geändert werden, sofern neben CGI/Submit auch Ajax möglich sein soll.

Ausschlaggebend ist also das name-Attribut an Input-Elementen, über dieses Attribut werden Eingaben sowohl scalar erfasst (nur ein name-Attribut) als auch für multiple Inputs gruppiert (mehrere Input-Elemente mit demselben name-Attribut, Mehrfachauswahl). Eben aufgrund dieser Anforderung habe ich eine JS-Library entwickelt, wobei die Zentralfunktion zum Ermitteln der Benutzereingaben auf die Liste mit den name-Attributen aufsetzt. Welchen Type beim Funktionsaufrufruf die Inputfelder sind, type='text', type='checkbox' usw. ist dem Anwender der Funktion transparent, d.h., er muss sich darum nicht bekümmern. Die Funktion liefert ein Objekt, in welchem die Benutzereingaben multiple/einfach => array/scalar sauber getrennt sind.

Wie das Request-Objekt aussieht, siehe in einem meinem Beitrag weiter oben. Die Anwendung meiner Lib ist nun denkbar einfach, es wird lediglich anhand der Formular-ID eine Funktion aufgerufen, welche Benutzereingaben clientseitig in genau derselben Datenstruktur liefert wie serverseitig.

PS: Es gab vor ein paar Tagen einen Thread zu genau demselben Thema (speziell Mehrfachauswahl). Ich bin an dieser Sache schon länger dran, je nachdem, wie ich gerade Zeit habe. In meiner Lösung nun müssen die name= Werte nicht irgendwelchen Konventienen genügen, z.B. müssen die Namen, wie im Fall PHP nicht name='name[]' lauten, d.h. die Klammern sind für den Anwender meiner Lib unnötig.

--Dag