Hellas!
Da ich gerade an einer Seite arbeite, die hauptsächlich von Bildergalerien leben wird, stand ich vor folgendem "Problem": Ich könnte in einem Formular ja eine gewisse Anzahl von Dateiuploads zulassen, meinetwegen 5. Was aber, wenn das nicht reicht? Dann müssen weitere Felder her!
Das lässt sich mit diesem Script ganz leicht lösen:
Alles was fett geschrieben ist könnt ihr selbst bestimmen. Aber obacht! div ist die ID eueres div's wo die neuen Felder eingefügt werden sollen - ich habs im ersten anlauf auch vergessenCode:<script type="text/javascript"> function mehr(){ var el = document.createElement("input"); //ein Input-Tag soll erstellt werden el.setAttribute("name","inhalt[]"); // Attribut name="inhalt[]" soll gesetzt werden el.setAttribute("type","file"); // Attribut type="file" soll gesetzt werden document.getElementById("div").appendChild(el); // setzt es in den DIV-Container // Um einen Zeilenumbruch zu erwirken, kommt das hier noch: var br = document.createElement("br"); document.getElementById("div").appendChild(br); } </script>
Warum nicht mit innerHTML arbeiten?
Ginge natürlich auch! Nehmen wir doch mal an, wir haben jetzt 5 "feste" Felder und haben die Möglichkeit noch weitere hinzuzufügen... Der User füttert jetzt die Felder und merkt, dass er eins mehr benötigt. Hätten wir das innerHTML gelöst, wären die vorher eingebenen Daten weg! mit createElement und setAttribut umgeht man das Problem.
Kommen wir zum Formular:
Vielleicht hilft es ja! Kann man natürlich beliebig erweitern. So lassen sich auch alle anderen HTMLHTML-Code:<form method="post" action="#" enctype="multipart/form-data"> <input type="file" name="inhalt[]" /> <!-- inhalt[] erzeugt ein Array--> <br/> <div id="div"></div> <!-- der Bereich, wo weitere Felder eingesetzt werden sollen --> <input type="submit" name="ab" value="Absenden" /><br /> <a href="#" onClick="mehr();">+</a> <!-- kann auch als Input-Tag type=button gesetzt werden --> </form>
-Tags mit ihren Attributen ansprechen!
Verbesserungen, Fragen, Kritik? Immer her damit!
Gruß
Vocast


LinkBack URL
About LinkBacks







Zitieren
Lesezeichen