Für die Oberfläche von Web-Applikationen wird häufig die Möglichkeit benötigt, eine Gruppe von Eingabefeldern mehrfach anzugeben. Dabei soll die Zahl der möglichen Eingabeblöcke vim Benutzer variabel gestaltet werden können.
Mit Hilfe von JavaScript und DOM ist es möglich, das Forumlar schon im Browser zu bearbeiten, ohne dass ein Request an den Server abgesetzt werden muss.
Die JavaScript Datei wird wie gewöhnlich im Kopf des HTML Dokuments eingebunden
Die variablen Blöcke werden in einen Container eingeschlossen. Dieser wird z.B. durch ein <div> Tag gebildet. Der Container wird über das id Attribut identifiziert.
<div id="ContainerID">
<div id="multiNode_0">
... content to copy ...
</div>
</div>
Der zu kopierende Codeblock wird innerhalb des Containers mit einer weiteren ID gekennzeichnet. Wichtig ist hier, dass die ID auf _0 endet. Die Bearbeitungsroutinen inkrementieren beim Kopiren alle id- und name- Attribute innerhalb des Blocks. So werden die Formularfelder eindeutig gehalten und können von der Applikation auf dem Server ausgewertet werden.
Die Links oder Buttons für das Copy und Paste werden folgendermassen gestaltet:
<a id="cutMultiNode_0"
href="javascript: cutMultiBlock('ContainerID','multiNode_0');">
Cut Element </a>
<a id="copyMultiBlock_0"
href="javascript: copyMultiBlock('ContainerID','multiNode_0');">
Copy Element </a>
<a id="dupMultiBloc_0"
href="javascript: duplicateMultiBlock('ContainerID','multiNode_0');">
Duplicate Element </a>
<input type="button" value="Paste"
onClick="pasteMultiBlock('ContanierID','multiNode_0')" />