Eingabefelder hinzufügen

[Tom]

Hello,

ich versuche, in einem Formular dynamisch Eingabefelder hinzuzufügen.
Als Vorlage habe ich mir dazu http://de.selfhtml.org/dhtml/modelle/dom.htm#neue_knoten genommen. Aber ich bekomme es nicht hin.

Elementknoten.appendChild(Textknoten);

Wird angemeckert.

Was muss ich anders machen, damit auch ein input-Feld hinzugefügt werden kann. Irgendwie muss ich dann ja auch die Eigenschaften des Input-Feldes noch festlegen.

Liebe Grüße aus http://www.braunschweig.de

Tom

[JürgenB]

Hallo Tom,

Du musst mit createElement einen Knoten erzeugen und mit appendChild in den DOM-Baum einhängen. Als Beispiel kannst Du dir http://home.vrweb.de/j.berkemeier/uebersetzungsrechner.html ansehen, speziell die Funktion "make_table_inp".

Gruß, Jürgen

[Tom]

Hello,

Du musst mit createElement einen Knoten erzeugen und mit appendChild in den DOM-Baum einhängen. Als Beispiel kannst Du dir http://home.vrweb.de/j.berkemeier/uebersetzungsrechner.html ansehen, speziell die Funktion "make_table_inp".

Der Abgucktipp ist gut. Danke. Und außerdem kann ich den Content dann auch gleich noch verwerten.

Jetzt nervt mich nur noch, dass ich überhaupt keine Übersicht darüber habe, welches Element des DOM nun welche Unterlemente hat und welche Eigenschaften da zur Verfügung stehen. Gibt es da nicht irgendwo eine gute Darstellung? Eine Art Flowchart wäre doch nicht schlecht.

Ich hätte z.B. nicht daran gedacht, dem Element vom Typ table erst noch ein tbody einzupflanzen, sondern hätte ihm gelich ein tr eingepflanzt.

Liebe Grüße aus http://www.braunschweig.de

Tom

[JürgenB]

Hallo Tom,

Der Abgucktipp ist gut. Danke. Und außerdem kann ich den Content dann auch gleich noch verwerten.

Fein.

Jetzt nervt mich nur noch, dass ich überhaupt keine Übersicht darüber habe, welches Element des DOM nun welche Unterlemente hat und welche Eigenschaften da zur Verfügung stehen. Gibt es da nicht irgendwo eine gute Darstellung? Eine Art Flowchart wäre doch nicht schlecht.

Alles, was ich über das DOM weiß, stammt aus http://de.selfhtml.org/javascript/objekte/index.htm.

Ich hätte z.B. nicht daran gedacht, dem Element vom Typ table erst noch ein tbody einzupflanzen, sondern hätte ihm gelich ein tr eingepflanzt.

Das lernt man hier im Forum.

Gruß, Jürgen

[Tom]

Hello,

function insert_file_input()
{
    var fx = document.getElementById('t1');
    var tbody = document.createElement("tbody");
    var tr  = document.createElement("tr");
    var td  = document.createElement("td");
    var inp = document.createElement("input");
    inp.size = 20;
    inp.type = 'file';
    inp.name = 'file[]';

td.appendChild(inp);
    tr.appendChild(td);
    tbody.appendChild(tr);
    fx.appendChild(tbody);
}

<form name="form2" id="f2"
        action="http://testserver.lan.fli4l/~thomas/test/debug/kontrolle.php"
        method="post"
        enctype="multipart/form-data">

<table id="t1">

<!-- hier werden die Input-Elemente dynamisch eingefügt -->

</table>
    <input type="button" value="Neues Feld" onClick="insert_file_input()">
    <input type="submit" name"btn[upload]" value="&uuml;bertragen">

</form>

Ich habe das nun im wesentlichen so aufgebaut und es funktioniert auch. Mir ist aber noch nicht klar, wieviele tbody-elemente ich da einbauen darf, bzw. ob ich das vermeiden muss und wie ich das dann vermeiden sollte.

Liebe Grüße aus http://www.braunschweig.de

Tom

[JürgenB]

Hallo Tom,

http://de.selfhtml.org/html/tabellen/aufbau.htm#kopf_koerper_fuss ganz unten:

Beachten Sie:
Wenn Sie mit den Elementen thead, tfoot und tbody arbeiten, müssen Sie immer alle drei Elemente verwenden, und zwar immer in der Reihenfolge thead->tfoot->tbody. Die Elemente thead und tfoot dürfen pro Tabelle nur einmal vorkommen, das tbody-Element einmal oder beliebig oft.

Gruß, Jürgen

[Tom]

Hello,

http://de.selfhtml.org/html/tabellen/aufbau.htm#kopf_koerper_fuss ganz unten:

Beachten Sie:
Wenn Sie mit den Elementen thead, tfoot und tbody arbeiten, müssen Sie immer alle drei Elemente verwenden, und zwar immer in der Reihenfolge thead->tfoot->tbody. Die Elemente thead und tfoot dürfen pro Tabelle nur einmal vorkommen, das tbody-Element einmal oder beliebig oft.

Dann wird es das einfachste sein, die drei Table-Childs gleich im statischen HTML anzulegen und den <tbody id="tb1"> anzulegen. Darin kann man dann ja nach Belieben <tr> einfügen lassen.

Ich habe das nun so ausprobiert und es klappt. Die andere "böse" Lösung hat ja im IE auch funktioniert, was auch nix zu bedeuten hat ;-)

Wie kann man sich denn nun den generierten Quelltext eine solchen Seite anschauen? Gibts dafür Entwicklungstools? Ich habe hier noch den Debugger von VisualStudio 6.0 auf dem PC.

Liebe Grüße aus http://www.braunschweig.de

Tom

[JürgenB]

Hallo,

Wie kann man sich denn nun den generierten Quelltext eine solchen Seite anschauen? Gibts dafür Entwicklungstools? Ich habe hier noch den Debugger von VisualStudio 6.0 auf dem PC.

Also da kenne ich auch kein Werkzeug. Ich prüfe meine Javascripts in möglichst vielen Browsern unter verschiedenen Systemen auf korrekte Syntax und Funktion.

Gruß, Jürgen

[Tom]

Hello,

Also da kenne ich auch kein Werkzeug. Ich prüfe meine Javascripts in möglichst vielen Browsern unter verschiedenen Systemen auf korrekte Syntax und Funktion.

Na gut, dann jedenfalls erstmal mein Dank für Teil 1 der Aufgabe.

Teil 2 lautet:
Anzeige eines Vorschaubildes des uzuloadenden Bildes
Bekomme ich das hin?
Auslesen kann man den Value von <input type="file" ...> ja.

Angezeigt werden dürfen natürlich nur Bilder und keine sonstigen Objekte.
Kann man JavaScript den Mime-Type abfragen?
Ich suche nochmal...

Liebe Grüße aus http://www.braunschweig.de

Tom