JavaScript Array Formularfelder kopieren

[deFac]

Hallo zusammen,

ich habe ein Formular, in dem ich die Felder als "verschachteltes Array" benenne (name="wert[123][5]").

Leider konnte ich noch nicht herausfinden, wie ich auf alle input Elemente mit "wert[123][x]" zugreifen kann. Die würde ich dann gerne in einer Schleife abarbeiten und deren Inhalt in ein korrespondierendes Feld (wert[456][x]) speichern. Also eine Kopierfunktion.

Das Formular sieht zur Zeit so aus.

<form method="post">
<p><label>Wert 5a</label>
  <input type="text" name="wert[123][5]" /></p>
<p><label>Wert 8a</label>
  <input type="text" name="wert[123][8]" /></p>
<p><label>Wert 11a</label>
  <input type="text" name="wert[123][11]" /></p>
 
<p><input type="submit" id="copy" value="Daten kopieren" 
  onclick="copy_values(); return false;" /></p>
 
<p><label>Wert 5b</label>
  <input type="text" name="wert[456][5]" /></p>
<p><label>Wert 8b</label>
  <input type="text" name="wert[456][8]" /></p>
<p><label>Wert 11b</label>
  <input type="text" name="wert[456][11]" /></p>
</form>

Die Werte aus den oberen Feldern sollen in die unteren Felder kopiert werden. Vielleicht kann ich nach einem Tipp, wie ich die ersten Felder ansprechen kann, auch den Rest alleine.

Anpassungen am Code sind generell möglich, aber die Benennung der Felder würde ich gerne so beibehalten.

Freue mich über eure Tipps..

[AmicaNoctis]

Hallo,

die eckigen Klammern und die Indizes darin sind in JS Bestandteil des Namens, z. B.:

document.forms[0]["wert[123][5]"]

Du kannst also nicht mit length oder so arbeiten, sondern müsstest also auf Verdacht erstmal Strings zusammenbauen, bis das entsprechende Feld nicht mehr gefunden wird.

Gruß,

Amica

[deFac]

Hallo,

vielen Dank für den Tipp. Ich habe es jetzt so umgesetzt:

function copy_values(from,to)
{
 
 var regex = /wert\[([0-9]+)\]\[([0-9]+)\]/;
 var result; 
 var inputs = document.getElementsByTagName("input");
 
 for(var i=0;i<inputs.length;i++)
 { 
  var result = regex.exec(inputs[i].name);
  
  if(result != null && result[1] == from)
   document.getElementsByName("wert["+to+"]["+result[2]+"]")[0].value = inputs[i].value;
 }
 
}

[wahsaga]

Erscheint mir extrem aufwendig ...

Ob ein Formularelement mit dem Namen "wert[4711][0815]" existiert, kannst du doch einfach direkt abfragen.
Wenn ja, greifst du auf sein value-Attribut zu, wenn nicht, lässt du's bleiben ...

[deFac]

Prinzipiell richtig.

In konkreten Anwendungsfall sind die Felder in einer Matrix dargestellt. Daher auch die zwei Array-Indices (bei dir 4711 und 0815). Die Anzahl der Felder ist in beide Richtungen variabel. Und idealerweise ist das Javascript so lose gekoppelt, dass es die Namen eben nicht kennen braucht.

Falls ich jetzt aber etwas übersehen habe und es leichter geht, bin ich natürlich daran interessiert das ganze zu vereinfachen. Ist dann sicher auch im Sinne der Reusability interessant.

[AmicaNoctis]

Hallo,

es ließe sich noch weiter vereinfachen, indem du gleich den Regulären Ausdruck passend zu from aufbaust:

var regex = new RegExp("^wert\[" + from + "\]\[([0-9]+)\]$");

Außerdem solltest du den gesamten Namen vergleichen (daher ^ und $), sonst wird auch "preiswert[1][2][34][56]" gefunden.

Gruß,

Amica

[deFac]

es ließe sich noch weiter vereinfachen, indem du gleich den Regulären Ausdruck passend zu from aufbaust

Klar, sehr guter Tipp...

Außerdem solltest du den gesamten Namen vergleichen (daher ^ und $), sonst wird auch "preiswert[1][2][34][56]" gefunden.

Das habe ich sogar bereits erfahren [COLOR=black]müssen. Hätte es der vollständigkeit wegen noch hier posten sollen. Danke.[/COLOR]

[COLOR=black]

var regex = new RegExp("^wert\\["+from+"[/COLOR][COLOR=black]\\]\\[([0-9]+)\\]$");[/COLOR]

[COLOR=black] (das pattern musste in der Form noch escaped werden)[/COLOR]

[COLOR=black]Und ich glaub das var result sollte man auch nur einmalig definieren, oder?[/COLOR]


[COLOR=black]

function copy_values(from,to)[/COLOR]
[COLOR=black]{[/COLOR]
[COLOR=black]var regexp = new RegExp("^wert\\["+from+"\\]\\[([0-9]+)\\]$");[/COLOR]
[COLOR=black]var result;[/COLOR]
var inputs = document.getElementsByTagName("input");
 
 for(var i=0;i<inputs.length;i++)
 { 
  result = regexp.exec(inputs[i].name);
  if(result != null)
   document.getElementsByName("wert["+to+"]["+result[1]+"]")[0].value = inputs[i].value;
 }
}