Javascript Werte auslesen von array-Input feld und ausgeben

[93cracker93]

Formular:

<div id="bilden"></div>  
<input type="text" name="bilden[]"/>  
<input type="text" name="bilden[]"/>  
<input type="text" name="bilden[]"/>

Beim klick auf button ( der nicht drin ist) wird der Javascript code unte ausgeführt und soll, den bekommenen Array von den einzelnen feldern oben ausgeben in div id bilden.
(bbcode 2 ist der Formname)

Javascript:

var bilden;  
bilden=document.bbcode2.bilden.value;  
document.getElementById('bilden').innerHTML=bilden;

Fehlermeldung:
TypeError: document.bbcode2.bilden is undefined

Bitte um Hilfe, danke

[molily]

Hallo,

bilden=document.bbcode2.bilden.value;

Der Feldname ist nicht »bilden«, sondern »bilden[]«.

document.bbcode2.bilden[].value wäre naheliegend, funktioniert aber nicht, da die eckigen Klammern im JavaScript-Code eine eigene Bedeutung haben und nicht Teil eines Bezeichners (hier als Eigenschaftsname) sein können.

Du kannst aber die gleichwertige Klammer-Notation verwenden:

var fields = document.forms.bbcode2.elements["bilden[]"];

Siehe http://de.selfhtml.org/javascript/objekte/elements.htm#allgemeines.

Wenn du mehrere gleichnamige Input-Felder hast, bekommst du einen http://de.selfhtml.org/javascript/objekte/array.htm@title=Array (eine Liste) mit allen input-Elementen zurück, nicht ein einzelnes Element.

Du musst dich also entscheiden, welches Element du willst. Beispielsweise das erste:

var value = fields[0].value;

Das würde dir den Wert des ersten Feldes geben. Wenn du alle verarbeiten willst, hilft vielleicht eine http://de.selfhtml.org/javascript/sprache/schleifen.htm#for@title=for-Schleife zum Durchlaufen des Arrays weiter.

Grüße,
Mathias

[93cracker93]

document.bbcode2.bilden[].value wäre naheliegend, funktioniert aber nicht, da die eckigen Klammern im JavaScript-Code eine eigene Bedeutung haben und nicht Teil eines Bezeichners (hier als Eigenschaftsname) sein können.

Du kannst aber die gleichwertige Klammer-Notation verwenden:

var fields = document.forms.bbcode2.elements["bilden[]"];

Siehe http://de.selfhtml.org/javascript/objekte/elements.htm#allgemeines.

Danke hat gut funktioniert und gute Erklärung.

Das würde dir den Wert des ersten Feldes geben. Wenn du alle verarbeiten willst, hilft vielleicht eine http://de.selfhtml.org/javascript/sprache/schleifen.htm#for@title=for-Schleife zum Durchlaufen des Arrays weiter.

Ja bräuchte den gesamten Array als String mit Komma abgetrennt ausgegeben, aber weiß jetzt auch nicht genau wie ich das mit der for schleife machen soll, weil die Inputfelder sind beliebig, also können beliebig sein wie der Nutzer das will( zb. 5 inputfelder oder 10inputfelder)

[1UnitedPower]

Ja bräuchte den gesamten Array als String mit Komma abgetrennt ausgegeben

Ein Array kannst du mit der join-Methode zu einem String zusammenfügen. Der erste Paremeter definiert dabei ein Trennzeichen.

var myString = myArray.join(',');

[93cracker93]

Hab es jetzt so gemacht, aber "TypeError: bilden.join is not a function"

var bilden;  
bilden=document.forms.bbcode2.elements["bilden[]"];  
var stringausgabe = bilden.join(',');  
document.getElementById('bilden').innerHTML=stringausgabe;

[1UnitedPower]

Hab es jetzt so gemacht, aber "TypeError: bilden.join is not a function"

bilden ist auch kein echtes Array, sondern eine HTMLCollection, ein array-ähnliches Objekt.
Du kannst aber mit einer Zeile Code ein echtes Array daraus machen:

bilden = Array.prototype.slice.call( bilden );

[93cracker93]

Danke für die Erklärung wieder, aber funktioniert nicht, die Ausgabe ist "[object HTMLInputElement]"

