<Form> bei änderung erweitern
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abhilfe
bild
breit code
code
datum
dom
eingabe
ende
erweitern
feld
folgendem code
formular
gesamte objekt
grund
hilfreiche antwort
input
objekt
text
url
verhindern
-
Hey,
ich muss bei einer Webseite ein Formular schreiben das sich um ein file input feld erweitert immer wenn man eine datei im vorherigen feld auswählt. Klingt ja eigentlich nich schwer, leider leert sich mein formular immer wenn ein neues input feld dazu kommt :/
mein code:
fields = 2; function addInput(feld) { if (feld >= fields-1){ document.getElementById('tBody').innerHTML += "<tr><td style='vertical-align: top;'><legend>Bild "+ fields +":</legend> </td><td><input type='file' name='bild_"+ fields +"' onchange='addInput("+ fields +");'></td></tr>"; fields += 1; } }
<form action="" method="post" enctype="multipart/form-data"> <div id="linkadvanceddiv" class="postbox"> <div style="float: left; width: 98%; clear: both;" class="inside"> <table cellpadding="5" cellspacing="5"> <tbody id="tBody"> <tr> <td><legend>Title*:</legend></td> <td><input name="titel" class="input" size="40" value="" type="text"></td> </tr> <tr> <td style="vertical-align: top;"><legend>Text*:</legend></td> <td><textarea name="input_text" class="input" rows="5" cols="50"></textarea></td> </tr> <tr> <td style="vertical-align: top;"><legend>Thumbnail (220x140px)*:</legend></td> <td><input type="file" name="thumbnail"></td> </tr> <tr> <td style="vertical-align: top;"><legend>Bild 1 (720px Breit)*:</legend></td> <td><input type="file" name="bild_1" onchange="addInput(1);"></td> </tr> </tbody> </table> </div> <div style="clear: both; height: 1px;"> </div> </div> <input name="save" class="button bold" value="Hinzufügen" type="submit"> </form>
ich hab schon versucht alle daten vor dem hinzufügen in ein array zu speichern und danach dann wieder in das formular ein zu tragen aber ich komm leider nicht an die dateipfade :/
kann jemand helfen?
Lg,
Raff
Beitrag zuletzt geändert: 16.12.2011 9:44:43 von raff -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Um Missbrauch zu verhindern, wird es in einigen Browsern unterbunden, auf den Dateipfad zuzugreifen.
Erstelle doch am Ende des Formulars einen Link, mir dem man es erweitern kann.
Till -
tillpro schrieb:
Um Missbrauch zu verhindern, wird es in einigen Browsern unterbunden, auf den Dateipfad zuzugreifen.
Erstelle doch am Ende des Formulars einen Link, mir dem man es erweitern kann.
Till
An einen extra link habe ich auch schon gedacht aber leider bleibt dann immernoch das problem das alle daten die man vorher eingetragen hat gelöscht werden :/ -
tillpro schrieb:
Um Missbrauch zu verhindern, wird es in einigen Browsern unterbunden, auf den Dateipfad zuzugreifen.
Wenn man nicht versucht auf den Dateipfad zuzugreifen gibt es auch keinen Grund den Inhalt eines Feldes zu löschen.
Der Grund liegt ganz wo anders: wenn du mit
etwas veränderst wird das gesamte Objekt neu ausgewertet (alles was in innerHTML steht), daher gehen schon getätigte Eingaben verloren (deren Elemente in innerHTML enthalten sind). Abhilfe schafft der DOM.objekt.innerHTML += "text";
Mit folgendem Code funktioniert alles:<script type="text/javascript"><!-- var fields = 1; function addInput(evt) { var field = this.id; if(field >= fields) { fields += 1; var table = document.getElementById('tBody'); var row = document.createElement('tr'); var desc = document.createElement('td'); desc.style = 'vertical-align: top;'; var legend = document.createElement('legend'); var legendtext = document.createTextNode('Bild ' + fields + ':'); legend.appendChild(legendtext); desc.appendChild(legend); row.appendChild(desc); var upload = document.createElement('td'); var uploadfield = document.createElement('input'); uploadfield.type = 'file'; uploadfield.name = 'bild_' + fields; uploadfield.id = fields; uploadfield.onchange = addInput; upload.appendChild(uploadfield); row.appendChild(upload); table.appendChild(row); } } // --></script> <form action="http://www.relaunch.gobasil.com/wp-admin/admin.php?page=Konzept" method="post" enctype="multipart/form-data"> <div id="linkadvanceddiv" class="postbox"> <div style="float: left; width: 98%; clear: both;" class="inside"> <table cellpadding="5" cellspacing="5"> <tbody id="tBody"> <tr> <td><legend>Title*:</legend></td> <td><input name="titel" class="input" size="40" value="" type="text"></td> </tr> <tr> <td style="vertical-align: top;"><legend>Text*:</legend></td> <td><textarea name="input_text" class="input" rows="5" cols="50"></textarea></td> </tr> <tr> <td style="vertical-align: top;"><legend>Thumbnail (220x140px)*:</legend></td> <td><input type="file" name="thumbnail"></td> </tr> <tr> <td style="vertical-align: top;"><legend>Bild 1 (720px Breit)*:</legend></td> <td><input type="file" id="1" name="bild_1"></td> </tr> </tbody> </table> </div> <div style="clear: both; height: 1px;"> </div> </div> <input name="save" class="button bold" value="Hinzufügen" type="submit"> </form> <script type="text/javascript"><!-- document.getElementById('1').onchange = addInput; // --></script> -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
