Fomularzeile auf OnClick hinzufügen

T

timob

Grünschnabel
Guten Abend,
*Einschub: Ich gelobe mich mehr mit AJAX zu beschäftigen, bitte helft mir trotzdem ;-) *

ich bastele gerade eine Seite in PHP mit einem Kontaktformular. Dieses Kontaktformular beinhaltet eine Tabelle. Die Tabelle ist aufgebaut wie folgt:

|FensterNr.|FlügelNr.|Höhe|Breite|Farbe|Profil|Funktion|

mit
Code: 
<tr><td><input type=\"text" name=\"fenster$n\"size=\"3\"></td>
<td><input type=\"text" name=\"fluegel$n\"size=\"3\"></td>
<td><input type=\"text\" name=\"hoehe$n\" size=\"5\"></td>
<td><input type=\"text\" name=\"breite$n\" size=\"5\"></td>
<td><select name=\"farbe$n\"size=\"1\"><option></option><option>weiss</option><option>braun</option></select></td>
<td><select name=\"profil$n\"size=\"1\"><option></option><option>2 Scheiben CT70</option><option>3 Scheiben CT82</option></select></td>
<td><select name=\"funktion$n\"size=\"1\"><option></option><option>Dreh</option><option>Kipp</option><option>Drehkipp</option><option>Fix</option></select></td></tr>
Die Feldnamen enden alle mit $n wobei $n die Tabellenzeile angibt.
Nun soll der Benutzer am Ende der Zeile auf "Neuer Flügel" oder "Neues Fenster" klicken können, woraufhin die Tabelle um eine Zeile wächst und enweder der Wert zu "Fenster" oder der Wert zu "Flügel" inkrementiert wird.
Sonderfälle:
Wenn "Neues Fenster" gewählt ist, geht Flügel wieder auf "1"
Wenn "Neuer Flügel" gewählt ist, kann nur "Funktion" gewählt werden, alles andere ist readonly.

Mein Problem dabei ist, dass ich nichteinmal einen Ansatz zur Lösung dieser Aufgabe finde, das anschliessende Verarbeiten und per PHP Mailer verschicken klappt schon ganz gut ;-)

Ich krieg zwar nix für das Projekt, aber es ist für meinen besten Freund. Wenn also jemand meint, er habe eine Lösung will ich auch gerne ein paar Euros für eine Lösung auf den Tisch legen. Ich kann aber auch ein bisschen PHP Knowledge lockermachen, wenn da Bedarf besteht.

Auch wenn Du mir bei dieser Sache nicht helfen kannst, vielen Dank fürs Durchlesen, wenn Du mir helfen kannst noch mehr Dank!
 
Hi,

es gibt die Methode cloneNode. Damit ist es möglich, Knoten und deren Inhalt zu clonen und an anderer Stelle modifiziert wieder einzufügen.

Beispiel - die Tabellenzeile mitsamt Inhalt wird gecloned und die Namen inkrementiert
Code: 
<html>
<head>
<title>Zeile clonen</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function newRow(_this){
  var objClone = _this.parentNode.parentNode.cloneNode(true);
  var objTBody = _this.parentNode.parentNode.parentNode;
  objTBody.appendChild(objClone);

  var intNewIndex = objTBody.getElementsByTagName("tr").length;
  var arrWork = objClone.getElementsByTagName("input");
  for(var i=0; i<arrWork.length; i++){
    arrWork[i].name = arrWork[i].name.replace(/[\d]{1,}/, intNewIndex);
  }

  arrWork = objClone.getElementsByTagName("select");
  for(var i=0; i<arrWork.length; i++){
    arrWork[i].name = arrWork[i].name.replace(/[\d]{1,}$/, intNewIndex);
  }
}
</script>
</head>
<body>
<table>
	<tr>
	  <td><input type="text" name="fenster1" size="3"></td>
	  <td><input type="text" name="fluegel1" size="3"></td>
	  <td><input type="text" name="hoehe1" size="5"></td>
	  <td><input type="text" name="breite1" size="5"></td>
	  <td><select name="farbe1" size="1"><option></option><option>weiss</option><option>braun</option></select></td>
	  <td><select name="profil1" size="1"><option></option><option>2 Scheiben CT70</option><option>3 Scheiben CT82</option></select></td>
	  <td><select name="funktion1" size="1"><option></option><option>Dreh</option><option>Kipp</option><option>Drehkipp</option><option>Fix</option></select></td>
    <td><button onclick="newRow(this); return false;">new</button></td>
	</tr>
