JavaScript Formularfeld hinzufügen

WhiZZler

WhiZZler

Chancentod²
ID: 85586
L
6 Mai 2006
588
32
Begrüße!

Ich habe ein Formular, bei dem die Anzahl der Eingabefelder variabel sein soll.. Dachte mir, es wäre am schönsten, wenn man die Formularfelder in Web 2.0 Manier bei Bedarf automatisch hinzufügt.. Habe es so gelöst, dass bei onfocus des untersten Formularfeldes ein neues Feld hinzugefügt wird.. Klappt auch wunderbar..

Mein Ansatz war Folgender.. der Aufbau des Formulars (vereinfacht..):
PHP: 
<form action="hurz.php" method="post">
<table id="formTable">
  <tr>
    <td>Feld1</td>
    <td>
      <input type="text" name="feld_1" id="feld_1" onfocus="checkForNewRow(1);">
    </td>
  </tr>
  <tr>
    <td>Feld2</td>
    <td>
      <input type="text" name="feld_2" id="feld_2" onfocus="checkForNewRow(2);">
    </td>
  </tr>
</table>
</form>

Wenn checkForNewRow() entscheidet, dass ne neue Zeile angehängt wird, dann erstelle ich eine neue Zeile mit den gewünschten Attributen und aktualisiere den Wert der Tabelle folgendermaßen:
Code: 
document.getElementById("formTable").innerHTML += newRow;

Das Problem hierbei ist, dass alle vorhandenen Formulareingaben gelöscht werden.. Ich habe mal ein wenig gestöbert und bin auf createElement() und appendChild() gestoßen.. Diese Funktionen sind in der Handhabung aber ne Krankheit..

Nen anderer Workaround mäßiger Ansatz wäre es die Formulardaten vor dem erweitern im Script abzuspeichern und danach dann wieder ins Formular zu schreiben.. Aber das ist wohl wirklich nur nen Workaround..

Gibt es noch irgendwelche einfacheren Möglichkeiten? Oder muss ich mich mit createElement() und appendChild() rumschlagen? Oder sollte ich mir doch mal jQuery und co anschauen? Fragen über Fragen..

Danke im Vorraus!
MfG,
whizzler
 
Das liegt daran, dass innerHTML nicht unbedingt den aktuellen Status des DOMs reflektiert, wenn es um Formularelemente geht.

Wenn du jetzt jedes Mal den Inhalt der Tabelle überschreibst, gehen die Eingaben des Users natürlich verloren. Aber wo liegt denn das Problem mit createElement() und appendChild()?

Nur mal so als Denkanstoß:

PHP: 
var table = document.getElementById('formTable');
var newRowHTML = '<td>Blablub</td><td>lorem ipsum</td>';
table = table.getElementsByTagName('tbody')[0] || table; // wechsle zu tbody-Element, falls vorhanden (IE fügt das automatisch hinzu, wenn nicht vorhanden)

var newRow = document.createElement('tr');
newRow.innerHTML = newRowHTML;

table.appendChild(newRow);

Würde ich zwar nie so machen, sollte aber funktionieren ;)

Greetz

paddya
 
warum würdest du es nie so lösen? bzw wie würdest du es lösen?

habe es jetzt mit addRow() und addCell() gelöst.. das input feld schreibe ich als fertigen html code mit innerHTML() in die Zelle.. war mir zu blöd, für die input felder (sind insgesamt 3 stück pro zeile) mit createElement() und setAttribute() zu erstellen, weil es eben pro input 6 attribute sind (name, type, size, maxlength, onfocus, onkeyup).. wenn man das direkt als html code schreibt und dann in die zelle schreibt ist das weniger code und es ist denke ich auch besser nachvollziehbar für spätere änderungen..
 
WhiZZler schrieb:
warum würdest du es nie so lösen? bzw wie würdest du es lösen?
[...]
direkt als html code schreibt
Zum Vergrößern anklicken....

Meine Lösung kombiniert alle deine Wünsche ;) Es umgeht das Problem der verlorenen Formulareingaben und du kannst deine Tabellenzellen als HTML-String übergeben.

Das Ganze war ja keine fertige Lösung, sondern ein Denkanstoß. Verwende die nativen DOM-Methoden in Kombination mit innerHTML!

Greetz

paddya

Edit: Warum ich das nie so lösen würde? innerHTML ist böse und seit jQuery ist DOM-Manipulation so simpel wie nie zuvor :)
 
und was genau ist "böse" an innerHTML ?

wird wohl auf jeden fall mal zeit, dass ich mir jQuery anschaue.. ;)
 
danke für deine antworten! habe gerade mal einen ersten blick auf jQuery geworfen.. scheint ne sehr schicke sache zu sein.. ne schande, dass ich mich nich früher damit beschäftigt habe ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben