|
|||
Dynamische Formerweiterung
Hallo,
ich habe folgendes Problem. Auf meiner Webseite habe ich ein Formular mit diversen Inputfeldern innerhalb einer Tabelle, die ich dynamisch erweitern möchte. Dazu hab ich mir etwas Javascript geschrieben, welches soweit auch gut funktioniert. Ich kann mir also per Buttonklick weitere Zeilen in der Tabelle hinzufügen, welche diverse Zellen enthalten, die wiederum die Inputfelder beinhalten. Um das in der Form darzustellen habe ich Befehle, wie etwa: "tableCell.appendChild(inputField)". Nun werden diese Inputs jedoch beim submitten des Formulars nicht mit übergeben, da sie ja auch nicht direkt dem Formular zugeordnet wurden, sondern den Tabellenzellen. Hat jemand ne Idee wie ich das miteinander vereinbaren könnte? Gruß |
Sponsored Links |
|
|||
Moin,
die Inputs müssen natürlich irgendwo innerhalb der form ins HTML eingebaut werden. gruß, take |
Sponsored Links |
|
|||
Die Stelle, an der ich sie erzeuge ist innerhalb der Form, aber er erkennt es trotzdem nicht. Nur wenn ich meiner Funktion die Form übergebe und die inputs direkt an die Form hänge, dann geht es. Aber dann habe ich nicht mehr die Darstellung, die ich möchte.
|
|
|||
Moin,
dann machst du was falsch. Ich habe auf einer Seite genau das gleiche: Tabelle in einer Form und per Klick auf einen Button werden per JS neue Zeilen in die Tabelle eingefügt mit Input-Feldern drin. Das funktioniert einwandfrei. Poste mal einen Testcase. gruß, take |
|
|||
Hier eine vereinfachte Version meiner Tabelle
HTML-Code:
<table id="Units"> <form name="PUnitEditForm" action="config.php#PUnits" method="post"> <tbody id="PUnits"> <tr id="PU1"> <td> <input type="text" name="srcArray[]"/> </td> <td> <input type="text" name="uriArray[]"/> </td> <td align="center"> <a href="javascript:void(0)" onclick="addPUArrayElem('PUnits')">add</a> </td> </tr> </tbody> </form> ... </table> Code:
var index = 1; function addPUArrayElem(tBodyId) { try { index++; var pu = document.getElementById(tBodyId); var tr = document.createElement('tr'); var trId = 'PU' + index; tr.setAttribute('id', trId); var srcTd = document.createElement('td'); var uriTd = document.createElement('td'); var srcInput = document.createElement('input'); srcInput.setAttribute('type', 'text'); srcInput.setAttribute('name', 'srcArray[]'); srcTd.appendChild(srcInput); var uriInput = document.createElement('input'); uriInput.setAttribute('type', 'text'); uriInput.setAttribute('name', 'uriArray[]'); uriTd.appendChild(uriInput); tr.appendChild(srcTd); tr.appendChild(uriTd); pu.appendChild(tr); } catch(e) { alert(e.message); } } |
|
|||
Ein form-Element darf kein Kindelement eines table-Elements sein.
Der Browser schließt das form-Element daher direkt nachdem es geöffnet wurde. Hättest du den Validator benutzt, hättest du dir (und uns) viel Mühe ersparen können P.S. Damit die Seite auch ohne JavaScript benutzbar ist, sollte das href-Attribut immer auf eine tatsächlich vorhandene Webseite zeigen.
__________________
Über Internet Explorer 8: Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt. Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt. Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt. Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Dynamische Selectbox | Praktikant | Javascript & Ajax | 2 | 22.08.2010 19:04 |
Problem mit dynamische Breite | Crys | CSS | 2 | 03.09.2009 13:44 |
dynamische CSS-Navigation mit mehreren Navigationsebenen | online | CSS | 1 | 17.04.2009 12:07 |
Dynamische Breite | stevie99 | CSS | 4 | 25.11.2007 13:19 |
Fixer "Footer"-Div an dynamische "Content-Höh | methodfive | CSS | 13 | 29.10.2005 09:51 |