kostenloser Webspace werbefrei: lima-city


<Form> bei änderung erweitern

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    raff

    raff hat kostenlosen Webspace.

    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;">&nbsp;</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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. 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
  4. Autor dieses Themas

    raff

    raff hat kostenlosen Webspace.

    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 :/
  5. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    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
    objekt.innerHTML += "text";
    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.
    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;">&nbsp;</div>
    						</div>
    			            <input name="save" class="button bold" value="Hinzufügen" type="submit">
    					</form>
    <script type="text/javascript"><!--
    	document.getElementById('1').onchange = addInput;
    // --></script>
  6. Autor dieses Themas

    raff

    raff hat kostenlosen Webspace.

    Perfekt :)
    Funktioniert super, danke für die schnelle und hilfreiche Antwort!
  7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!