</table>
</body>
</html>

Das zeigt, wie du prinzipiell vorgehen könntest. Vielleicht hilft es dir weiter.

Ciao
Quaese
 
Hallo,
vielen Dank für Deine Antwort Quaese ! Ich hoffe ich konnte die Funktionsweise richtig nachvollziehen:
Der Parentnode ist <tr>, den leg ich ab unter objTBody und kopier ihn nach objClone
intNewIndex ist die Länge des Bereichs <tr> bis </tr> (?)
arrWork sind zunächst die input, später die select Tags.
Diese werden dann im Argument von name nach einer einzelnen Ziffer durchsucht welche dann durch intNewIndex ersetzt wird (hier ist was komisch?)


Kann ich jetzt also mit einem zweiten Argument

Code: 
<td><button onclick="newRow(this,fenster); return false;">new</button></td>
<td><button onclick="newRow(this,fluegel); return false;">new</button></td>

die beiden Buttons und im Script selbst in der Art

Code: 
function newRow(_this,typ){
if ($typ=fluegel) {$fluegel++}
if ($typ=fenster){$fenster++}

weitermachen ?

UPDATE: Mein aktueller Versuch ist hier: http://timbrauer.de/projekte/test/kontakt.php?s=preis
 
Zuletzt bearbeitet:
Hallo, wünsche ein schönes Wochenende gehabt zu haben !

Ich übergebe jetzt nach dem 'this' noch einen zweiten, nummerischen Parameter. Den kann ich dann in der Funktion genauso abfragen, wie bei PHP.

Dabei stellt sich mir aber die Frage: Wenn ich den Wert für Fenster oder Flügel inkrementieren will, muss ich den doch irgendwie auch mit ins Script bekommen.

Wer kann mir hier helfen ?

Danke und Gruß,

Tim
 
timob hat gesagt.:
Wenn ich den Wert [...] inkrementieren will, muss ich den doch irgendwie auch mit ins Script bekommen.
Zum Vergrößern anklicken....

Meinst du mit "Skript" PHP oder JavaScript?

Wenn du es von PHP aus an JavaScript übergeben willst - was für mich Sinn ergibt - kannst du einfach echo "<script>var num = $i;</script>" schreiben. Somit würde es im Quelltext stehen und vom Browser interpretiert werden.
 
Hallo Deluxe,
vielen Dank für die schnelle Antwort :-D

Mit Script meine das Javascriptscript, das dann auch die neuen Tabellenzeilen erstellen soll so wie Quaese es gebastelt hat.

Von PHP ins Java geht ja nicht, weil die Seite eben nicht für jede Zeile neu geladen werden soll :-(

Gruß, Tim
 
Ah, alles klar, jetzt verstehe ich dein Problem. :)

Die einfachste Lösung wäre wohl, Arrays zu verwenden.
Du müsstest diesen Code:
Code: 
	  <td><select name="farbe1" size="1"><option></option><option>weiss</option><option>braun</option></select></td>
	  <td><select name="profil1" size="1"><option></option><option>2 Scheiben CT70</option><option>3 Scheiben CT82</option></select></td>
	  <td><select name="funktion1" size="1"><option></option><option>Dreh</option><option>Kipp</option><option>Drehkipp</option><option>Fix</option></select></td>

Einfach so anpassen:
Code: 
	  <td><select name="farbe[]" size="1"><option></option><option>weiss</option><option>braun</option></select></td>
	  <td><select name="profil[]" size="1"><option></option><option>2 Scheiben CT70</option><option>3 Scheiben CT82</option></select></td>
	  <td><select name="funktion[]" size="1"><option></option><option>Dreh</option><option>Kipp</option><option>Drehkipp</option><option>Fix</option></select></td>

Somit erhälts du im PHP einfache Arrays, die man meiner Ansicht nach auch einfacher verarbeiten kann, da man nicht "feld1", "feld2", etc. hat.

Ich hoffe mal dadurch funktioniert der Rest des Skripts noch, da ich mir jetzt nicht den ganzen Thread durchgelesen habe. ;)
 
Hello again,