var bilden;  
bilden=document.bbcode2.elements["bilden[]"];  
neubilden = Array.prototype.slice.call( bilden );  
var myString = neubilden.join(',');  
document.getElementById('bilden').innerHTML=myString;

[molily]

Hallo,

var bilden;

bilden=document.bbcode2.elements["bilden[]"];
neubilden = Array.prototype.slice.call( bilden );
var myString = neubilden.join(',');
document.getElementById('bilden').innerHTML=myString;

  
Hier wird nirgendwo der value ausgelesen. Der join versucht, die Array-Elemente in Strings umzuwandeln, und dabei kommt halt '[object HTMLInputElement]' heraus.  
  
Du müsstest eine [map-Operation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) und dann ein join machen. Das geht auch mit einer einfachen Schleife, die die Werte einsammelt:  
  
~~~javascript
var elements = document.bbcode2.elements["bilden[]"];  
var values = [];  
for (var i = 0, l = elements.length; i < l; i++) {  
  var input = elements[i];  
  values.push(input.value);  
}  
var html = values.join(',');  
document.getElementById('bilden').innerHTML = html;

Übrigens ist innerHTML nicht so passen, weil man dann auch HTML-Code eingeben kann. Besser wären die Eigenschaften http://de.selfhtml.org/javascript/objekte/all.htm#inner_text@title=innerText bzw. textContent.

Mathias

[93cracker93]

Danke, das hat perfekt gepasst und auch gute Erklärung dazu,das hilft gut.

Eine Frage noch:

Ich habe per Javascript mir geschrieben, dass wenn jemand auf einen Button klickt ein neues input- text feld erstellt wird. Wie kann ich das begrenzen? Also zb, das man maximal 3 mal inputfelder erstelllen kann?

[1UnitedPower]

Ich habe per Javascript mir geschrieben, dass wenn jemand auf einen Button klickt ein neues input- text feld erstellt wird. Wie kann ich das begrenzen? Also zb, das man maximal 3 mal inputfelder erstelllen kann?

Du kannst zum Beispiel nach dem dritten Klick, den Button entfernen oder deaktivieren. Dazu musst du natürlich wissen, welcher Klick der dritte ist. Dazu legst du am besten einen Zähler an, der bei jedem Klick inkrementiert wird.

[93cracker93]

Du kannst zum Beispiel nach dem dritten Klick, den Button entfernen oder deaktivieren. Dazu musst du natürlich wissen, welcher Klick der dritte ist. Dazu legst du am besten einen Zähler an, der bei jedem Klick inkrementiert wird.

Ja, so hatte ich mir das auch gedacht.
Aber scheitere daran noch.

function Neuestextfeld(){  
var i = 0;  
  
if (i >=3) {  
  
(nichts machen wenn zähler größer gleich 3 ist)  
  
} else {  
  
(hier mein code das neues Textfeld erstellt wird)  
  
i++;  
}  
  
  
    }

Problem, so ist ja jedes mal wenn ich auf den button zum textfelderstellen drücke, der zähler am anfang = 0. Weiß nicht genau wie ich das sonst machen soll.

[1UnitedPower]

Problem, so ist ja jedes mal wenn ich auf den button zum textfelderstellen drücke, der zähler am anfang = 0. Weiß nicht genau wie ich das sonst machen soll.

i ist an dieser Stelle eine lokale Variable, und wird bei jedem Aufruf der Funktion neu inititialisiert. Ein Closure kann das Problem beheben:

Neuestextfeld = (function (){  
   var i = 0;  
   return function(){  
      if (i >=3) {  
         //(nichts machen wenn zähler größer gleich 3 ist)  
      } else {  
         //(hier mein code das neues Textfeld erstellt wird)  
         i++;  
      }  
   };  
}());

[93cracker93]

i ist an dieser Stelle eine lokale Variable, und wird bei jedem Aufruf der Funktion neu inititialisiert. Ein Closure kann das Problem beheben:

Neuestextfeld = (function (){

var i = 0;
   return function(){
      if (i >=3) {
         //(nichts machen wenn zähler größer gleich 3 ist)
      } else {
         //(hier mein code das neues Textfeld erstellt wird)
         i++;
      }
   };
}());

  
Danke, hat gut geklappt und verstanden :)  
  
Auch an molily nochmal danke.