✔ Mehrere Input felder hinzufügen

[Mavericklp]

Moin moin zusammen,
ich möchte gerne mehrere Dateien hochladen. 2 input Felder stehen von anfang an dort. Jetzt sollen mit einem Butten mehrere Felder hinzugefügt werden. Mit innerHTML hab ich es hinbekommen. Das Problem ist nur, das die schon ausgefüllten Felder dann geleert werden. Mit addChild soll das nicht der fall sein. Nur sobald ich diesen Tag benutze passiert garnichts mehr.

<script language="javascript">
   fields = 3;
      function addInput() {
         if (fields != 11) {
            document.getElementById('text').innerHTML += fields + ". <input type='file' value='' name='datei[]' /><br />";
            fields += 1;
         } else {
            document.getElementById('text').innerHTML += "<br />Only 10 upload fields allowed.";
            document.form.add.disabled=true;
      }
   }
</script>

<form action="upload.php" method="post" enctype="multipart/form-data">
Datei Upload <input type="button" onClick="addInput();" value="Zusätzliches Feld"><br /><br />
         
         <div id="text">
         1. <input type="file" name="datei[]" /><br />
         2. <input type="file" name="datei[]" /><br />
         </div>
         <br /><br />
         <input type="submit" name="submit" value="Hochladen" />
</form>

Könnte mir einer Helfen, den Javascript teil passend umzubauen****?

 

[nepda]

mit richtigen DOM Baum sollte es funktionieren:

<script type="text/javascript">

        var files_count = 2;


        function addFileField ()
        {
            if (files_count >= 10)
            {
                alert('nur 10 sind erlaubt!');
                return false;
            }
            var parent = document.getElementById('fields');
            var node = document.createElement("input");
            node.setAttribute("id", "fiele-"+files_count);
            node.setAttribute("name", "fieles[]");
            node.setAttribute("type", "file");
            node.setAttribute("value", "");

            parent.appendChild(node);

            files_count = files_count+1;

        }
    </script>

<div id="fields">
        <input type="file" name="files[]" id="file-0" />
        <input type="file" name="files[]" id="file-1" />
    </div>

    <a href="javascript:addFileField();" onclick="addFileField();return false;">add</a>

 

[Mavericklp]

Wuhu, es funktioniert! Vielen vielen Dank!

Allerdings hab ich noch eine Frage. Wie kann ich vor das Input Felde noch Text hinzufügen? Mit document.writhe() funktioniert es. Aber die Ganze Seite wird neugeladen und es steht nur eine 2. da.

 

[Mavericklp]

Ich habs gefunden:

var text = document.createTextNode(files_count + ". ");
parent.appendChild(text);