nochmal Danke für den Tipp. Leider hilft er mich nicht :-( Ich setzte JS ein, um dynamisch zusätzliche Tabellenzeilen zu generieren. In diese Zeilen muss nun in manchen Zellen ein Wert eingefügt werden, der von der vorhergehenden Zeile abhängig ist. Ich komm also um JS nicht rum :-(.

Grüßle vom Exilschwaben aus Berlin,

Tim
 
Hi,

du verwendest auf deiner Seite die Methode getElementByID - korrekt müsste sich getElementById heissen. Macht einen Unterschied, da JavaScript zwischen Gross- und Kleinschreibung unterscheidet.

Zum anderen Problem. Mein obiger Beispielcode war lediglich eine Möglichkeit, wie es prinzipiell umgesetzt werden könnte. Für deine spezielle Anforderung sind einige Änderungen notwendig. Vor allen Dingen bei der Nummerierung der name-Werte.

Ich kann dir folgendes Beispiel anbieten, in dem ich versucht habe, die Anforderungen aus deinem ersten Post umzusetzen. Die prinzipielle Vorgehensweise sollte daraus ersichtlich sein, zumal der JS-Teil weitestgehend kommentiert ist.
Code: 
<html>
<head>
<title>Zeile clonen</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function newRow(_this, intType){
  var objClone = _this.parentNode.parentNode.cloneNode(true);
  var objTBody = _this.parentNode.parentNode.parentNode;
  objTBody.appendChild(objClone);

  var intNewIndex = objTBody.getElementsByTagName("tr").length;
  var arrWork = objClone.getElementsByTagName("input");
  for(var i=0; i<arrWork.length; i++){
  // Falls Fenster gewählt wurde und das Fensterfeld aktuell ist -> auf 1 zurücksetzen
    if((arrWork[i].name.search(/fenster/) != -1)&&(intType == 0)){
      arrWork[i].name = "fenster1";
      // Falls Flügel gewählt wurde und das Flügelfeld aktuell ist -> auf 1 zurücksetzen
    }else if((arrWork[i].name.search(/fluegel/) != -1)&&(intType == 1)){
      arrWork[i].name = "fluegel1";
    }else{
      // Falls es sich um das Fenster- oder Flügelfeld handelt -> inkrementieren
      if((arrWork[i].name.search(/fenster/) != -1)||(arrWork[i].name.search(/fluegel/) != -1)){
        arrWork[i].name.search(/([\d]{1,})$/)
        var intHelp = parseInt(RegExp.$1)+1;
        arrWork[i].name = arrWork[i].name.replace(/[\d]{1,}$/, intHelp);
      }else
        arrWork[i].name = arrWork[i].name.replace(/[\d]{1,}/, intNewIndex);
    }

    // Felder disablen, falls Flügel; enablen, falls Fenster
    arrWork[i].disabled = (intType == 1)? true : false;
  }

  arrWork = objClone.getElementsByTagName("select");
  for(var i=0; i<arrWork.length; i++){
    arrWork[i].name = arrWork[i].name.replace(/[\d]{1,}$/, intNewIndex);
    // Felder disablen, falls Flügel; enablen, falls Fenster (Ausnahme: funktion-Feld)
    arrWork[i].disabled = ((intType == 1)&&(arrWork[i].name.search(/funktion/)==-1))? true : false;
  }
}
</script>
</head>
<body>
<table>
	<tr>
	  <td><input type="text" name="fenster1" size="3"></td>
	  <td><input type="text" name="fluegel1" size="3"></td>
	  <td><input type="text" name="hoehe1" size="5"></td>
	  <td><input type="text" name="breite1" size="5"></td>
	  <td><select name="farbe1" size="1"><option></option><option>weiss</option><option>braun</option></select></td>
	  <td><select name="profil1" size="1"><option></option><option>2 Scheiben CT70</option><option>3 Scheiben CT82</option></select></td>
	  <td><select name="funktion1" size="1"><option></option><option>Dreh</option><option>Kipp</option><option>Drehkipp</option><option>Fix</option></select></td>
    <td><button onclick="newRow(this, 0); return false;">neues Fenster</button></td>
    <td><button onclick="newRow(this, 1); return false;">neuer Flügel</button></td>
	</tr>
</table>
</body>
</html>

Ciao
Quaese
 
Hello again, Quaese !
Ich hab Dein Script jetzt eingebaut, aber leider klappt das mit dem Inkrementieren nicht. Wo kann ich denn nachschauen, wie es gemacht wird, dan finde ich den Fehler vielleicht selbst ?

Grüße, Tim
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück