# Formular dynamisch erweitern.



## südpol (6. November 2004)

Hi,

ich möchte gerne ein formular dynamisch erweitern. Sprich wenn jemand auf einen button klickt sollen weitere Felder erscheinen. Klickt er noch mal kommen noch mehr etc.

Es soll also z. B. ein input feld da stehen darunter ein button <noch eins> und nach jedem klick wird ein weiteres feld hinzugefügt, dass als prfix im namen einfach eine zahl hat die um 1 hochgezählt wird... 

Wie geht das? hat jemand zufällig ein gute Anleitung oder ein speispielscript zur hand? 

P. S. komme aus der php - Ecke und habe wenig Ahnung von javascript - muss ich leider zugeben...

Gruß


----------



## Sven Mintel (7. November 2004)

Beispiel:

```
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function clone_this(objButton)
{
if(objButton.parentNode)
    {
    tmpNode=objButton.parentNode.cloneNode(true);
    objButton.form.appendChild(tmpNode);
    for(j=0;j<objButton.form.lastChild.childNodes.length;++j)
        {
        if(objButton.form.lastChild.childNodes[j].type=='text')
            {
            objButton.form.lastChild.childNodes[j].value='';
            break;
            }
        }
    objButton.value="entfernen";
    objButton.onclick=new Function('f1','this.form.removeChild(this.parentNode)');
    }
}
//-->
</script>
</head>
<body>
<form>
 <div>
  <input type="text"size="20"name="textfeldname[]"><br>
  <input type="button"value="noch eins"onclick="clone_this(this)">
 </div>
</form>
</body>
</html>
```
Erläuterung:
Der Button und das Textfeld stehen in einem <div>(kann auch was anderes sein...span bspw)
Beim Aufruf wird der Funktion der Button als Objekt übergeben...dadurch hat man Zugriff auf alle seine Eigenschaften.

*if(objButton.parentNode)*
Abfrage, ob der Button einen Elternknoten hat...in DOM-Browsern ist dies der Fall...der Elternknoten ist das <div>

*tmpNode=objButton.parentNode.cloneNode(true);*
Von diesem Elternknoten wird eine Kopie erstellt

*objButton.form.appendChild(tmpNode);*
diese Kopie wird ans Ende des Formulars gehängt


```
for(j=0;j<objButton.form.lastChild.childNodes.length;++j)
        {
        if(objButton.form.lastChild.childNodes[j].type=='text')
            {
            objButton.form.lastChild.childNodes[j].value='';
            break;
            }
        }
```
...der Inhalt des grad erstellten Textfeldes wird gelöscht... der wurde nämlich mitgeklont 

Danach habsch noch als Feature das Ändern des angeklickten Buttons eingefügt...sein Wert wird auf "entfernen" geändert...wenn man jetzt draufklickt, wird dieser Button incl. des dazugehörigen Textfeldes wieder gelöscht.
(kannst du natürlich rausnehmen, wenn du es nicht brauchst)

Auf das Durchnummerieren der Textfelder hab ich verzichtet....das wäre unnützer Mehraufwand.
In PHP kannst du durch die Klammer in "textfeldname[]" auch so bequem auf die Textfelddaten zugreifen.

Testbeispiel


----------



## südpol (16. November 2004)

... wenn wir uns jemals treffen geb ich dir einen aus! Super Anleitung super Beispiel! ... das man textfelder als array speichern kann wusste ich auch noch nicht *grübel* ich dachte, dass hatte ich schon mal getestet... 

Eine, für dich vermutlich einfache, Frage verbleibt noch. Was muss ich an dem Skript ändern um das neue Textfeld an die Stelle zu bekommen an der bis jetzt der "noch ein Feld" Button war. Wenn das geht bin ich fast restlos glücklich bzw. ab dann sollte ich alle Änderungen durch try and error rausfinden können...

noch mal vielen vielen Dank!


----------



## Sven Mintel (17. November 2004)

Das ginge z.B. so:

```
<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[0].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><input size="20" name="textfeldname[]" type="text"></div>
 <input value="noch eins" onclick="clone_this(this)" type="button">
</form>
</body>
</html>
```


----------



## südpol (19. November 2004)

VIELEN DANK SOWEIT SCHON MAL!

das sieht alles nicht so schwer aus - aber so richig gut anpassen funktioniert bei mir leider noch nicht. Könnt ihr mir zu dem Thema DHTML ein gutes Buch empfehlen. Das Thema scheint eine sehr gute Ergänzung für meine php - Seiten zu sein. 

Wenn ihr Lust habt könnt ihr mir - solange das Buch auf dem Postweg ist  - ja noch ein paar Tipps geben. Ich muss die Funktion nun nämlich noch erweitern *heul*   

Ich habe ein ganz langes Formular, welches sich dynamisch mit Daten füllt. Ganz am Ende des Formulars soll nun ein Button hin der das Eingeben eines weiteren Datensatzes ermöglicht. Die Probleme vor denen ich stehe sind folgende:
1. ich muss eine ganze Tabelle inkl. Formularelemente einfügen
2. das ganze soll wie von euch schon gezeigt per klick auf einen Button immer weiter erweitert werden können.

Vielen Dank für eure Tipps!


----------



## Sven Mintel (20. November 2004)

Naja... ob Tabelle oder Textfeld ist da egal....
klone die Tabelle mitsamt Inhalt, und hänge sie ans Ende ran.... für JS macht das keinen Unterschied


----------



## südpol (20. November 2004)

hmm aber welches Objekt, oder was auch immer spreche ich da an?


----------



## Sven Mintel (20. November 2004)

Wenn du eine Tabbelle Klonen willst, dann musst die Tabelle ansprechen.
Zum ranhängen musst du...wenns ans Ende des Formular soll...das Formular ansprechen.


----------



## südpol (22. November 2004)

Hi,

ich hoffe ich nerve nicht zusehr. Ich habe das ganze jetzt mal 'selber' versucht. Ist zwar sehr primitiv (vermutlich). Allerdings funktioniert es nicht. Ihr als Profis müsst bestimmt nich lange suchen um den Fehler zu finden. Ich hänge an dieser Stelle mal wieder. 

So - sollte - der Ablauf sein: html Teil in ein div - Tag packen und über css "verstecken". Dieses Element soll dann zukünftig durch eine funktion geclont und vor dem Button wieder eigefügt werden. (so ist die Funktion auch noch in anderen Teilen einsetzbar und muss nicht angepasst werden  -> man ist ja faul *g*)

So dachte ich könnte das js aussehen:

```
function clone_this(button, objid)
{
  var clone_me = document.getElementById(objid).cloneNode(true);
  document.getElementById(button).insertBefore(clone_me, document.getElementById(button));
}
```
diese funktion wird dann im head eingefügt. Das html zeugs könnte dann so aussehen:


```
<div style="visibility:hidden; display:none">
<div "dolly">
  <table>
    <tr>
      <td>test</test>
      <td><input type="text" name="test[]"></input></td>
    </tr>
      <td>test2</test>
      <td><input type="text" name="test2[]"></input></td>
    </tr>
  </table>
</div>
</div>

<div class="new_passage">
  <input value="mehr" onclick="javascript:clone_this(this, 'new_passage');" type="button"></input>
</div>
```

Leider funktioniert das nicht - hat jemand einen Tipp bzw. einen verbesserungsvorschlag, damit das ganze funktioniert?

DANKE!


----------



## Quaese (22. November 2004)

Hi,

mit folgender Funktion clonest Du die Tabelle, die sich innerhalb des DIVs befindet. Es ist zu
beachten, dass sich zwischen dem DIV- und dem TABLE-Tag kein Zeichen befindet. Dieses 
würde in einigen Browsern als *firstChild*-Objekt erkannt werden. Damit würde nicht die
Tabelle, sondern das Zeichen gecloned werden.

```
function clone_this(button, objid){
    // Tabelle innerhalb des DIVs mit ID "new_passage" clonen
    // Achtung: Es dürfen keine Zeichen zwischen dem DIV- und dem TABLE-Tag stehen!
    var clone_me = document.getElementById(objid).firstChild.cloneNode(true);

    // Im Parent-DIV vor dem Kindknoten "button" einhängen
    button.parentNode.insertBefore(clone_me, button);
}
```
Deinen bisherigen Code müsstest Du folgendermassen abändern:

```
<div style="visibility:hidden; display:none">
<div id="new_passage"><table name="cloneTable">
    <tr>
      <td>test</test>
      <td><input type="text" name="test[]"></input></td>
    </tr>
      <td>test2</test>
      <td><input type="text" name="test2[]"></input></td>
    </tr>
  </table>
</div>
</div>

<div>
  <input value="mehr" onclick="javascript:clone_this(this, 'new_passage');" type="button"></input>
</div>
```
Ich hoffe, das hilft Dir weiter.

Ciao
Quaese


----------



## südpol (22. November 2004)

Vielen Dank!

jetzt funktioniert es soweit perfekt! Hmm hoffentlich kommt mein dhtml Buch bald - ich will langsam auch mal selber auf solche Ideen kommen bzw. genau verstehe, was ich da mache...

noch mal vielen Dank für die Hilfe!


----------



## südpol (22. November 2004)

Vielen DANK! Das clonen funktioniert nun wunderbar! Langsam aber sicher fange ich sogar an zu verstehen was ich da abschreibe...  Wenn jetzt noch mein dhtml Buch kommt kann ich richtig anfangen...

Mein letzter Schritt für dieses Formular ist nun noch einen löschen Button einzufügen (wie im oberen Beispiel). 


```
<div style="visibility:hidden; display:none"> 
  <div id="new_passage"><table name="cloneTable">
    <tr>
      <td>test</test><td>
      <input type="text" name="test[]"></input>
      </td>
      <td rowspan="2"><a href="#" onclick="javascript:remove_this(this); return false;">LÖSCHEN</a>
      </td>   
    </tr>
      <td>test2</test>
     <td><input type="text" name="test2[]"></input></td>
    </tr>
  </table></div>
 </div>
<div>
  <input value="mehr" onclick="javascript:clone_this(this, 'new_passage');"  type="button">
  </input> 
</div>
```

Bei der Funktion zu remove_this() scheitere ich aber schon wieder ich habe mir mit hilfe von alert schon rausgesucht, dass ich 5 mal parentNode verwenden muss um zum richtigen div tag zu kommen unter dem alles gelöscht werden soll. Wenn es dann allerdings ums löschen selber geht (die funktion ist wohl removeChild() ) dann hängt es bei mir wieder an mehreren Stellen. Hat hier zufällig auch noch jemand eine gute Idee bzw. ein code - schnippsel der mir weiterhelfen kann? (am besten ohne id´s anzusprechen - da ich die Felder ja clone könnte das zu Problemen führen, da diese auch gleich sind...)

Liebe Grüße


----------



## Sven Mintel (24. November 2004)

Es mag etwas albern aussehen(dasmit 5xparentNode hast du ja schon rausbekommen), ist aber tatsächlich so:suspekt:

```
function remove_this(objLink)
{
objLink.parentNode.parentNode.parentNode.parentNode.parentNode.removeChild(objLink.parentNode.parentNode.parentNode.parentNode);
}
```

die Syntax von removeChild ist 

```
elternknoten.removeChild(Kindknoten);
```

die Funktion macht also folgendes:

```
objLink[link].parentNode[td].parentNode[tr].parentNode[tbody].parentNode[table].parentNode[div].removeChild(objLink[link].parentNode[td].parentNode[tr].parentNode[tbody].parentNode[table]);
```


Zu beachten dabei ist, dass du bei  Tabellen u.U. einen Elterknoten weiter hoch gehen musst, als du im Dokument stehen hast.... die Browser erzeugen in der Knotenstruktur von sich aus einen <TBODY>, wenn keiner vorhanden ist.


----------



## südpol (25. November 2004)

Danke!     Da mein Buch weiter auf sich warten lässt muss ich euch noch mal nerven (ich hätte es neu bestellen sollen diese Gebrauchtmärkte sind einfach viel zu langsam...)

Ich habe die Funktion nun eingebaut. Leider erhalte ich immer die JS Meldung, dass ein Fehler auf der Seite ist. In den Details steht dann was von ungültigem Argument. Was kann das sein? Die Debug infos insbesondere die Zeilenangaben scheinen fast so brauchbar zu sein wie bei php  (in der Umgebung von Zeile xy  )

So sieht meine Seite (Ausschnitt) gerade aus. (sorry für die Struktur, ist via php erzeugt daher etwas durcheinander...)


```
<form method="post" action="new_or_edit_policy_capture_forward.php?rap_id=24">
<input type="hidden" name="rap_id" value="24"></input>
<br />
<div id="hidden" style="visibility:hidden; display:none">
  <div id="new_passage"><table width="95%" name="cloneTable">
    <tr>
      <td class="hellgrautab" colspan="2">
      NEW_POLICY_PASSAGE      </td>
      <td class="helltab" rowspan="3">
      <a href="#" id="delete_button" onclick="javascript:remove_this(this); return false;">
      <img src="images/trash.gif" border="0" alt="LOESCHEN"></a>
      </td>
    </tr>
    <tr>
      <td class="helltab">
              CHAPTER:&nbsp;
            <input type="hidden" name="new_pointer_character[]" value="1"></input>
      <input type="text" size="3" name="new_pointer_character_value[]" value="000" onfocus="kill_content(this, 000)"></input>
      </td>
      <td class="helltab">
      <input type="text" size="91" name="new_passage_headline[]" value="PASSAGE_HEADLINE" onfocus="kill_content(this, 'PASSAGE_HEADLINE')"></input>
      </td>
    </tr>
    <tr>
      <td class="helltab" colspan="2">
      <textarea cols="85" rows="5" name="new_passage[]" onfocus="kill_content(this, 'INSERT_THE_PASSAGE_HERE')">INSERT_THE_PASSAGE_HERE</textarea>
      </td>
    </tr>
  </table></div>
</div>
<div>
  <input class="button" value="FURTHER_PASSAGE" onclick="javascript:clone_this(this,'new_passage');" type="button"></input>
</div>
<br />
<div>
  <input class="button" type="submit" value="SUBMIT"></input>
</div>
```
Die funktion sieht gerade so aus:

```
function remove_this(objLink)
{
  objLink.parentNode.parentNode.parentNode.parentNode.parentNode.removeChild(objLink.parentNode.parentNode.parentNode.parentNode.parentNode);
}
```

Kann hier jemand auf anhieb sehen, was da falsch läuft? Die ID des Remove Buttons möchte ich jedoch nicht ansprechen, da diese objekte geclont werden und somit mehrfach auf einer Seite vorkommen können 

Vielen Dank!


----------



## Sven Mintel (25. November 2004)

Bei der Angabe des zu löschenden Knotens(das innerhalb der Klammern)...ist ein "parentNode" zu viel.


----------



## südpol (25. November 2004)

*mist* du hast recht. Dank dir! Jetzt ist meine Seite schon fast fertig *freu* dhtml fängt an mir zu gefallen. Hoffentlich kommt mein Buch bald *freu*

Eine Schlussfrage zum besseren Verständnis. Wie müsst so eine Löschfunktion nun aussehen wenn ich den Inhalt eines div - tags mit einer bestimmten ID löschen möchte. 

Sprich ich habe ein ewig langes dokument in dem an einer beliebigen Stelle folgendes steht:

```
<div id="kill_mich_12"><table><tr><td>&nbsp;</td></tr></table></div>
```
irgendwo im Dokument ist dann ein Button. Sobald der gedrückt wird soll dieser, durch das div - Tag eingeschlossene Bereich, gelöscht werden...

Geht das? Oder muss man immer alle knoten durch gehen um etwas zu löschen?


----------



## Sven Mintel (26. November 2004)

Wie du die Knoten ansprichst, ist eigentlich egal, solange sie gefunden werden, und der zu löschende Knoten ein Kindknoten des angegebenen Elternknoten ist. 
Du kannst zur Identifizierung der Knoten auch Methoden verwenden, welche nichts mit dem Node-Objekt zu tun haben,
z.B.

```
<form>
    <input type="button"value="lösch mich"onclick="this.form.removeChild(this)">
</form>
```
der Button ist ein Kindknoten des Formulars.
Das Formular wird aus dem Button heraus per "this.form" angesprochen, der Button selbst per "this"...klickt man auf den Button,ist er weg.

Zurück zur Frage, das geht, indem du den Kindknoten in deinem Beispiel per "document.getElementById('kill_mich_12').firstChild"
 ansprichst.

Dies setzt aber vorraus, das der Elterknoten wie in deinem Fall nur einen einzigen Kindknoten besitzt(beachte dabei, dass schon ein Leerzeichen zwischen <div> und <table> einen Kindknoten darstellen würde, wie Quaese weiter oben schon erwähnt hatte).

Eine andere, etwas schlampige Methode(welche zudem weniger Browser interpretieren) wäre das Zuweisen einer leeren Zeichenkette an die innerHTML-Eigenschaft des Elterknotens:

```
document.getElementById('kill_mich_12').innerHTML='';
```

Bis dein Buch eintrifft kannst du ja mal bei SelfHTML:Nodes schmökern


----------



## südpol (26. November 2004)

Hi,

gestern abend ist mein Buch eingetroffen . Da ich jetzt 1 Woche Urlaub habe passt das genau. 

Ok, das mit dem nur einen Kinderknoten erklärt, warum es bis jetzt nicht so richtig funktioniert hat... innerhalb meines divs sind mehrere Tabellen etc. 

Ich werde daher auf die unsaubere Methode umsteigen müssen. Da das ganze jedoch "nur" im Intranet läuft und hier nur eine Browserversion eingesetzt wird dürfte das kein Problem sein   Ich dank dir für die vielen Tipps und die Umfangreiche Hilfe!

Gruß


----------



## alloisxp (25. Juli 2006)

Hallo!

Muss dann mal diesen alten Thread reaktivieren!
Ich hab mir jetzt auch son schickes Formular gebaut, nun habe ich viele Konstrukte ala

<input type="text" name="test2[]">

drin. Wie hier auch beschrieben.
An der Stelle frage ich mich wie kann ich denn par PHP auf "geclonte" Felder zugreifen die derart benannt sind, nachdem sie per post gesendet wurden?

Füllt Java diese "clone" mit irgendwas, oder heißen die dann alle test2[] wenn geclont und ich muss eine Nummer oder dergleichen direkt mit in die Clonfunktion bauen?


----------



## Sven Mintel (25. Juli 2006)

So benannte Felder sind in PHP in Array-Form verfügbar

```
print_r($_POST['test2'])
```
...gibt dir Aufschluss darüber, wie du sie ansprechen kannst.


----------



## gangsterchen (1. August 2006)

hi, vielleicht könnt ihr mir noch helfen, ich hab hier schon ein bisschen rumgespielt aber ich bekomms nicht so ganz hin, ich möchte auf knopdruck die felder erscheinen lassen, dann soll der knopf zum löschen button werden, und wenn man ihn drückt soll er die felder wieder löschen und wieder zum 1. knopf werden

hier mein ansatz:



```
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function clone_this(button, objid){
    // Tabelle innerhalb des DIVs mit ID "new_passage" clonen
    // Achtung: Es dürfen keine Zeichen zwischen dem DIV- und dem TABLE-Tag stehen!
    var clone_me = document.getElementById(objid).firstChild.cloneNode(true);

    // Im Parent-DIV vor dem Kindknoten "button" einhängen
    button.parentNode.insertBefore(clone_me, button);
    button.value="entfernen";
    button.onclick=new Function('f1','this.form.removeChild(this.parentNode)','document.getElementById(button).firstChild.cloneNode(true)');
}
</script>

</head>
<body>
<form>

<div style="visibility:hidden; display:none">
<div id="new_passage"><table name="cloneTable">
    <tr>
      <td>test</test>
      <td><input type="text" name="test[]"></input></td>
    </tr>
      <td>test2</test>
      <td><input type="text" name="test2[]"></input></td>
  </table>
</div>
</div>

<div id="button">
  <input value="mehr" onclick="javascript:clone_this(this, 'new_passage');" type="button"></input>
</div>

</form>
</body>
</html>
```


----------



## Starwing27 (27. August 2007)

mich würde folgendes intressieren ich habe es auch schon hingefummelt bekommen.

aber ich komme bei einen teil net weiter.

im prinzip alles von oben genommen.

```
<div id='eintrag'><table>
<tr>
 <td><input type=hidden name=pos[] value="1">1</td>
 <td><input type=text name=bez[] ></td>
 <td><input type=text name=kost[]></td>
</tr>
</table>
</div>
<div>
 <input value="mehr" onclick="javascript:clone_this(this, 'eintrag');" type="button"></input>
</div>
```

klappt wunder paar des clonen aber ich möchte da wo die 1 nu steht wenn ich clone button drück das er mir dieses erhöht.

wie kann ich des machen ?
oder was muss ich noch adden im javascript snipsel von diesem thread.

danke für jede hilfe.


----------



## Quaese (27. August 2007)

Hi,

du kannst alle *input*-Felder innerhalb des gecloneten Knotens durchlaufen und prüfen, ob es 
sich um ein Feld mit dem Namen *pos[]* handelt. Im Erfolgsfall erhöhst du den Wert und den 
zugehörigen Text. Zum Zählen definierst du eine globale Varialbe, die bei jedem Clonen erhöht 
wird.

```
var intZaehler = 1;
function clone_this(button, objid){
  // Tabelle innerhalb des DIVs mit ID "new_passage" clonen
  // Achtung: Es dürfen keine Zeichen zwischen dem DIV- und dem TABLE-Tag stehen!
  var clone_me = document.getElementById(objid).firstChild.cloneNode(true);

  for(var i=0; i<clone_me.getElementsByTagName("input").length; i++){
    if(clone_me.getElementsByTagName("input")[i].name == "pos[]"){
      clone_me.getElementsByTagName("input")[i].value = ++intZaehler;
      clone_me.getElementsByTagName("input")[i].nextSibling.nodeValue = intZaehler;
    }
  }

  // Im Parent-DIV vor dem Kindknoten "button" einhängen
  button.parentNode.insertBefore(clone_me, button);
}
```
Ciao
Quaese


----------



