Formular dynamisch erweitern.

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>
 
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?
 
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.
 
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
 
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
 
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
 
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
 
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:
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.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück