Dynamisch file/upload Felder erstellen

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Dynamisch file/upload Felder erstellen

    Hi zusammen,
    hab ein "noob" Problem, hab aber in der Suche keine Lösung gefunden.
    Versuche grad je nachdem wie viele Uploads der Benutzer braucht, dementsprechend Upload Felder zu erstellen.
    Mein Ansatz:

    Quellcode

    1. <td>
    2. <html><head>
    3. <script type="text/Javascript">
    4. <!--
    6. function addField() {
    8. document.getElementById("fields").innerHTML += "<input type="file" value="" id="test" >";
    11. }
    13. //-->
    14. </script>
    15. </head>
    17. <body>
    19. <p>Anzahl der Seiten</p>
    20. <input value="1" onChange="addfield()" id="Anzahl" >
    21. <div id="fields" ></div>
    22. </body>
    Alles anzeigen

    ist jetzt noch keine for Schleife und so drin, aber scheiter ja auch schon an der Grundlage^^.
    wär für den ein oder anderen Tip sehr dankbar!

  • noch ein kleines Problem mit dem entfernen eines Feldes...

    Quellcode

    1. function addField() {
    2. Anzahl = document.getElementById('Anzahl').value;
    3. document.getElementById("fields").innerHTML = "";
    4. var i = 1;
    5. Anzahl++;
    6. for (i,Anzahl;i<Anzahl;i++){
    8. document.getElementById("fields").innerHTML += "<tr><input type=\"file\" value=\"\" name=\"Feld\" ></tr>";
    9. }
    12. }
    13. function plusEins() {
    14. document.getElementById("fields").innerHTML += "<tr><input type=\"file\" value=\"\" name=\"Feld\" ></tr>";
    15. }
    18. function minusEins() {
    19. ????
    20. }
    Alles anzeigen

    Habs mit verschieden Versionen mit pop() versucht aber hat noicht funktioniert
    Die Dateifelder sind ja alle getElementsByName("Feld")[sounsovieltes], dacht mir mit pop kann ich das letzte einfach löschen...
    Aber kann da irgendwie nicht drauf zugreifen auch nicht mit .length und dann das letzte einfach .innerHTML="";
    jmd ne idee?

  • pop() ist eine Array Funktion. Mit innerHTML += "String" kaskadierst du jedoch nur den Inhalt eines Elements.

    Mit getElementsByTagName() kannst du dir die <tr>s jedoch wieder in ein Array laden und dann mit removeChild wieder entfernen.
    * http://de.selfhtml.org/javascript/objekte/node.htm#remove_child
    * http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_tag_name

    Oder aber du vergibst den Zeilen eigene IDs - dann kannst du sie direkt ansprechen.

  • Jo mit eigener Id wollte ich es auch versuchen, aber irgendwie ging das nicht...
    So hatte ich es versucht:

    Quellcode

    1. function addField() {
    2. id = document.getElementById('Anzahl').value;
    3. document.getElementById("fields").innerHTML = "";
    4. var i = 1;
    5. id++;
    6. for (i,id;i<id;i++){
    7. var name2= "Feld"+i;
    8. alert(name2);
    9. document.getElementById("fields").innerHTML += "<tr><input value=\"\" name=name2 id=name2 ></tr>";
    10. }
    11. document.getElementById("Feld3").value="test";
    12. document.getElementsByName("Feld3").value="test";
    13. }
    Alles anzeigen

  • Zum Syntaxfehler:
    Da das oben so wunderbar funktioniert hat, mach ichs wieder mit einem Beispiel

    Quellcode

    1. var x = "Text"+Variable+"Text";


    Dennoch war deine letzte Lösung besser. Wenn du mit den IDs arbeiten willst, brauchst du einen globalen Zähler, der außerhalb der Methode deklariert ist. Das mit dem leeren und neu Befüllen mit for-Schleifen hat keinen Sinn.

  • Jo hatte alles super geklappt auch mit dem removeChild bis ich auf eine absolut seltsame Sache gestoßen bin!
    Javascript behauptet nämlich standhaft, dass z.B 9 > 10 ist während er aber richtig erkennt dass 11 > 10 ist und 8 < 9! aber sobald es zweistellig wird passiert da irgendetwas komisches. Da muss irgendwas mit einer kommastelle oder so sein, dass er statt 25 2,5 liest. Weil 25 größer als 2 ist, aber 25 < als 3 sein soll...
    Hab aber schon alles ausprobiert mit int, parseint usw ohne Erfolg... Da muss irgendwas grundlegendes falsch sein
    Meine Option Box

    Quellcode

    1. .
    2. .
    3. .
    4. <option value="9">9</option>
    5. <option value="10">10</option>
    6. .
    7. .
    8. .


    und so wird das ausgelesen:

    Quellcode

    1. a = document.getElementById('OptionBox(AktuellerWert)').value;
    2. o = document.getElementById('VorherigerWert').value;
    4. if (a<o) {
    5. alert(a+"ist kleiner "+o);
    6. document.getElementById('VorherigerWert').value=a;
    7. }
    9. if (a>o) {
    10. alert (a+" ist bigger als "+o);
    11. document.getElementById('VorherigerWert').value=a;
    12. }
    Alles anzeigen

    wie gesagt hab da schon verschiedene Möglichkeiten a und o auszulesen angewandt als int, zuerst string dann int usw... auch hab ich alles erstmal mal 10 und dann anschließend wieder durch 10 geteilt, aber dann ist halt 100<90 das Problem bleibt
    auch wenn ich statt 9 9.0 mach :?

  • Ich würde runde Klammern nicht unbedingt in einem Formularelement verwenden. Keine Ahnung ob das funktioniert.
    Die Ausgaben mit "ist kleiner" bzw. "ist bigger" erhältst du aber, oder?

    Noch eine weitere Methode:
    Zum parsen, kannst du auch einfach eval'n (nicht unbedingt die sauberste Möglichkeit)

    Quellcode

    1. a = eval(document.getElementById('...').value);

  • So fertig und funktioniert wunderbar Testweise noch mit normalen Inputfeldern statt file fields!
    Eine kleine Sache ist noch und zwar in der Funktion Plus() wie bekomme ich denn da um das neue inputfeld noch ein <tr>...</tr> rum?

    Quellcode

    1. <html><head>
    2. <script type="text/Javascript">
    3. <!--
    5. function addField() {
    6. Anzahl = document.getElementById('Anzahl').value;
    7. Anzahl_old = document.getElementById('hidden').value;
    9. if (Anzahl_old == "0") { //Erster Durchlauf (noch mit innerHTML)
    12. for (i=1;i<=Anzahl;i++){
    13. var name2= "products_attributes_filename"+i;
    15. document.getElementById("fields").innerHTML += "<tr><input value="+i+" name="+name2+" id="+name2+" ></tr>";
    16. }
    17. document.getElementById('hidden').value = Anzahl;
    19. }
    20. else {
    22. updateField(); //ab dem 2ten Durchlauf
    23. }
    24. }
    25. function updateField(){
    27. a = eval(document.getElementById('Anzahl').value);
    28. o = eval(document.getElementById('hidden').value);
    30. if (a<o) { //Neue Zahl der File Fields ist kleiner als die Alte -> es muessen welche gel&ouml;scht werden!
    32. for (i=o;i>a;i--){
    34. minus(i);
    35. }
    37. document.getElementById('hidden').value=a;
    38. }
    40. if (a>o) { //Neue Zahl der File Fields ist groesser als die Alte -> es muessen welche angef&uuml;gt werden!
    42. for(i=o;i<a;i++){
    43. plus();
    44. }
    46. }
    47. }
    49. function plus() { //eine <input dazu
    50. Anzahl = document.getElementById('hidden').value;
    52. Anzahl++;
    53. var name2= "products_attributes_filename"+Anzahl;
    55. var newInput = document.createElement("input");
    56. Erstellt = document.getElementById("fields").appendChild(newInput);
    57. Erstellt.setAttribute("id", name2, 0);
    58. Erstellt.setAttribute("value", Anzahl, 0);
    59. //Erstellt.setAttribute("type", "file", 0);
    61. document.getElementById('Anzahl').value= Anzahl;
    62. document.getElementById('hidden').value= Anzahl;
    63. }
    65. function minus() { //eine <input weniger
    66. Anzahl = eval(document.getElementById('hidden').value);
    67. if (Anzahl > 1 ) {
    69. de = document.getElementById('fields').lastChild;
    70. var Felder = document.getElementById("fields");
    71. Felder.removeChild(de);
    73. Anzahl--;
    76. document.getElementById('Anzahl').value = Anzahl;
    77. document.getElementById('hidden').value = Anzahl;
    78. }
    79. }
    82. //-->
    83. </script>
    84. </head>
    86. <body>
    88. <td>
    89. <p id="Dateien">Anzahl der Seiten</p>
    90. <input type="button" onClick="plus()" value="+">
    91. <input type="button" onClick="minus()" value="-">
    92. </td>
    93. <td>
    95. <select name="Anzahl" size="1" onChange="addField()" id="Anzahl">
    97. <option value="1">1</option>
    98. <option value="2">2</option>
    99. <option value="3">3</option>
    100. <option value="4">4</option>
    101. <option value="5">5</option>
    102. <option value="6">6</option>
    103. <option value="7">7</option>
    104. <option value="8">8</option>
    105. <option value="9">9</option>
    106. <option value="10">10</option>
    107. <option value="11">11</option>
    108. <option value="12">12</option>
    109. <option value="13">13</option>
    110. <option value="14">14</option>
    111. <option value="15">15</option>
    113. </select>
    115. <div id="fields" ></div>
    117. <td>
    118. <input id="hidden" value="0" type="hidden">
    119. </td>
    120. </td>
    122. </body>
    Alles anzeigen