## dfederer (17. Oktober 2007)

Hallo Sven Mintel

Ich habe hier deinen Code für mein Formular übernommen. Jetzt habe ich aber noch eine Frage bezüglich der Übermittlung der Feldinhalte an den Empfänger.


ist bei deiner Variante noch ein Aray nötig, damit auch alle Felder korrekt übermittelt werden
wie müsste der Array sein damit alle korrekt übermittelt werden

Das Formular welches ich anhand Deines Codes gemacht habe ist für die Bestellung von Fotos gedacht (der Kunde soll die Möglichkeit haben wenn er zusätzlich andere Fotos bestellen will, dies via des vorhandenen Buttons "noch eins" zu tätigen).

Das Musterformular kannst Du hier sehen: http://rafb.net/p/zEisiX76.html


----------



## Sven Mintel (17. Oktober 2007)

Einen Array musst du nicht extra erzeugen, der ist schon da, da die Namen der Felder von [] gefolgt werden.(das ürigens auch, wenn nicht geclont wird)


----------



## dfederer (17. Oktober 2007)

Sven Mintel hat gesagt.:


> Einen Array musst du nicht extra erzeugen, der ist schon da, da die Namen der Felder von [] gefolgt werden.(das ürigens auch, wenn nicht geclont wird)



Aber wie muss ich denn das SENDEN script machen, damit es mir auch alle hinzugefügten Felder korrekt an den Empfänger sendet und dem Empfänger dann im E-Mail folgendes ausgibt:

Artikel-Anzahl   |   Artikel-Nr   |   Artikel-Grösse
--------------------------------------------------------------------
15           |            00456.jpg   |    11x15
20           |            00457.jpg    |   30x40

Kann es sein, dass ich im Senden-Script die Feldnamen jeweils so "$artikelanzahl[] - $artikelnr[] - $artikelgroesse[]" weitergeben muss das es dem Empfänger obenstehendes Ausgabebeispiel im E-Mail ausgibt?


----------



## Sven Mintel (17. Oktober 2007)

$artikelanzahl,$artikelgroesse und $artikelnr sind jeweils Arrays... durchlaufen musst du sie halt, wie man das so macht:


```
$str='';
if(isset($_POST['artikelnr']) && is_array($_POST['artikelnr']))
{
  foreach($_POST['artikelnr'] as $k=>$v)
    {
      $str.= "\n $_POST['artikelanzahl'][$k] \t $_POST['artikelnr'][$k] \t $_POST['artikelgroesse'][$k]";
    }
}
```


----------



## dfederer (17. Oktober 2007)

Das is eben das Problem Sven ich hab noch kein Senden-Script. Könntest Du ned eins machen Es kommen da aber dann noch ein paar andere Felder hin


----------



## Sven Mintel (17. Oktober 2007)

Nö, kann ich nicht 

http://de.selfhtml.org/html/formulare/formularbuttons.htm#herkoemmlich


----------



## dfederer (17. Oktober 2007)

Das hier ist mal das Formular:


```
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function clone_this(objButton)
{
if(objButton.parentNode)
    {
    tmpNode=objButton.parentNode.cloneNode(true);
    objButton.form.appendChild(tmpNode);
    for(j=0;j<objButton.form.lastChild.childNodes.length;++j)
        {
        if(objButton.form.lastChild.childNodes[j].type=='text')
            {
            objButton.form.lastChild.childNodes[j].value='';
            break;
            }
        }
    objButton.value="entfernen";
    objButton.onclick=new Function('f1','this.form.removeChild(this.parentNode)');
    }
}
//-->
</script>
<style type="text/css">
<!--
.Stil1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
-->
</style>
</head>
<body bgcolor="#CACACA">
<table width="300" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>
	
	<form name="form1" method="post" action="">
<div>
  <span class="Stil1">Name:</span><br>
    <input name="name" type="text" id="name">
    <br>
    <span class="Stil1">Vorname:</span><br>
  <input name="vorname" type="text" id="vorname">
  <br>
  <span class="Stil1">Strasse:</span><br>
  <input name="strasse" type="text" id="strasse">
  <br>
  <span class="Stil1">PLZ/Ort:</span><br>
  <input name="plz" type="text" id="plz" size="4">
  <input name="ort" type="text" id="ort" size="25">
  <br>
  <span class="Stil1">E-Mail Adresse:</span><br>
  <input name="email" type="text" id="email">
  <br>
  <span class="Stil1">Telefon tags&uuml;ber:</span><br>
  <input name="telefontag" type="text" id="telefontag">
  <br>
  <span class="Stil1">Telefon abends:</span><br>
  <input name="telefonabend" type="text" id="telefonabend">
  </div>
  </form>

<form name="form1" method="post" action="">
      <div> 
          <select name="anzahl[]" size="1" id="anzahl[]">
            <option value="1" selected>1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
          </select>
          <input name="fotonummer[]" type="text" id="fotonummer[]">
          <select name="groesse[]" size="1" id="groesse[]">
            <option value="11x15">11x15</option>
            <option value="13x18">13x18</option>
            <option value="20x30">20x30</option>
            <option value="30x40">30x40</option>
            <option value="40x60">40x60</option>
          </select>
          <br>
          <input name="button" type="button"onClick="clone_this(this)"value="noch eins">
  </div></form>
  
  <form>
  <input type="submit" name="Submit" value="Senden">
</form>
	
	</td>
  </tr>
</table>
	


</body>
</html>
```

Und das hier wäre das Sendenscript:


```
<?php
// Contact subject
$subject ="$subject";
// Details
$message="$detail";

// Mail of sender
$mail_from="$customer_mail";
// From
$header="from: $name <$mail_from>";

// Enter your email address
$to ='someone@somewhere.com';

$send_contact=mail($to,$subject,$message,$header);

// Check, if message sent to your email
// display message "We've recived your information"
if($send_contact){
echo "We've recived your contact information";
}
else {
echo "ERROR";
}
?>
```

WIE und vorallem WO muss ich jetzt was ändern damit alles korrekt versendet wird?


----------



## Sven Mintel (3. März 2008)

Auf Nachfrage eine Ergänzung:

Falls man nicht will, dass die zu klonenden Elemente am Ende des Formulars eingefügt werden, sondern lediglich im Anschluss an die geklonten Elemente, weil man bspw. am Ende des Formulars weitere Elemente benötigt, welche immer am Ende stehen, aber nicht geklont werden sollen, verschachtelt man das ganze ein wenig weiter und fügt den Clon ans Ende des zusätzlichen Elternknotens ein anstatt ans Ende des Formulars:


```
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function clone_this(objButton)
{
if(objButton.parentNode)
    {
    tmpNode=objButton.parentNode.cloneNode(true);
    target=objButton.parentNode.parentNode;
    target.appendChild(tmpNode);
    for(j=0;j<target.lastChild.childNodes.length;++j)
        {
        if(target.lastChild.childNodes[j].type=='text')
            {
            target.lastChild.childNodes[j].value='';
            break;
            }
        }
    objButton.value="entfernen";
    objButton.onclick=new Function('f1','this.parentNode.parentNode.removeChild(this.parentNode)');
    }
}
//-->
</script>
</head>
<body>
<form>
  <div>
    <div>
      <input type="text" name="textfeldname[]"><br>
      <input type="button" value="noch eins" onclick="clone_this(this)">
    </div>
  </div>
 <input type="submit">
</form>
</body>
</html>
```


----------



## Rayvez (15. April 2008)

Hallo,bin noch Anfänger von PHP & Nixwisser von JS,aber wie müsste das Script geändert werden damit ich 2Felder glecihzetig einfügen/löschen kann?


----------



## Sven Mintel (16. April 2008)

Moin,...

ausgehend von dem letzten von mir geposteten Code:
du findest dort ein <div> vor, in welchem sich die Formularelemente befinden:
	
	
	



```
<div>
      <input type="text" name="textfeldname[]"><br>
      <input type="button" value="noch eins" onclick="clone_this(this)">
    </div>
```
Alles, was sich innerhalb dieses <div>s befindet, wird geclont, wenn du also mehr Sachen clonen willst, schreibe sie einfach in das <div> hinein.


----------



## Rayvez (16. April 2008)

Ok,vielen Dank!Passt alles super.


----------



## Fotostudio-K (29. Juni 2008)

Hallo Sven,

ich habe mir alles durchgelesen und mein "formular" soweit erweitert das es, wie von dir angegbene funktion "noch eins" gut funktioniert. aber leider bekomme ich nach dem ich das formular abgesendet habe nicht alle daten, es werden nur die letzten informationen angezeigt.

kannst du mir eventuell helfen.

gruß frank


----------



## Maik (29. Juni 2008)

Hi Fotostudio-K, und herzlich Willkommen im Forum 

Dazu wäre es ganz hilfreich, wenn du hier deinen Quellcode zeigen würdest, denn wie er bei dir konkret lautet, können wir nicht hellsehen, und somit auch nicht nach der Ursache für den Fehler Ausschau halten.

Zudem möchte ich dich als neues Mitglied unserer Community darauf aufmerksam machen, dass in unserem Forum großer Wert auf die Einhaltung der gültigen deutschen Rechtschreibung gelegt wird, und dazu zählt u.a. auch die Groß- und Kleinschreibung.

Nachlesen kannst du dies in der Netiquette (Nr.15). 

mfg Maik


----------



## Fotostudio-K (29. Juni 2008)

Hallo Maik,

sorry, da ich nicht besonders gut im Umgang mit der Tastatur bin und mit zwei Finger arbeite ist es einfacher mit dem durchgehenden kleinschreiben. Ich werde aber bei meinen nächsten Beiträgen drauf achten.

Hier wäre mein Quellcode.


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>
Fotoabzüge
</title>
<style type="text/css">
<!--
body { background-color:#FFFFFF;  }
h1 { color:#000000; font-family:Arial,Helvetica,Geneva; font-size:14pt; }
p, li { color:#000000; font-family:Arial,Helvetica,Geneva; font-size:10pt; }
TD   { color:#000000; font-family:Arial,Helvetica,Geneva; font-size:10pt; }
td.my { background-color:#FFFFFF}
-->
</style>

<script type="text/javascript">
<!--
function chkFormular()
{
if(document.DAFORM.Vorname.value == "")  {
alert("Bitte geben Sie Ihren Vorname ein.");
document.DAFORM.Vorname.focus();
return false;
}

if(document.DAFORM.Name.value == "")  {
alert("Bitte geben Sie Ihren Name ein.");
document.DAFORM.Name.focus();
return false;
}

if(document.DAFORM.Strasse.value == "")  {
alert("Bitte geben Sie Ihre Straße ein.");
document.DAFORM.Strasse.focus();
return false;
}

if(document.DAFORM.Wohnort.value == "")  {
alert("Bitte geben Sie Ihren Wohnort ein.");
document.DAFORM.Wohnort.focus();
return false;
}

if(document.DAFORM.Tel.value == "")  {
alert("Bitte geben Sie Ihre Tel. Nr. ein.");
document.DAFORM.Tel.focus();
return false;
}

if(document.DAFORM.email.value == "")  {
alert("Bitte geben Sie Ihre E-Mail an.");
document.DAFORM.email.focus();
return false;
}

if(document.DAFORM.Wann.value == "")  {
alert("Wann wurden Sie fotografiert?");
document.DAFORM.Wann.focus();
return false;
}

if(document.DAFORM.Wo.value == "")  {
alert("Wo wurden Sie fotografiert?");
document.DAFORM.Wo.focus();
return false;
}

if(document.DAFORM.AGB.checked == false)
    {
alert("AGB");
     document.DAFORM.AGB.focus();
     return false;
    }

 return(true); }//--></script>


</head>
<body>
<form action="http://www.fotostudio-k.de/formular/formmail.php" method="POST" name="DAFORM" onSubmit="return chkFormular()" enctype="multipart/form-data">
  <input type="hidden" name="formid" value="3536296">
  <input type="hidden" name="settings" value="Y2Vicg==">
  <input type="hidden" name="redirect" value="http://www.fotostudio-k.de/close">
  <input type="hidden" name="subject" value="Bestellung Fotoabzüge">
  <input type="hidden" name="admin" value="info@fotostudio-k.de">
  <input type="hidden" name="admin1" value="">
  <input type="hidden" name="admin2" value="">
  <input type="hidden" name="typemail" value="html">
  <input type="hidden" name="crypt" value="0">
  <input type="hidden" name="einleittext" value="RHJ/ZTdwcnJ/ZWNyNz9lPjdsNFZ5ZXJzcjRqN2w0WXZ6cjRqOzR1ZTQ0dWU0YX5ye3J5N1N2eXw3cetlN15/ZXI3VXJkY3J7e2J5cDk3RH5yN3Jlf3Z7Y3J5N355N3zrZW1yN15/ZXI3RXJ0f3lieXA5NHVlNDR1ZTREfnI3fOF5eXJ5N355eXJlf3Z7dTclIzdEY2J5c3J5N3l2dH83Un55cHZ5cDdzcmU3VXJkY3J7e2J5cDdef2VyN1VyZGNye3tieXA3ZGN4eX5yZXJ5NjR1ZTRVfmNjcjd1cnliY21yeTdEfnI3c3Zx62U3enJ+eTcrdjd/ZXJxKjV/Y2NnLTg4YGBgOWBgYDlxeGN4ZGNic354Onw5c3I4ZGN4ZXl4NSlEY3hleX5yZXJ5ZHJlYX50cis4dik5NHVlNDR1ZTQ=">
  <!-- FIELDEMAIL -->
  <input type="hidden" name="ReturnToSender" value="-1">

      <table  width="925" align="center" border="0" cellpadding="3" 
  cellspacing="2">
        <tr>
          <td colspan="2" width="915"><h1>Fotoabzüge<br>
            </h1></td>
        </tr>
        <tr>
          <td colspan="2" width="915"><p><div align="left"></div>Bitte füllen sie das Formular mit Ihren Daten aus!
<div align="left"></div>Nachdem Ihre Bestellung bei mir eingegangen ist, erhalten Sie eine Rechnung per Mail mit Bankverbindung.
<div align="left"></div>Bitte überweisen Sie, die auf der Rechnung angegebene Summe auf das angegebene Konto.
 <br>
            </p></td>
        </tr>
        <tr>
<td colspan="2" align="left" height="40px" valign="bottom" width="915">Kunde:</td>
</tr>

<tr><td align="right"  valign="top" class="my" nowrap width="94">Anrede:</td>
<td class="my" width="813">
<select name="Anrede" size=""><option>Herr</option>
<option>Frau</option>
</select> </td></tr>

<tr><td align="right"  valign="top" class="my" nowrap width="94">Vorname:</td>
<td class="my" width="813">
<input type="text" name="Vorname" value="" size="25" maxlength="100"> </td></tr>

<tr><td align="right"  valign="top" class="my" nowrap width="94">Name:</td>
<td class="my" width="813">
<input type="text" name="Name" value="" size="25" maxlength="100"> </td></tr>

<tr><td align="right"  valign="top" class="my" nowrap width="94">Straße / Nr.:</td>
<td class="my" width="813">
<input type="text" name="Strasse" value="" size="25" maxlength="100"> </td></tr>

<tr><td align="right"  valign="top" class="my" nowrap width="94">PLZ / Wohnort:</td>
<td class="my" width="813">
<input type="text" name="Wohnort" value="" size="25" maxlength="100"> </td></tr>

<tr><td align="right"  valign="top" class="my" nowrap width="94">Tel.:</td>
<td class="my" width="813">
<input type="text" name="Tel" value="" size="25" maxlength="100"> </td></tr>

<tr><td align="right"  valign="top" class="my" nowrap width="94">E-Mail:</td>
<td class="my" width="813">
<input type="text" name="email" value="" size="25" maxlength="100"> </td></tr>

<tr><td align="right"  valign="top" class="my" nowrap width="94">Kunden-Nr.:</td>
<td class="my" width="813">
<input type="text" name="KundenNr" value="" size="10" maxlength="100"> falls vorhanden</td></tr>

<tr>
<td colspan="2" align="left" height="40px" valign="bottom" width="915">Wann und Wo wurden Sie fotografiert ?</td>
</tr>

<tr><td align="right"  valign="top" class="my" nowrap width="94">Wann:</td>
<td class="my" width="813">
<input type="text" name="Wann" value="" size="10" maxlength="100"> tt.mm.jjjj</td></tr>

<tr><td align="right"  valign="top" class="my" nowrap width="94">Wo:</td>
<td class="my" width="813">
<input type="text" name="Wo" value="" size="20" maxlength="100"> z.B. zu Hause, Hebammenpraxis  ...</td></tr>

<tr>
<td colspan="2" align="left" height="40px" valign="bottom" width="915">Ihre Bestellung:</td>
</tr>

<tr><td align="right"  valign="top" class="my" nowrap width="94">Foto:</td>
<td class="my" width="813">
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function clone_this(objButton)
{
if(objButton.parentNode)
    {
    tmpNode=objButton.parentNode.cloneNode(true);
    target=objButton.parentNode.parentNode;
    target.appendChild(tmpNode);
    for(j=0;j<target.lastChild.childNodes.length;++j)
        {
        if(target.lastChild.childNodes[j].type=='text')
            {
            target.lastChild.childNodes[j].value='';
            break;
            }
        }
    objButton.value="entfernen";
    objButton.onclick=new Function('f1','this.parentNode.parentNode.removeChild(this.parentNode)');
    }
}
//-->
</script>
</head>
<body>
  <div>
    <div>
      <input name="dateinr" type="text" id="dateinr" size="10">
      <select name="groesse" size="1" id="groesse">
      <option value="9x13cm">9x13cm</option>
      <option selected>10x15cm</option>
      <option value="13x18cm">13x18cm</option>
      <select name="art" size="1" id="art">
      <option selected>farbe</option>
      <option value="sw">sw</option>
      <option value="coloriert">coloriert</option>
      <select name="anzahl" size="1" id="anahl"> 
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      </select><br>
      <input type="button" value="noch eins" onclick="clone_this(this)">
    </div>
  </div>
 &nbsp;</body></html><tr>
<td colspan="2" align="left" height="40px" valign="bottom" width="915">wie möchten Sie bezahlen?</td>
</tr>

<tr><td align="right"  valign="top" class="my" nowrap width="94">Ich bezahle </td>
<td class="my" width="813">
<select name="Bezahlung" size="1"><option>per Vorkasse</option>
<option>per Nachnahme</option>
</select> </td></tr>

<tr>
<td colspan="2" align="left" height="40px" valign="bottom" width="915">Hiermit erkläre ich mich mit der AGB einverstanden.</td>
</tr>

<tr><td align="right"  valign="top" class="my" nowrap width="94">AGB:</td>
<td class="my" width="813">
<input type="Checkbox" name="AGB" value="Ja"> </td></tr>


        <tr>
  <td class="my" align="right" valign="middle" width="94"><p class="my">Spam-Schutz</p></td>
  <td class="my" valign="middle" width="813">
 <table width="100%"  border="0" cellspacing="0" cellpadding="00">
<tr valign="middle">
 <td width="20%"><input type="text" name="captcha_input" size="10" maxlength="5"></td>
 <td width="80%">&nbsp;<img src="http://www.fotostudio-k.de/formular/captcha_img.php?id=3536296" border="1" alt="captcha"></td>
</tr>
</table>
</td>
</tr>

        <tr>
          <td colspan="2" width="915"><p class="my"></a><div align="center">Fotostudio-K</div><div align="center">Am Mühlenbach 22 - 46569 Hünxe</div><div align="center">Tel.: (02064) 621941 - Fax: (02064) 621942</div><div align="center">E-Mail:<a href="mailto:">info@fotostudio-k.de</a></div><div align="center">Geschäftsführer: Frank Kemper</div><div align="center">Umsatzsteuer-Nr.:DE238231620</div><div align="center"><br>
            </p></td>
        </tr>
        <tr>
          <td colspan="2">
            <input type="submit" name="next" value="Absenden" >
            <input type="reset" name="next" value="Zurücksetzen" >
            <input type="button" name="print" value="Drucken" onClick="javascript:window.print()" class="button">

          </td>
        </tr>
      </table>
</body>
</html>
<objButton.form.lastChild.childNodes.length;++j)
        {
        if(objButton.form.lastChild.childNodes[j].type=='text')
            {
            objButton.form.lastChild.childNodes[j].value='';
            break;
            }
        }
```

Kannst Du damit etwas anfangen?

Gruß Frank


----------



## Maik (29. Juni 2008)

Schick mal deinen Quellcode durch den w3c-Validator, denn folgende Fehler fallen beim ersten Überfliegen des Markups schon mal auf:


Ein HTML-Dokument besitzt nur einen Dokumentkörper body, bzw. darin darf kein weiteres HTML-Grundgerüst includiert werden, sondern nur, was sich innerhalb dessen Dokumentkörpers (*<body> ... </body>*) befindet:



```
<td class="my" width="813">
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function clone_this(objButton)
{
if(objButton.parentNode)
    {
    tmpNode=objButton.parentNode.cloneNode(true);
    target=objButton.parentNode.parentNode;
    target.appendChild(tmpNode);
    for(j=0;j<target.lastChild.childNodes.length;++j)
        {
        if(target.lastChild.childNodes[j].type=='text')
            {
            target.lastChild.childNodes[j].value='';
            break;
            }
        }
    objButton.value="entfernen";
    objButton.onclick=new Function('f1','this.parentNode.parentNode.removeChild(this.parentNode)');
    }
}
//-->
</script>
</head>
<body>
  <div>
    <div>
      <input name="dateinr" type="text" id="dateinr" size="10">
      <select name="groesse" size="1" id="groesse">
      <option value="9x13cm">9x13cm</option>
      <option selected>10x15cm</option>
      <option value="13x18cm">13x18cm</option>
      <select name="art" size="1" id="art">
      <option selected>farbe</option>
      <option value="sw">sw</option>
      <option value="coloriert">coloriert</option>
      <select name="anzahl" size="1" id="anahl"> 
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      </select><br>
      <input type="button" value="noch eins" onclick="clone_this(this)">
    </div>
  </div>
 &nbsp;</body></html><!-- Hier fehlt das schliessende </td>-Tag der Klasse "my" --><tr>
```

Die rotmarkierten Zeilen haben somit an diesen Stellen des HTML-Quelltextes nichts zu suchen, und der relevante Script-Code wandert, wie von Sven in seinem Beispiel demonstriert, in den Header des Hauptdokuments.



Dem Formular fehlt das schliessende *</form>*-Tag.


Und was hat es mit diesem Codeschnipsel am Dokumentende auf sich?


```
<objButton.form.lastChild.childNodes.length;++j)
        {
        if(objButton.form.lastChild.childNodes[j].type=='text')
            {
            objButton.form.lastChild.childNodes[j].value='';
            break;
            }
        }
```


mfg Maik


----------



## eulisan (16. September 2008)

Hallo,

ich habe folgendes Problem, soweit habe ich auch das kleine clone-Projekt eingebunden, allerdings besteht eigentlich mein vollständiges Layout aus <div> Containern, jetzt habe ich das Problem das sich mein <div> mit den Formulardaten NICHT innerhalb des <div>'s klont in welchem es stehen sollte.

Bsp:.
<div name='LAYOUT'> <div name='FORMULARDATEN'> </div> </div>

Zwar funktioniert die Funktion ansich einwandfrei allerdings hängt er alle neuen "Klone" immer ans ENDE der Seite, d.h. erst nach dem letzten <div> meines Layout's.

Hat jemand vielleicht eine Idee wie ich dem Klon <div> einen eindeutigen Namen zuweise kann oder ähnliches? (Bin leider nicht so JavaScript fähig).

Danke, euli

EDIT: Mittlerweile hab ich aufgegeben und es unschön per iframe gelöst, gefällt mir zwar absolut nicht, aber ich weiß keine andere Lösung, das blöde daran ist
erstens "iframe", benutze ich sowieso ungern und zweitens gibt es auch noch Forumlardaten die nicht innerhalb des iframe's liegen d.h. brauch ich jetzt 2x SUBMIT.

Desweiteren ist mir aufgefallen bzw. ist es bei mir so das der geklonte Eintrag komischerweise bei mir IMMER am Ende der Seite angezigt wird, auch nicht toll, somit muss ich den SUBMIT Button ÜBER das Formular setzten statt wie es "normal"-User eigentlich gewohnt sind unter das Formular.


----------



## Sven Mintel (17. September 2008)

Moin,

folgender Aufbau:

```
<div name='LAYOUT'> 
  <form>
    <div name='FORMULARDATEN' > 
        <div>
          <input type="text" name="textfeldname[]"><br>
          <input type="button" value="noch eins" onclick="clone_this(this)">
        </div>
    </div>
    <input type="submit">
  </form>
</div>
```

Zusammen mit dieser  Version des Skriptes würde den Clone ans Ende des <div>s namens "FORMULARDATEN" stellen.


----------



## mrbullisch (10. Dezember 2008)

Hallo,

das Script funktioniert soweit ganz gut, nur habe ich noch das Problem, dass wenn ich in diesem div-Tag noch ein input-Feld hinzufüge, welches dann geklont wird, dann wird
der Inhalt des zweiten Felds nicht gelöscht.

Habt ihr hierzu vielleicht noch eine Lösung ?

Gruß
Bulli


----------



## Quaese (11. Dezember 2008)

Hi,

das Script muss dahingehend angepasst werden, dass es alle *input*-Elemente des duplizierten Knotens durchläuft. Trifft es auf ein Textfeld, wird sein Inhalt entfernt.

Beispiel:

```
function clone_this(objButton){
  if(objButton.parentNode){
    tmpNode=objButton.parentNode.cloneNode(true);
    target=objButton.parentNode.parentNode;
    arrInput = tmpNode.getElementsByTagName("input");

    for(var i=0; i<arrInput.length; i++){
      if(arrInput[i].type=='text'){
      	arrInput[i].value='';
      }
    }

    target.appendChild(tmpNode);
    objButton.value="entfernen";
    objButton.onclick=new Function('f1','this.parentNode.parentNode.removeChild(this.parentNode)');
  }
}
```
Vielleicht hift dir das weiter.

Ciao
Quaese


----------



## janssend (21. Dezember 2008)

Hallo,

ich habe das Beispiel aus Beitrag 31  implementiert. Das hinzufügen usw. klappt problemlos. Allerdings überträgt Firefox 3 nicht das gesamte Array, sondern immer nur das erste Element (das Eingabefeld was beim Laden der Seite vorhanden war). Hab die Ausgabe der übertragenen Formulardaten mit <?php print_r($_POST) ?> gemacht. IE zeigt alle Eingaben korrekt an - der Firefox nur das erste Element. Kennt jemand eine Lösung?

Gruß,
janssend


----------



## Sven Mintel (21. Dezember 2008)

Moin,



janssend hat gesagt.:


> Allerdings überträgt Firefox 3 nicht das gesamte Array, sondern immer nur das erste Element (das Eingabefeld was beim Laden der Seite vorhanden war). Hab die Ausgabe der übertragenen Formulardaten mit <?php print_r($_POST) ?> gemacht. IE zeigt alle Eingaben korrekt an - der Firefox nur das erste Element.



Ich habe das  soeben probiert, bei mir werden in FF3 alle Felder übermittelt. Das Problem muss in deinem Code liegen und ist ohne dessen Kenntnis nicht zu lösen.


----------



## EnzoGo (9. Juni 2009)

Mal wieder hoch holen

Also erstmal ein Lob für das Script.

Ich konnte damit mein Problem fast lösen ... jetzt habe ich eine Frage zu den Arrays. 
Hier mal eine gekürzte Form meinem Scriptes.


```
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Leistungserfassung</title>
<link rel="stylesheet" type="text/css" href="formstyle.css">
<script type="text/javascript">
<!--
function clone_this(objButton)
{
if(objButton.parentNode)
    {
    tmpNode=objButton.parentNode.cloneNode(true);
    target=objButton.parentNode.parentNode;
    target.appendChild(tmpNode);
    for(j=0;j<target.lastChild.childNodes.length;++j)
        {
        if(target.lastChild.childNodes[j].type=='text')
            {
            target.lastChild.childNodes[j].value='';
            break;
            }
        }
    objButton.value="-";
    objButton.onclick=new Function('f1','this.parentNode.parentNode.removeChild(this.parentNode)');
    }
}

</script>
</head>

<body>
<form action="datenbank.php"  method="post">


  <div>
    <div>

     <table width="850" align="center" border="0"  class="table">
     <tr>
       <td>
       <select size="1" size="20" name="lohnart[]">
       <option value=
                <?php
                echo "<select size='1' name='lohnart'>";
                $ergebnis = mysql_query("SELECT lohnart  FROM inhalt_lohnart");
                while ($datensatz = mysql_fetch_array($ergebnis))
                    {
                        echo "<option value=\"" . $datensatz['lohnart'] . "\">";
                        echo $datensatz['lohnart'];
                        echo "</option>\n";
                    }
                echo "</select>\n";
                ?>

                </select>
                </td>
                <td>
             <input type="text" class="inputFieldident" name="qm_meldung[]" value="">
             </td>
             <td>

           <textarea class="inputFieldleistung" name="bemerkung[]" rows="2"             
             value="<?  PHP echo $_POST['bemerkung']; ?>">
            </textarea>
            </td>

            </tr>
            <tr>
             <td> align="center" colspan="40"><hr></td>
             </tr>
             </table>

             <input align="right" type="button" class="button" align="right" value="+"  onclick="clone_this(this)">
    </div>

  </div>

  <table width="850"  border="0"  class="table">
  <tr> <td width="850" align="right">
  <input name="submit" type="submit" value="Weiter" class="button" </td></tr></table>


</form>



</body>
</html>
```

Nun zu meiner Frage

Wie bekomme ich die Variablen (lohnart[] usw.) richtig an datenbank.php übertragen und kann sie dort sichtbar machen. Stelle mich da wohl nicht so clever an.

Vielen Dank für evtl. Hilfe 
EnzoGo


----------



## Sven Mintel (9. Juni 2009)

Moin,

der Weg über den Namen der Formularfelder mit der eckigen Klammer ist schon der richtige, du hast dort allerdings etwas doppeltgemoppelt
	
	
	



```
<select size="1" size="20" name="lohnart[]">
       <option value=
                <?php
                echo "<select size='1' name='lohnart'>";
                $ergebnis = mysql_query("SELECT lohnart  FROM inhalt_lohnart");
                while ($datensatz = mysql_fetch_array($ergebnis))
                    {
                        echo "<option value=\"" . $datensatz['lohnart'] . "\">";
                        echo $datensatz['lohnart'];
                        echo "</option>\n";
                    }
                echo "</select>\n";
                ?>

                </select>
```

Du erstellst dort ein <select> als value-Attribut einer <option>

Besser ginge es so:
	
	
	



```
<select size="1" size="20" name="lohnart[]">
  <?php
    $ergebnis = mysql_query("SELECT lohnart  FROM inhalt_lohnart");
    while ($datensatz = mysql_fetch_array($ergebnis))
    {
      echo '<option value="' . $datensatz['lohnart'] . '">'.
           $datensatz['lohnart'].'</option>';
    }
  ?>
</select>
```

Dann hast du da noch diverse HTML-und PHP-Fehler, bspw.

```
<td width="850" align="right">
  <input name="submit" type="submit" value="Weiter" class="button" </td>
```


```
<td> align="center" colspan="40">
```


```
<?  PHP echo $_POST['bemerkung']; ?>
```


Wenn du das alles korrigiert hast, werden die Formulardaten korekt übertragen.
Wie man sie ausgeben kann, hängt davon aus, wie du sie ausgeben willst, eine einfache Variante, um in der datenbank.php zu Prüfen, was überhaupt ankommt, wäre:

```
<?php
  echo '<pre>'.print_r($_POST,true).'</pre>';
?>
```


----------



## EnzoGo (9. Juni 2009)

Super .. ich danke dir
Das mit dem doppeltgemoppelt lag am kopieren. Habe das vorhergehende Eingabeformular kopiert, welches mit der Abfrage arbeitet ob alle Felder ausgefüllt sind und bei unvollständiger Eingabe die bereits getätigten EIngaben wieder einträgt ... daher.

Mitlerweile kommt das komplette Array in der datenbank.php an .. super danke
Habe nur noch bei den Auswahllisten ein leeres Value hinzugefügt.

Jetzt kann ich weiter machen 

mfg EnzoGo


----------



## EnzoGo (18. Juni 2009)

Vielleicht kann mir noch jemand einen Stoss geben.

Hier ist ja nun schon alles ziemlich beschrieben

Ich möchte jetzt mein array z.B. lohnart[ ] an eine Session übergeben?
Möchte die Arrays auf zwei Seiten zur Verfügung stellen, daher bietet sich hier Session an.
Wie mache ich das? Wenn die werte klar sind, welche im Array stehen, bekomme ich das ja hin ... aber durch die unbekannte Anzahl bin ich echt überfordert. 
Ich habe schon den ganzen Tag im Netz gesucht, habe aber nicht raus finden können wie ich so eine Session zusammen bauen muss

Vielleicht kann mir ja hier jemand helfen

mfg Enzo


----------



## kuddeldaddeldu (18. Juni 2009)

Hi,

Du kannst einfach das Array in die Session schreiben. Dabei brauchst Du Dich doch nicht darum zu kümmern, wie viele Elemente das hat.


```
$_SESSION['lohnart'] = $lohnart;
```

LG


----------



## EnzoGo (18. Juni 2009)

Und die Ausgabe müsste ja dann einfach mit 

```
<?PHP echo $_SESSION['mitarbeiterservice'];  ?>
```
erfolgen?

Klappt nämlich nicht 

mfg Enzo

Hier mal meine Quellcode


```
<form action="<?PHP echo $script; ?>"  method="post" name="leistungserfassung" target="_blank" onsubmit="return chkFormular()">
<html>
<head><title>bla</title>
</head>

<body class="body">
     <table width="90%" align="center" border="0"  class="table" cellpadding="1" cellspacing="1"><tr>
           <td class="abschnitt"> Service</td>
           </tr>
           <tr>
           <td width="20%">Mitarbeiter:</td>
           <td width="5%">Zeit:</td>
           <td width="11%">Identnummer:</td>
           <td width="7%">AVO:</td>
           <td width="5%">Stk.:</td>
           <td width="21%">Lohnart:</td>
           <td width="9%">QM-Meldung: </td>
           <td width="25%">Bemerkung</td>
           </tr>
           </table>
           <table width="90%" align="center" border="0"  class="table" cellpadding="1" cellspacing="1"><tr>
                <select class="inputFieldname" name="mitarbeiterservice[]"   >
	            <option>
                <?php
                $ergebnis = mysql_query("SELECT * FROM personal WHERE schichtart ='$schichttyp'");
                while ($datensatz = mysql_fetch_array($ergebnis))
                    {
                        echo '<option value="' . $datensatz['name'] . '">'.
                        $datensatz['name'].'</option>';
                    }
                ?>
                </option>
                </select>
<input  name="submit" type="submit" value="Weiter" class="button" ></form>

</body>
</html>
```


```
<?php

$_SESSION['mitarbeiterservice'] = $mitarbeiterservice;

echo "<a href=Datenbank.php>Ausgabe</a>";
?>
```

Die Datenbank.php

```
<?PHP

echo $_SESSION['mitarbeiterservice'];?

>
```

Vielleicht fällt es einem ja auf 

mfg Enzo


----------



## kuddeldaddeldu (18. Juni 2009)

Hi,



EnzoGo hat gesagt.:


> Und die Ausgabe müsste ja dann einfach mit
> 
> ```
> <?PHP echo $_SESSION['mitarbeiterservice'];  ?>
> ...



nein, denn $_SESSION['mitarbeiterservice'] ist doch ein Array. Und ein ganzes Array kann man nicht einfach mit echo ausgeben. Du müsstest das schon mit [phpf]foreach[/phpf] durchlaufen, um an die einzelnen Elemente zu kommen.

LG


----------



## EnzoGo (18. Juni 2009)

Danke schonmal für die Hilfe
Bin Änfänger und beschäftige mich nun seit 6 Wochen mit SQL, PHP und JavaScript.
Mache es halt learning by doing. 

Wie muss ich das schreiben`?

```
$var=$_SESSION['mitarbeiterservice'];
$var=$mitarbeiterservice;

foreach ( $var as $value )
{
  echo 'Wert: ' . $value . '<br>' . "\n";
}
```

Wie ist es richtig? Sorry

Und wo wir gerade dabei sind ... wie schreibe ich dann die einzelnen Werte in eine SQL Datenbank?
mfg Enzo


----------



## kuddeldaddeldu (18. Juni 2009)

Hi,

warum füllst Du erst $var mit diesem Array aus der Session und überschreibst das dann gleich wieder mit der Variablen $mitarbeiterservice, die vermutlich gar nicht definiert ist? Wozu brauchst Du überhaupt die zusätzliche Variable?


```
foreach ($_SESSION['mitarbeiterservice'] as $value) {
  echo 'Wert: ' . $value . '<br>' . "\n";
}
```




			
				EnzoGo hat gesagt.:
			
		

> Bin Änfänger und beschäftige mich nun seit 6 Wochen mit SQL, PHP und JavaScript.
> Mache es halt learning by doing.



Dann schau Dir doch mal das Quakenet-Tutorial an. Das ist sehr ausführlich, für Anfänger gut geeignet und beinhaltet auch einen Teil über MySQL.

LG


----------



## EnzoGo (18. Juni 2009)

kuddeldaddeldu hat gesagt.:


> Hi,
> 
> warum füllst Du erst $var mit diesem Array aus der Session und überschreibst das dann gleich wieder mit der Variablen $mitarbeiterservice, die vermutlich gar nicht definiert ist? Wozu brauchst Du überhaupt die zusätzliche Variable?



Es war als entweder oder von mir gemeint
Also entweder $var=$_SESSION['mitarbeiterservice'] oder $var=$mitarbeiterservice
... von daher wohl ein Missverständis.

Bekommt mit deinem Post trotzdem nen Fehler 



> Warning: Invalid argument supplied for foreach() in


mfg Enzo


----------



## kuddeldaddeldu (18. Juni 2009)

Hi,

Du weisst aber, dass Du die Session auf _jeder_ Seite starten musst, um darauf zugreifen zu können?

Was ergibt var_dump($_SESSION)?

LG


----------



## EnzoGo (18. Juni 2009)

Ich muss dazu sagen, dass ich schon vorher 1 Session geöffnet habe und dort Werte eintrage. Liegt es evtl daran?

Daher habe ich auch auf ein wiederholtes Session_Start () verzichtet.

Fehler bringt er mir nun diese hier
Notice: A session had already been started - ignoring session_start() 

Warning: Invalid argument supplied for foreach() 

Der var_dump($_SESSION) liefert mir neben den anderen Session-Werten die ich vorher angebe noch diesen Wert: 
array(16) { ["mitarbeiterservice"]=> NULL 

Obwohl ich einen Wert in dem Array mitarbeiterservice eingetragen habe.

Ich glaube das ist alles ziemlich verzwickt hier 

mfg Enzo


----------



## kuddeldaddeldu (18. Juni 2009)

EnzoGo hat gesagt.:


> Ich muss dazu sagen, dass ich schon vorher 1 Session geöffnet habe und dort Werte eintrage. Liegt es evtl daran?
> 
> Daher habe ich auch auf ein wiederholtes Session_Start () verzichtet.
> 
> ...



Du kannst natürlich nur eine Session pro Scriptinstanz starten.



EnzoGo hat gesagt.:


> Der var_dump($_SESSION) liefert mir neben den anderen Session-Werten die ich vorher angebe noch diesen Wert:
> array(16) { ["mitarbeiterservice"]=> NULL
> 
> Obwohl ich einen Wert in dem Array mitarbeiterservice eingetragen habe.



Das müsstest Du erstmal zeigen. 


```
$_SESSION['mitarbeiterservice'] = $mitarbeiterservice;
```

Was steht an der Stelle denn in $mitarbeiterservice? Wo kommt diese Variable her? Du verlässt Dich hier aber nicht auf register_globals?

Ich glaube, Du solltest wirklich erstmal das Quakenet-Tutorial machen.

LG


----------



## EnzoGo (19. Juni 2009)

Danke kuddeldaddeldu,

es lag an was ganz anderen 
Ich habe ein bedingtes Absenden in dem Formular, welches die Session erst öffnet, wenn gewisse Bedingungen erfüllt wurden sind. Daher ist die Session nicht angekommen. Die Ausgabe des Arrays habe ich allerding vorher nicht gekannt ... wieder etwas gelernt. Das Quake ist recht gut, hätte mir aber auch nicht weiter helfen können. Jetzt bin ich richtig glücklich und kann nun weiter machen .... man lernt dazu

Danke dir .... das nächste Problem wird sicherlich schon auf mich warten

mfg Enzo


----------



## EnzoGo (26. Juni 2009)

Jetzt hänge ich schon wieder 

Die Anforderungen werden immer komplexer .... ich erstelle jetzt schon einen clone in einen clone .... das klappt auch wunderbar.
Nur wie muss ich jetzt in meinem Formular meine Formularfelder bennenen, da die jetzt zum dreidimensionalen Array werden.

Kann mir da villeicht jemand helfen .... stehe da mal wieder auf dem Schlauch


mfg Enzo


----------



## Sven Mintel (28. Juni 2009)

Moin,

das wäre leichter zu Sagen, wenn man wüsste, in welcher Form du die Daten später benötigst(eine Beschreibung des Ergebnisarrays in PHP sollte da ausreichen)


----------



## EnzoGo (29. Juni 2009)

Hmmm ..... echt schwer zu beschreiben. Ich versuche es mal

Ich habe ein Formular. In diesem Formular hab ich eine EIngabegruppe, welche ich über die clone Funktion vervielfältige. In dieser EIngabegruppe habe ich dann dann Daten die ich einmalig eingebe und dann aber auch Daten, welche ich dynamisch eingebe. Daher habe ich dort auch wieder eine clone-Funktion eingebaut. Also ein clone in einem clone. Ich brauche dann bei der Ausgabe jeden einzelnen Wert. Wenn ich jetzt aber z.b. Name [ ][ ] eingebe zählt er ja nur soweit, wie ich geclont habe. Ich kann also bei der Ausgabe mit beispielweise Name [0][3] kein eindeutiges Ergebniss erhalten.

Ich kann nun wohl nur mit einem clone arbeiten .... weile doppelte dynamik wohl nicht funktioniert.

Also Name [eins] [ ] z.B.

mfg Enzo


----------



## Sven Mintel (29. Juni 2009)

> Also Name [eins] [ ] z.B.



Da müsstest du beim Clonen eines "Paketes" im Clone bei allen Formularelementen das "Eins" im Namen ändern, bspw. in *Zwei*....das Clonen im Clone sollte dann funktionieren.


----------



## EnzoGo (29. Juni 2009)

Hmm ziemlich komplex ... habe jetzt eine andere Möglichkeit gefunden.
Danke trotzdem

mfg Enzo


----------



## form (11. August 2009)

Hallo zusammen!

Habe das Script mit Begeisterung gefunden und bei meinem Formular eingebaut. Nun habe ich das Problem das ich ein zweites Javascript zur dynamischen Ausgabe von weiteren Options-Feldern drin habe, welches sich nicht mit einem einfachen Clonen verträgt.

Ich werde wohl die Felder anders benennen müssen (durchnummerieren?). Hat da jemand ne Idee?

THX


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<script type="text/javascript">

<!--

function hideSelect(obj) {

  var j;

  if ( obj.options[obj.selectedIndex].value!=0

    && document.getElementById(obj.options[obj.selectedIndex].value)

    ) {

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

      if(obj.options[i].value!=0){

        j=document.getElementById(obj.options[i].value);

        if (i == obj.selectedIndex) {

          j.style.display = 'inline';

        } else {

          if(j)

            j.style.display = 'none';

        }

      }

    }

  }

}

//-->

<!--
function clone_this(objButton)
{
if(objButton.parentNode)
    {
    tmpNode=objButton.parentNode.cloneNode(true);
    objButton.form.appendChild(tmpNode);
    for(j=0;j<objButton.form.lastChild.childNodes.length;++j)
        {
        if(objButton.form.lastChild.childNodes[j].type=='text')
            {
            objButton.form.lastChild.childNodes[j].value='';
            break;
            }
        }
    objButton.value="entfernen";
    objButton.onclick=new Function('f1','this.form.removeChild(this.parentNode)');
    }
}
//-->


</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%; 
}

#framecontent{
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 130px; /*Height of frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: #FB6A00;
color: white;
}


#maincontent{
position: fixed; 
top: 130px; /*Set top value to HeightOfFrameDiv*/
left: 0;
right: 0;
bottom: 0;
overflow: auto; 
background: #fff;
}

.innertubehead{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
font-family: Verdana, Geneva, sans-serif;
}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
font-family: Verdana, Geneva, sans-serif;
font-size:12px;
}

* html body{ /*IE6 hack*/
padding: 130px 0 0 0; /*Set value to (HeightOfFrameDiv 0 0 0)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%; 
width: 100%; 
}

</style>

</head>

<body>

<div id="framecontent">
<div class="innertubehead">

<h1>TEST</h1>
</div>
</div>


<div id="maincontent">
<div class="innertube">
<form name="test" action="#" method="post">
<div>
<table width="90%" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="LightGrey">
<td>Testdaten</td>
<td>&nbsp;</td>
</tr>
  <tr>
    <td>Versicherung</td>
    <td>

  <select onchange="hideSelect(this);">

    <option value="">Bitte wählen...</option>

    <option value="gruppe1[]">G1</option>

    <option value="gruppe2[]">G2</option>

    <option value="gruppe3[]">G3</option>

  </select>

  <select id="gruppe1[]" name="gruppe1[]" style="display:none;" onchange="hideSelect(this);">

    <option value="test">test1g1</option>

    <option value="test2">test2g1</option>

    <option value="test3">test3g1</option>

  </select>

  <select id="gruppe2[]" name="gruppe2[]" style="display:none;" onchange="hideSelect(this);">

    <option value="test">test1g2</option>

    <option value="test2">test2g2</option>

    <option value="test3">test3g2</option>

  </select>

  <select id="gruppe3[]" name="gruppe3[]" style="display:none;" onchange="hideSelect(this);">

    <option value="test">test1g3</option>

    <option value="test2">test2g3</option>

    <option value="test3">test3g3</option>
  </select>
</td>
  </tr>
  <tr>
  <td>Blub</td>
  <td><select id="blub" name="blub[]">
  <option value="vid1">blub 1</option>
  <option value="vid2">blub 2</option>
  <option value="vid3">blub 3</option>
  <option value="vid4">blub 4</option>
</select>
</td>
</tr>
<tr>
<td>Kundennummer</td>
<td><input type="text" name="blubnummer[]" size="20"></td>
</tr>
<tr>
<td>
</td>
<td>&nbsp;</td>
</tr></div></div>
</table>
<input type="button" value="weiteren angeben" onclick="clone_this(this)">
</div>
</div>
</div>
da
</body>
</html>
```


----------



## kuddeldaddeldu (11. August 2009)

Hi,



form hat gesagt.:


> Nun habe ich das Problem das ich ein zweites Javascript zur dynamischen Ausgabe von weiteren Options-Feldern drin habe, welches sich nicht mit einem einfachen Clonen verträgt.



mit Deiner anderen Javascriptfunktion hat das nichts zu tun.



form hat gesagt.:


> Ich werde wohl die Felder anders benennen müssen (durchnummerieren?). Hat da jemand ne Idee?



Mit der Benennung der Felder hat das auch nichts zu tun. Die Clone-Funktion schert sich doch gar nicht um irgendwelche Namen oder IDs. Es wird der Elternknoten des Buttons geklont. Und das ist bei Deinem HTML halt das Div in dem die komplette Tabelle liegt. Lies Dir Svens Erläuterungen mal genau durch und ändere entweder Deine HTML-Struktur grundlegend oder pass die Funktion an, oder beides.

LG


----------



## form (11. August 2009)

Nach dem Clonen habe ich doch Werte für die Option-Felder übernommen?! Diese sollten aber im neuen Teil "jungfräulich" sein. Das ist doch kein Problem des HTML-Source?

Hab jetzt versucht im Script das folgende einzubauen:


```
if(objButton.form.lastChild.childNodes[j].type=='select')
            {
            objButton.form.lastChild.childNodes[j].value='';
            break;
            }
```

Brachte aber auch keine Besserung ;(


----------



## kuddeldaddeldu (11. August 2009)

Hi,



form hat gesagt.:


> Diese sollten aber im neuen Teil "jungfräulich" sein.



sag das doch gleich. Ich hatte das so verstanden, dass Du nur das Textfeld klonen willst...
Die Funktion musst Du aber auch für das Leeren des Textfeldes anpassen, da das Div nicht mehr als Kindknoten die Formularelemente enthält, wie in Svens Beispiel, sondern eine Tabelle. Den Zugriff könntest Du z.B. mit getElementsByTagName realisieren.

Für Deine Auswahllisten reicht es natürlich nicht, einen value zu setzen. Du müsstest die Options durchlaufen und das selected-Attribut auf false setzen und die Listen, die nicht sichtbar sein sollen, wieder ausblenden.

Dann musst Du Dir noch überlegen, wie Du das mit den IDs dann machen willst. Eine ID muss nämlich dokumenentweit eindeutig sein. Und da Deine hideSelect-Funktion den Zugriff ja über IDs steuert, wird das sonst wohl auch zu unerwarteten Ergebnissen führen.

LG


----------



## form (11. August 2009)

Ja, genau an dem Punkt bin ich jetzt. Da weiß auch keiner einen wirklichen Fix?! 
Bin nicht der Javascript-Crack ;(


----------



## kuddeldaddeldu (11. August 2009)

Hi,



form hat gesagt.:


> Ja, genau an dem Punkt bin ich jetzt.



an welchem der Punkte?



form hat gesagt.:


> Bin nicht der Javascript-Crack ;(



Grundkenntnisse sollten aber schon vorhanden sein. Einen maßgeschneiderten, fertigen Code für Deine individuellen Bedürfnisse werde ich Dir hier nicht liefern.
Fang also einfach mal mit dem Textfeld an und versuche, das zu leeren. Und dann überlegst Du Dir eine sinnvolle Vergabe für die IDs. vorher brauchst Du mit dem Rest gar nicht anfangen, denn die Option-Values musst Du dann beim Klonen ja auch noch alle anpassen.

LG


----------



## BQM (12. Dezember 2009)

Hallo ich bin neu hier und als erstes will ich mich gleich bedanken für die tolle Forenarbeit, die Ihr hier leistet, wirklich spitze. Begeistert bin ich auch von diesem tollen Script, hätte allerdings noch eine Frage dazu und hoffe, dass Ihr mir vielleicht weiterhelfen könnt.
Ich habe das Script in ein User-spezifisches Formular eingebaut, was auch soweit wunderbar funktioniert. Wird nun also das Formular zum ersten Mal aufgerufen und  mit Daten befüllt, lässt sich die Tabelle beliebig oft klonen, so wie gewünscht. Die Daten der Variablen "description" werden dann als string in der DB gespeichert, so weit, so gut.
Ruft nun der User das Formular erneut auf, werden die vorhanden Datensätze ausgelesen und in den jeweiligen Textfeldern wieder dargestellt. 
Beispiel:  Wurde die Tabelle 4 x geklont, enthält der "description-string" 4 Variablen , beim erneuten Aufruf des Formulars werden dann 4 Tabellen mit dem jeweiligen Inhalt dargestellt.

So nun endlich zum eigentlichen Problem:

Wird nun eine neue Tabelle angelegt (also geklont), wird der (erste) Inhalt der "description-Variablen" mit geklont. Es steht also der Text der ersten Tabelle in dem Textfeld der neuen Tabelle. Ist ja auch logisch, denn schließlich wird ja geklont.

Wie bekommt man es nun aber hin, dass eine neue Tabelle ohne den Inhalt der ersten geklont wird?


```
<script type="text/javascript">
<!--
function clone_this(button, objid){
    // Tabelle innerhalb des DIVs mit ID "new_passage" clonen
    // Achtung: Es dürfen keine Zeichen zwischen dem DIV- und dem TABLE-Tag stehen!
    var clone_me = document.getElementById(objid).firstChild.cloneNode(true);

    // Im Parent-DIV vor dem Kindknoten "button" einhängen
    button.parentNode.insertBefore(clone_me, button);
}

function remove_this(objLink)
{
objLink.parentNode.parentNode.parentNode.parentNode.parentNode.removeChild(objLink.parentNode.parentNode.parentNode.parentNode);
}
//-->
</script>
```



```
$description = explode(",",$description);


for($i = 0; $i < count($description); $i++)
{

$form .= "<div id='new_table'><table width='100%' border='0' cellspacing='0' cellpadding='0'>
         <tr>
           <td>";
	if($i > 0)  {
$form .= "<a href='#' onclick='javascript:remove_this(this); return false;'>LÖSCHEN</a>";
       }  
	  
$form .= "</td>   
        </tr>
     <td><textarea name='description[]' rows='5'>".$description[$i]."</textarea></td>
       </tr>
       </table></div>";
}  

$form .= "<div>
           <input value='mehr' onclick='javascript:clone_this(this, \"new_table\");' type='button'></input> 
		    </div>";
```

Ich hoffe, ich hab's nicht zu ausführlich erklärt und Ihr könnt mir weiterhelfen.

Vielen Dank schon mal im Voraus.

Viele Grüße Andi


----------



## Sven Mintel (12. Dezember 2009)

Moin Andy,

du müsstest den *value * des betreffenden Elementes "per Hand" löschen.

Im Falle des Textarea's sollte es mit
	
	
	



```
clone_me.getElementsByTagName('TEXTAREA')[0].value='';
```
gehen.


----------



## BQM (12. Dezember 2009)

Hallo Sven,
vielen Dank für Deine schnelle Hilfe, funktioniert super! Danke! 

Jetzt hat sich allerdings noch eine klitzekleine Frage aufgetan und zwar – ist es möglich, hier noch einen Counter einzubauen, der die Anzahl der Klon-Tabellen begrenzt? Ich stelle mir das so vor, dass nach Erreichen der z.B. zehnten Klon-Tabelle anstelle des "mehr"-Buttons der Hinweis eigeblendet wird, dass die max. Anzahl der Tabellen bzw. Artikel erreicht ist. Es müssten hier halt auch die bereits vorhanden Tabellen (Datensätze aus der DB) mit berücksichtigt werden. Das ganze mit php zu lösen wäre an sich keine große Sache, nur müsste ich hierzu das Formular jedes mal neu senden.

Vielen Dank
Andi


----------



## Sven Mintel (12. Dezember 2009)

Jo, klar ginge das.

An die Anzahl der vorhandenen Tabellen kommst du per

```
document.getElementById(objid).getElementsByTagName('TABLE').length
```

den Button durch etwas anderes ersetzen kann man bspw. mit *replaceChild()*


----------



## BQM (4. Januar 2010)

Hi,

wünsche euch allen noch ein gesundes, glückliches und erfolgreiches neues Jahr und noch ein dickes Dankeschön an Sven. Leider muss ich euch nochmals um Hilfe bitten und zwar habe ich die "Klon-Tabellen" in eine weitere Tabelle gepackt, bei der man die einzelnen Zeilen nach oben bzw. nach unten verschieben kann. Man kann also die Position der geklonten Tabellen jetzt beliebig ändern. Das Ganze funktioniert soweit auch ganz gut,  nur bei folgenden Dingen komm ich absolut nicht weiter:

1. Könnt ihr euch die nolink-Funktionen anschauen? Hier soll jeweils der erste "nach oben"- bzw. der letzte "nach unten"-Link  in der Schleife ausgeblendet werden.

2.  Bei der tr_first - u. tr_last-Funktion soll die betreffende Zeile (bzw. Tabelle) direkt an die erste bzw. letzte Position in der Schleife verschoben werden.

Und zu guter Letzt wäre da noch das Riesenproblem mit dem Text-Counter. Kann mir jemand sagen, wie ich es hinbekomme, dass alle Zeichen der "description2[]" TEXTAREAS (hier meine ich wirklich alle innerhalb der Schleife) gezählt und im input-Feld zurückgezählt werden? Beispiel: Das komp. "description2-Array" soll auf 10Tsd Zeichen beschränkt sein. Stehen nun in der Schleife 5 Klontabellen, wird das "description2-Array" ausgelesen und es sind dann sozusagen 5 d2-Textareas vorhanden. Unter jeder soll der sichtbare Zähler stehen. Wird dann z.B. in der 3. d2-Textarea was eingegeben, sollen alle d2-Zähler mit nach unten zählen, das Ganze soll also zusammengefasst sein. (Hoffe, ich hab's verständlich erklärt.)


Und ohne ScheiXX, ich sitze hier schon seit Tagen und versuche, das irgendwie hinzubekommen. Da mir allerdings nur noch zwei Tage Urlaub bleiben, überkommt mich so langsam die Panik. Wäre also wirklich SUUUPPPER, wenn ihr mir helfen könntet. 


Viele Grüße 

Andi



```
<script type="text/javascript">
<!--

function clone_this(objid){

	var clone_me = document.getElementById(objid).firstChild.cloneNode(true);
	 
	 clone_me.getElementsByTagName('TEXTAREA')[0].value='';
	 clone_me.getElementsByTagName('TEXTAREA')[1].value='';

	 document.getElementById('insert_tab').appendChild(clone_me); 

 }
 

function nolink(){

	document.getElementById('ubutt').firstChild.style.display = "none";

 }
 
 
function nolink2(){

	document.getElementById('dbutt').lastChild.style.display = "none";

 }


function tr_down(row_id){

       var table = document.getElementById('main_tab');
       var row = document.getElementById(row_id);
       var next_row = row.nextSibling;
       var next_after_row = next_row.nextSibling;
	   
       table.insertBefore(row, next_after_row);

 }
 
		
function tr_up(row_id){
				
       var table = document.getElementById('main_tab');
       var row = document.getElementById(row_id);
       var prev_row = row.previousSibling;
	   
	       while (prev_row.nodeType != 1){
		
            prev_row = prev_row.previousSilbing;
  
  			}
	   
       table.insertBefore(row, prev_row);

}


function tr_first(row_id){
				
       var table = document.getElementById('main_tab');
       var row = document.getElementById(row_id);       
       var first_row = document.getElementById(row_id).firstChild;
	   
       table.insertBefore(row, first_row);

}

function tr_last(row_id){
				
       var table = document.getElementById('main_tab');
       var row = document.getElementById(row_id);       
       var last_row = document.getElementById(row_id).lastChild.nextSibling;
       var last_after_row = last_row.nextSibling;
	   
       table.insertBefore(row, last_after_row);

}


function CountChar(desc, countfield, maxlimit){
        
        var t = document.getElementById(desc).value;
        var rest = maxlimit - t.length;
        if (t.length > maxlimit) {
          t = t.substring(0,maxlimit);}
        else
      {countfield.value = maxlimit - t.length;}
 
      }	


//-->
</script>
```


```
$v = 0;

$form .= "<table border='1'><tbody id='main_tab'>";


for($i = 0; $i < count($description2); $i++){

$v++;


$form .= "<tr id='ctr_".$i."'><td>

<div id='new_passage'><table border='1'><tr>
	<td>Art.-Nr.: $v</td><td rowspan='2'>&nbsp;</td>
      <td><textarea name='description3a[]' rows='2'>".$description3a[$i]."</textarea></td>
	    <td rowspan='2'>
		
		<input value='Artikel löschen' onclick='op.value=\"branchartikph\";op3.value=\"del".$i."\";' type='submit'></input>
  
		<a href='#' onclick='javascript:tr_first(\"ctr_".$i."\"); nolink(); return false;' id='ubutt'>an erste Stelle</a><br>

		<a href='#' onclick='javascript:tr_last(\"ctr_".$i."\"); nolink2(); return false;' id='dbutt'>an letzte Stelle</a><br><br>		


		<a href='#' onclick='javascript:tr_up(\"ctr_".$i."\"); nolink(); return false;' id='ubutt'>nach oben</a><br>

		<a href='#' onclick='javascript:tr_down(\"ctr_".$i."\"); nolink2(); return false;' id='dbutt'>nach unten</a><br>

	</td></tr>
      <td>&nbsp;</td>
      <td><textarea cols='50' rows='5' name='description2[]' id='desc2' onkeydown='CountChar(\"desc2\",this.form.remLendesctow,10000)' onkeyup='CountChar(\"desc2\",this.form.remLendesctow,10000)'>$description2[$i]</textarea><br>Zeichen&nbsp;max.:<input class='tbox' type=box name=remLendesctow size=5 value=10000></td>
    </tr>
  </table>
</div>
  </td></tr>";
}

$form .= "</td></tr></tbody></table>

<div id='insert_tab'></div><table border='1'><tr><td>

<input value='Neuen Artikel hinzufügen' onclick='javascript:clone_this(\"new_passage\"); op.value=\"submit\";' type='submit'></input>

</td></tr></table>";
```


----------



## Gardinero (10. Februar 2011)

Hallo,

auf der Suche nach einem dynamischen Formular bin ich hier auf das unten stehende Skript gestossen.

Nun ist mir aufgefallen, dass es sich leider nicht so verhält, wie es soll.

Wenn man auf "weitere angeben" klickt und eine andere Gruppe auswählt, wirkt sich diese Auswahl auf den Elternknoten aus und nicht auf den Klon.

Leider bin ich noch ein absoluter Anfänger, was Javascript betrifft.

Kann mir vielleicht jemand helfen, den Fehler hier zu finden?
Oder hat jemand eine Idee, wie man ein solches Formular noch erstellen kann?

Vielleicht kennt ja einer von Euch einen Link zu einem guten Tutorial zu diesem Thema.

Vielen Dank im Voraus.

Gruß
Gardinero



form hat gesagt.:


> Hallo zusammen!
> 
> Habe das Script mit Begeisterung gefunden und bei meinem Formular eingebaut. Nun habe ich das Problem das ich ein zweites Javascript zur dynamischen Ausgabe von weiteren Options-Feldern drin habe, welches sich nicht mit einem einfachen Clonen verträgt.
> 
> ...


----------



## metty89 (10. Juni 2019)

Hallo zusammen,

ich hoffe, dass dieses Forum hier überhaupt noch aktiv ist, nachdem dieser Thread so lange Zeit inaktiv war. Ich habe genau das gleiche Problem wie in #70 beschrieben: Ich habe ein Webformular erstellt und einen Teil dieses Formulars geklont. Funktioniert auch super! 

Nun möchte ich jedoch erreichen, dass die (eingetragenen) Inhalte des Formulars nicht mitgeklont werden, sondern die geklonten Bereiche "leer" sind. Leider hat der Vorschlag von Sven Mintel in Post #71 bei mir nicht funktioniert. Bei mir geht es nicht um Textarea-Felder, sondern mehr um "normale" Input-Felder:

      <td>
        <input maxlength="50" name="Telefonnummer[]" size="25" type="tel" required multiple="multiple"/>
      </td>

Wie müsste ich das Script anpassen, damit die geklonten Felder nach dem klonen leer sind?



Sven Mintel hat gesagt.:


> Moin Andy,
> 
> du müsstest den *value * des betreffenden Elementes "per Hand" löschen.
> 
> ...


----------



## Quaese (11. Juni 2019)

Hi,

du kannst über alle *input* Felder mit dem Name *Telefonnummer[] *iterieren und den Wert zurücksetzen.

Beispiel:

```
Array.prototype.slice.call(clone_me.querySelectorAll('input[name="Telefonnummer[]"]')).forEach(function(input) {
    input.value = "";
})
```

Ciao
Quaese


----------



## mDie (3. Oktober 2020)

Sven Mintel hat gesagt.:


> Beispiel:
> 
> ```
> <html>
> ...



Hallo,

ich hab bisher noch nicht so viel Erfahrung mit Java. Wenn man die input Elemente mit jeweils einem div ausgerichtet hat, funktioniert der Code leider nicht. Besteht die Möglichkeit, dass man in den Java Code nur das "Elternelement" Div anspricht? Im nachfolgenden Fall den Inhalt des div's direct nach dem form Tag.

Beispiel:

</head>
<body>
<form>
<div> //Elternelement
  <div style='display:block; float:left; clear:both;'>
      Eingabe:
  </div>
  <div style='display:block; float:left; clear:both;'>
      <input type="text"size="20"name="textfeldname[]">
  </div>
  <div style='display:block; float:left; clear:both;'>
      <input type="button"value="noch eins"onclick="clone_this(this)">
   </div>
</div>
</form>
</body>
</html>


----------



## Quaese (3. Oktober 2020)

Hi,

wenn du deinem Elternelement eine Klasse spendierst, kannst du es über diese ermitteln.

```
<form>
  <div class="parentNode">
    <div style='display:block; float:left; clear:both;'>
      Eingabe:
    </div>
    <div style='display:block; float:left; clear:both;'>
      <input type="text" size="20" name="textfeldname[]">
    </div>
    <div style='display:block; float:left; clear:both;'>
      <input type="button" value="noch eins" onclick="clone_this(this)">
    </div>
  </div>
</form>
```

Das Javascript erweiterst du wie folgt:

```
var getParent = function(node) {
    var parent = node.parentNode,
      className = "parentNode";

    while (parent.parentNode && !parent.classList.contains(className)) {
      parent = parent.parentNode;
    }

    return parent === document ? null : parent;
  },

  clone_this = function(objButton) {
    var parent = getParent(objButton),
      tmpNode,
      children;

    if (parent) {
      tmpNode = parent.cloneNode(true);
      objButton.form.appendChild(tmpNode);
      children = objButton.form.lastChild.querySelectorAll('input');

      for (j = 0; j < children.length; ++j) {
        if (children[j].type == 'text') {
          children[j].value = '';
          break;
        }
      }

      objButton.value = "entfernen";
      objButton.onclick = function() {
        this.form.removeChild(parent);
      }
    }
  };
```

Ciao
Quaese


----------

