Dynamisches Formular mit Nummerierung
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
absenden
auswahl
button
code
dank
dynamisches formular
element
erstellen
erzeugen
erzeugten input
feld
info
input
item
numerierung
nummer
tabelle
tag
url
zeile
-
Hallo
ich möchte ein tag/dynamisches formular">dynamisches Formular erstellen,
bei dem der User neue Elemente hinzufügen kann, und auch Elemente wieder löschen kann
das klappt auch, nur mit der Nummerierung klappt es nicht
... es funktioniert, solange ich nur Elemente hinzufüge,
aber sobald ich ein Element lösche, dann stimmt die Nummerierung nicht mehr
mein Code: testform1.php
<?php // --------------------------------------- if (isset($_POST['title']) && !empty($_POST['title'])) { print "<pre>\n"; print_r($_POST); print "</pre>\n"; } else { // --------------------------------------- ?> <html> <head> <title>Dynamisches Formular</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript"> <!-- var Zeile = 1; // ----- Header-Zeile = 1 ----- // --------- add_input functuin --------- function add_input(){ var tr = document.getElementById('articles').insertRow(Zeile); Zeile += 1; // --------- TD number TEXT --------- var znr = (Zeile-1); // ---- Zeilen-Nummer ohne Header-Zeile ---- var td0 = document.createElement('td'); td0.className = 'tdelement'; td0.innerHTML = znr; // ---- Ausgabe der Zeilen-Nummer ---- // --------- TD title INPUT --------- var td1 = document.createElement('td'); td1.className = 'tdelement'; var input1 = document.createElement('input'); input1.type = 'text'; input1.size = '36'; input1.name = 'title[]'; td1.appendChild(input1); // --------- TD info INPUT --------- var td2 = document.createElement('td'); td2.className = 'tdelement'; var input2 = document.createElement('input'); input2.type = 'text'; input2.size = '36'; input2.name = 'info[]'; td2.appendChild(input2); // --------- TD delete BUTTON --------- var td3 = document.createElement('td'); var button=document.createElement('input'); button.type = 'button'; button.className = 'delbutton'; button.onclick=function(){delete_input(this);}; button.value = 'delete'; td3.appendChild(button); // --------- TR insert TDs --------- tr.appendChild(td0); tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); } // --------- delete_input function --------- function delete_input(feld){ feld.parentNode.parentNode.parentNode.removeChild(feld.parentNode.parentNode); Zeile -= 1; } //--> </script> <style type="text/css"> <!-- .tdelement { background-color: #DEDEDE; } .delbutton { background-color: #AA3333; color:#FFFFFF; margin:2px; padding:4px; } .addbutton { background-color: #446633; color:#FFFFAA; margin:2px; padding:4px; } --> </style> </head> <body bgcolor="#FFFFFF" text="#000000"> <br> <br> <br> <form method="post" action=""> <table id="gname" width="378" bgcolor="#CCCCCC"> <tr> <td width="80">Title:</td> <td width="286" bgcolor="#DEDEDE"><input name="name" type="text" size="46" /></td> </tr> </table> <br> <br> <table id="articles" cellpadding="2" cellspacing="2" bgcolor="#CCCCCC" width="714"> <tr> <td width="38"> Nr. </td> <td width="288"> Title </td> <td width="288"> Info </td> <td width="96"> Button </td> </tr> </table> <p> <input class="addbutton" onclick="add_input();" type="button" value="Add New Item" /> </p> <p> OK ..... <input type="submit" name="go" value="SAVE" /> </p> </form> <br> <br> <br> </body> </html> <?php // --------------------------------------- } // --------------------------------------- ?>
Wie kann ich per JavaScript die dynamisch erzeugten Elemente (tr innerhalb Tabelle)
nach löschen eines Elements so ändern, dass ich wieder eine richtige Nummerierung bekomme ?
dieser Teil ist so nicht brauchbar
... // --------- TD number TEXT --------- var znr = (Zeile-1); // ---- Zeilen-Nummer ohne Header-Zeile ---- var td0 = document.createElement('td'); td0.className = 'tdelement'; td0.innerHTML = znr; // ---- Ausgabe der Zeilen-Nummer ---- ...
weil wenn ich von 4 Elementen (tr Zeilen mit Feldern) die Nr. 2 lösche,
dann steht als Nr die Reihenfolge 1, 3, 4 ... weil 2 ja gelöscht wurde
und neues Element ist dann nochmal die Nr. 4 (das stimmt ja dann von der Anzahl her)
aber 3 und 4 stimmen nicht mehr, die müssten jetzt 2 und 3 sein ...
ich hätte gerne auch nach löschen eine fortlaufende Nummerierung
also in diesem BSP dass die ehemalige 3 und 4 nach löschen zu 2 und 3 wird
(bzw. alle Nummern nach der gelöschter Nr um eins kleiner machen)
damit die Nummerierung wieder stimmt ....
ich hoffe ihr könnt mein Problem hierbei verstehen, und mir dabei helfen ...
sonst einfach nochmal nach-fragen ;) PS: Tip, probiert den Code selber aus
Beitrag zuletzt geändert: 23.7.2012 13:14:19 von srilankatours -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Wieso nummerierst du die Tabelle nicht durch? Hab dir in 2 Min kurz ein Script geschrieben:
<html> <head> <script type="text/javascript"> function numTableRows() { tableRows = document.getElementById("tabelle").getElementsByTagName("tr"); for(i = 0; i < tableRows.length; i++) { tableRows[i].getElementsByTagName("td")[0].innerHTML = (i+1); } } </script> </head> <body> <table id="tabelle"> <tr> <td>4</td> <td>ein</td> </tr> <tr> <td>5</td> <td>Männlein</td> </tr> <tr> <td>7</td> <td>steht</td> </tr> <tr> <td>8</td> <td>im</td> </tr> <tr> <td>5</td> <td>Walde</td> </tr> </table> <button onclick="numTableRows();">sortieren</button> </body> </html> -
ja Super ... DANKE !!!
habe die Funktion ein bischen angepasst, so dass der Wert eine Zeile weiter unten eingetragen wird
... weil ich in meiner Tabelle ja noch eine Kopf-Zeile habe (Spalten-Überschrift in der ersten tr)
und den Aufruf der numTableRows nicht als Extra-Button-Klick
sondern direkt innerhalb meiner add_input und delete_input eingebaut
so dass bei jeder Aktion (add oder delete) die Nummerierung neu erstellt wird
so klappt es, Danke !!!
mein Code jetzt:
<?php // --------------------------------------- if (isset($_POST['go']) && $_POST['go'] == 'SAVE') { print "<pre>\n"; print_r($_POST); print "</pre>\n"; } else { // --------------------------------------- ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE" lang="de-DE"> <head> <title>Dynamisches Formular</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript"> <!-- var Zeile = 1; // ----- Header-Zeile = 1 ----- // --------- add_input functuin --------- function add_input(){ var tr = document.getElementById('articles').insertRow(Zeile); Zeile += 1; // --------- TD number TEXT --------- var td0 = document.createElement('td'); td0.className = 'tdelement'; td0.innerHTML = ' '; // --------- TD title INPUT --------- var td1 = document.createElement('td'); td1.className = 'tdelement'; var input1 = document.createElement('input'); input1.type = 'text'; input1.size = '36'; input1.name = 'name[]'; td1.appendChild(input1); // --------- TD info INPUT --------- var td2 = document.createElement('td'); td2.className = 'tdelement'; var input2 = document.createElement('input'); input2.type = 'text'; input2.size = '36'; input2.name = 'info[]'; td2.appendChild(input2); // --------- TD delete BUTTON --------- var td3 = document.createElement('td'); var button=document.createElement('input'); button.type = 'button'; button.className = 'delbutton'; button.onclick=function(){delete_input(this);}; button.value = 'delete'; td3.appendChild(button); // --------- TR insert TDs --------- tr.appendChild(td0); tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); numTableRows(); } // --------- delete_input function --------- function delete_input(feld){ feld.parentNode.parentNode.parentNode.removeChild(feld.parentNode.parentNode); Zeile -= 1; numTableRows(); } // --------- table row number --------- function numTableRows() { tableRows = document.getElementById("articles").getElementsByTagName("tr"); for(i = 0; i < tableRows.length; i++) { tableRows[i+1].getElementsByTagName("td")[0].innerHTML = (i+1); } } //--> </script> <style type="text/css"> <!-- .tdelement { background-color: #DEDEDE; } .delbutton { background-color: #AA3333; color:#FFFFFF; margin:2px; padding:4px; } .addbutton { background-color: #446633; color:#FFFFAA; margin:2px; padding:4px; } --> </style> </head> <body bgcolor="#FFFFFF" text="#000000"> <br /> <br /> <br /> <form method="post" action=""> <table id="tabtitle" width="378" bgcolor="#CCCCCC"> <tr> <td width="80">Title:</td> <td width="286" bgcolor="#DEDEDE"><input name="title" type="text" size="46" /></td> </tr> </table> <br /> <br /> <table id="articles" cellpadding="2" cellspacing="2" bgcolor="#CCCCCC" width="714"> <tr> <td width="38"> Nr. </td> <td width="288"> Name </td> <td width="288"> Info </td> <td width="96"> Button </td> </tr> </table> <p> <input class="addbutton" onclick="add_input();" type="button" value="Add New Item" /> </p> <p> OK ..... <input type="submit" name="go" value="SAVE" /> </p> </form> <br /> <br /> <br /> </body> </html> <?php // --------------------------------------- } // --------------------------------------- ?>
Jetzt brauche ich noch etwas, um vor dem Absenden des Formulars zu prüfen,
ob Titel eingetragen wurde und ob mind. 1 Item angelegt wurde, aber auch auf max. 20 Items begrenzen.
Also ... Formular nur senden, wenn
+ input name="title" eingetragen wurde (Titel mind. 5 Zeichen)
+ mind. 1x neues Element hinzugefügt wurde und dort auch in die 2 Felder 'name' und 'info' etwas eingetragen wurde
ok, das könnte ich auch nach Absenden per PHP prüfen,
aber schöner wäre, wenn der "SAVE" Button nur funktioniert, wenn Bedingung erfüllt ist
und evtl. auch eine Begrenzung machen, dass der User maximal 20 Items erstellen kann
wenn es 20 Items gibt, dann den Button "Add New Item" nicht mehr anzeigen
ich habe ja den Zähler "var Zeile", wenn der auf 21 ist, dann class="addbutton" auf display:none
oder so
PS: XHTML Validen Code per JS erzeugen ??
ich habe mal versucht DOCTYPE als XHTML 1.0 Transitional zu machen
aber die vom Script eingefügten (neuen) Felder sind ohne den End-Slash im input-TAG
Im Auswahl-Quellentext steht dann<input name="name[]" size="36" type="text">
aber für XHTML 1.0 Transitional sollte es ja mit /> am Ende sein, wie bekomme ich das so hin ?
dass die per JS erzeugten INPUT Felder so sind:<input name="name[]" size="36" type="text" />
also valide ? ... gibt es dazu was für document.createElement('input'); ??
Danke!
Beitrag zuletzt geändert: 25.7.2012 16:05:57 von srilankatours -
srilankatours schrieb:
Vergiss das...
PS: XHTML Validen Code per JS erzeugen ??
ich habe mal versucht DOCTYPE als XHTML 1.0 Transitional zu machen
aber die vom Script eingefügten (neuen) Felder sind ohne den End-Slash im input-TAG
Im Auswahl-Quellentext steht dann<input name="name[]" size="36" type="text">
aber für XHTML 1.0 Transitional sollte es ja mit /> am Ende sein, wie bekomme ich das so hin ?
dass die per JS erzeugten INPUT Felder so sind:<input name="name[]" size="36" type="text" />
also valide ? ... gibt es dazu was für document.createElement('input');
Wenn Elemente mit JavaScript mit dem DOM erstellt werden ist das sowieso dynamisch und kommt so nie auf die Festplatte... das liegt also nur im Arbeitsspeicher, und wenn du dir den Auswahlquelltext anzeigen lässt wird dieser on-the-fly vom Browser erstellt ... ob der valides XHTML ist oder nicht hängt nur vom Browser ab und ist auch völlig egal
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
