Formular dynamisch erweitern.

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>
 
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.
 
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
 
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:
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)
 
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)
Zum Vergrößern anklicken....

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

Neue Beiträge

Zurück