Fomularzeile auf OnClick hinzufügen @ tutorials.de: Tutorials, Forum & Hilfe

timob · 19.11.09 21:25

Guten Abend,
*Einschub: Ich gelobe mich mehr mit AJAX zu beschäftigen, bitte helft mir trotzdem

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!

**Quaese** · 20.11.09 00:39

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

timob · 20.11.09 12:42

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 :

1 2	<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 :

1
2
3

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

timob · 23.11.09 12:57

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

DeluXe · 23.11.09 13:12

Zitat von timob

Wenn ich den Wert [...] inkrementieren will, muss ich den doch irgendwie auch mit ins Script bekommen.

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.

timob · 23.11.09 13:16

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

DeluXe · 23.11.09 13:25

Ah, alles klar, jetzt verstehe ich dein Problem.

Die einfachste Lösung wäre wohl, Arrays zu verwenden.
Du müsstest diesen Code:

Code :

1
2
3

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

1
2
3

      <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.

timob · 23.11.09 13:37

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

**Quaese** · 23.11.09 16:39

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

timob · 24.11.09 16:50

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

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Mit Javascript ein onclick-Attribut hinzufügen

onmouseover omousout onclick ... bei onclick soll der divlayer stehenbleiben

OnClick im <td>

onClick und php

Onclick=0

E-Mail:

Abonnieren Abbestellen