✔ Teil eines Formulars klonen

K

kN0k_kN0k

Grünschnabel
Hallo,
Ich stehe vor folgendem Problem,
ich möchte das mein Uplaodscript
dynamisch mit Uploadfeldern erweitert wird
und zwar abhängig von der Zahl die ich in einem Input-Feld
eingebe...

Hier erstmal mein Formular:

PHP: 
<form enctype=\"multipart/form-data\" action=\"".$_SERVER['PHP_SELF']."?section=admin&subm=gallery\" method=\"POST\">
						<input type=\"hidden\" name=\"formsend\" value=\"gallery\" />
						<input type=\"hidden\" name=\"MAX_FILE_SIZE\" value=\"500000\" />
						<p><input type=\"text\" name=\"anz\" size=\"4\" maxlength=\"2\" /> <input value=\"Hinzuf&uuml;gen\" type=\"button\" /></p>
						<div>
							<p><input type=\"file\" name=\"file[]\" /></p>	
						</div>
						<p><input type=\"submit\" value=\"hochladen\" /></p>
					</form>

Das in dem div-Block soll geklont werden.
Ich war natürlich nicht untätig und hab schon
einige vorhandene Lösungsvorschläge ausprobiert
und versucht anzupassen, aber wegen meiner doch
geringen Javascript Kenntnisse bin ich daran gescheitert :/ .
Ich möchte hier auch nicht unbedingt eine komplett fertige Lösung,
es würde mir schon ein Ansatz oder ein paar Tips was ich beachten
muss um wenigstens eine Kopie erstellen zu können, reichen.

LG
 
Hallo!

Das einfachste wäre eine feste Anzahl fest im Code zu schreiben und auszublenden (mit display: none) und wenn ein weiteres benätigt wird, das dann einfach einblenden.

Die 2. Lösung wäre mit document.createElement() ein neues Element zu erzeugen. Hab' jetzt leider grad keinen Beispielcode bereit, aber vielleicht hilft dir das schonmal!
 
Eine andere möglichkeit wäre noch der Onchange Eventhandler hier mal der Codeschnippsel dazu.

Code: 
<html>
<head>
<script type="text/javascript">
   window.onload = function () {
         document.getElementById('uploadNumber').onchange = function () {
         var currentUploadFields = 0;
						
         with(document.getElementById('fileFields')) {
				
             for(var i = 0 ; i < childNodes.length;i++) {
                 if(childNodes[i].nodeName == 'INPUT') {
                     currentUploadFields++;
                 }
             }
				
             var newUploadFields = document.getElementById(this.id).value;
				
				
          if( newUploadFields > currentUploadFields) {
              for(var i = 0 ; i < newUploadFields-currentUploadFields;i++) {
                  var newField = document.createElement('input');
                       newField.type = 'file';
					
                       appendChild(newField);
						
                 }
           } else if (newUploadFields < currentUploadFields) {
              for(var i = currentUploadFields ; i > newUploadFields ; i--) {
                      removeChild(childNodes[i]);
              }					
          }
      }
   }
}
</script>
</head>
<body>
<form method="post" action"#">
	<input type="text" id="uploadNumber"></input>
	<div id="fileFields">
		<input type="file"></input>
	</div>
</form>
</body>
</html>

Vorgehensweise hier , sobald sich der Wert des feldes mit der ID uploadNumber ändert nun werden alle aktuellen input file Felder eingesammelt erstmal. Das heisst wir gehen zu den DIV Layer fileFields und sammeln alle Kinder ein die als tag namen input haben und speichern diese in der variablen currentUploadFields ab.

Den wert der eben eingegeben wurde , wird in der Variablen newUploadFields gespeichert.

Sollte die Anzahl der neuen UploadFelder > als die Anzahl der aktuellen Input felder werden solange Felder hinzugefügt wie die Differenz zwischen beiden ist.
Sollte die Anzahl der alten upload Felder grösser sein als die neue Anzahl , dann nehmen wir die Anzahl der aktuellen Felder als Start wert und löschen diese Knoten wieder raus einfach, so lange deren Anzahl nicht der Anzahl der neuen Felder entspricht.

Das Prinzip sollte das gleiche bleiben egal ob man einen onclick auf einen Button setzt oder den Onchange nimmt.

CSS Formatierung müsstest du dann selber vor nehmen.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück