Felder in Formular dynamisch über Button einfügen

B

BacardiBlack

Grünschnabel
Hallo zusammen,

ich möchte ein Formular basten und hinterher mit JSP auslesen und verarbeiten.

In dem Formular soll es u.a. ein Feld Stichwort geben. Nun können aber beliebig viele Stichwörter existieren. Grafisch stelle ich mir das so vor, dass in einer Zeile folgendes steht:

Stichwort: <input> <button>

Über und unter Sichtwort stehen noch weitere input Felder, die aber alle nicht multidimensional sind, sprich wo es nur einen eindeutigen Wert für geben wird.

Wie kann ich realisieren, dass der Benutzer nach dem Klick auf den Button, der mit einem schlichten + beschriftet ist, eine neue (Tabellen-)Zeile angezeigt bekommt?

(Die bereits eingegebenen Werte sollen erhalten bleiben, d.h. das Neuladen der Seite entfällt)

Habt ihr da eine Lösung für mich? Habe schon länger das WWW durchsucht, bin aber leider nicht fündig geworden!

Interessant wäre eine Lösung mit HTML5.

Viele Grüße

BacardiBlack
 
Danke für die schnelle Antwort.

Dieses Beispiel hatte ich bereits gefunden.

Problem hierbei ist nur, dass ich den + Button nicht rechts neben dem Input Feld plaztieren kann. Sobald ich das Ganze in eine Tabelle übernehme, funktioniert das so nicht mehr.
 
Kann man jetzt nichts näheres zu sagen, da dein eigener Code hier nicht vorliegt.

Der empfohlene Thread sollte hier auch als grundsätzlicher Lösungsansatz dienen, der ggfs. auf deine Verhältnisse anzupassen ist.

Weitere Themen / Lösungsbeispiele lassen sich hierzu auch über meinen gestrigen genannten Suchbegriff finden.
 
Zuletzt bearbeitet:
Hier der Code:

Code: 
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function clone_this(objButton)
{
    /**
      *  Das div, in welchem sich das erste input befindet, wird geclont
      **/
    
    tmpNode = objButton.form.elements[1].parentNode.cloneNode(true);
    
    
    /**
      *  das geklonte div wird vor dem Button eingefügt
      *  Syntax...Elternknoten.insertBefore(einzufügenderKnoten,KnotenVorDemEingefügtWerdenSoll);
      **/
    
    objButton.form.insertBefore(tmpNode,objButton);
    
    
    /**  Den Wert des eingefügten inputs wieder löschen
      * previousSibling ist der vorige Knoten eines Typs vor einem anderen Knoten...
      * in diesem Fall das neue div vor dem Button....firstChild wieder das erste Kindelement darin...also das input
      **/
      
    objButton.previousSibling.firstChild.value='';
    
}
//-->
</script>
</head>
<body>
<form>
 <div>Artikel:<input size="20" name="artikel" type="text"></div>
 <div>Stichwort:<input size="20" name="stichwort[]" type="text"></div> 
 <input value="+" onclick="clone_this(this)" type="button">
 <div>Sprache<input size="20" name="sprache" type="text"></div>
 <input value="Submit" onclick="" type="button">
</form>
</body>
</html>
 
Zuletzt bearbeitet:
schnelle Loesung:
Code: 
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function clone_this(objButton)
{
/**
* Das inputfeld, wird geclont
**/

tmpNode = objButton.previousSibling.cloneNode(true);

/** Den Wert des eingefügten inputs wieder löschen
* previousSibling ist der vorige Knoten eines Typs vor einem anderen Knoten...
* in diesem Fall das neue div vor dem Button....firstChild wieder das erste Kindelement darin...also das input
**/

tmpNode.value='';

/**
* Das div, in dem sich das inputfeld befindet, wird geklont und das inputfeld eingesetzt
**/

divNode = objButton.parentNode.cloneNode(false);
divNode.appendChild(tmpNode);

/**
* das geklonte div wird vor dem Button eingefügt
* Syntax...Elternknoten.insertBefore(einzufügenderKnoten,KnotenVorDemEingefügtWerdenSoll);
**/

objButton.form.insertBefore(divNode,objButton.parentNode.nextSibling);




}
//-->
</script>
</head>
<body>
<form>
<div>Artikel:<br /><input size="20" name="artikel" type="text"></div>
<div>Stichwort:<br />
<input size="20" name="stichwort[]" type="text"><input value="+" onclick="clone_this(this)" type="button">
</div>
<div>Sprache:<br /><input size="20" name="sprache" type="text"></div>
<input value="Submit" onclick="" type="button">
</form>
</body>
</html>
Dann hast Du zwar immer den doofen + Button mit dabei aber ist vielleicht gar nicht relevant.

Edit: Sehe gerade das da ein Problem entsteht durch die direkte Ansage des zu klonenden Elementes.

Edit2: Nochmal ueberarbeitet und jetzt wird das div und das darin befindliche inputfeld geklont, der Rest bleibt unberuehrt. Grundsaetzlich sollte da aber geschaut werden, ob man nicht doch eher eine Tabelle zur Formatierung nimmt und dann das Script entsprechend anpasst.
 
Zuletzt bearbeitet:
Habs mit Hilfe von euren Anregungen doch noch hinbekommen:

Code: 
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function clone()
{
    //Wert aus dem ersten Stichwortfeld auslesen, da nur dieses immer geclont wird.
	tmpvalue = document.test.elements['stichwort[]'][1].value;
	//Wert aus dem ersten Stichwortfeld löschen.
	document.test.elements['stichwort[]'][1].value = '';
	//Feld clonen und einfügen
	tmpNode = document.getElementById(1).cloneNode(true);
	document.test.insertBefore(tmpNode,document.getElementById(2));
	//Das erste STichwordfeld mit dem ursprünglichen Wert füllen
	document.test.elements['stichwort[]'][1].value = tmpvalue;    
}
//-->
</script>
</head>
<body>
<form name="test">
 <div>Artikel:<input size="20" name="isbn" type="text"></div>
 <!--Verstecktes stichwort array an Position 0, um das Array zu initialisieren.-->
 <input size="20" name="stichwort[]" value="" type="hidden">
 <table cellspacing="0" cellpadding="0"><tr><td><div id="1">Stichwort:<input size="20" name="stichwort[]" value="" type="text"></div></td><td>
 <input value="+" onclick="clone()" type="button"></td></tr></table>
 <div id="2">Sprache:<input size="20" name="sprache" type="text"></div>
 <input value="Submit" onclick="" type="button">
</form>
</body>
</html>

P.S. Wäre ganz nett, wenn mir mal jemand verrät, wie man den Code so wie ihr vorher in ner extra Box darstellt. Ist bestimmt irgend nen Tag?
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück