Formular dynamisch erweitern.


gangsterchen

Grünschnabel
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:


PHP:
<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

Grünschnabel
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.
PHP:
<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

Moderator
Moderator
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.
Code:
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

Grünschnabel
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.

  1. ist bei deiner Variante noch ein Aray nötig, damit auch alle Felder korrekt übermittelt werden
  2. 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
 
Zuletzt bearbeitet:

Sven Mintel

Mitglied
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

Grünschnabel
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?
 
Zuletzt bearbeitet:

Sven Mintel

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

PHP:
$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

Grünschnabel
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
 

dfederer

Grünschnabel
Das hier ist mal das Formular:

HTML:
<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:
<?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

Mitglied
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:

Code:
<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

Mitglied
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

Mitglied
Moin,...

ausgehend von dem letzten von mir geposteten Code:
du findest dort ein <div> vor, in welchem sich die Formularelemente befinden:
Code:
    <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.
 

Fotostudio-K

Grünschnabel
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
 
M

Maik

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

Grünschnabel
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.

PHP:
<!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
 
M

Maik

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:
Code:
<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?
Code:
<objButton.form.lastChild.childNodes.length;++j)
        {
        if(objButton.form.lastChild.childNodes[j].type=='text')
            {
            objButton.form.lastChild.childNodes[j].value='';
            break;
            }
        }


mfg Maik
 

eulisan

Grünschnabel
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.
 
Zuletzt bearbeitet:

Sven Mintel

Mitglied
Moin,

folgender Aufbau:
Code:
<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.