Page 1 of 1

Creating File fields on the fly

Posted: Sun Sep 25, 2005 4:23 am
by AndrewBacca
I am working on a big project at the moment and I am currently doing the AdminCP and I want to allow the user to add as many images as they like to an item, so this means I can "hard code" x amount of file fields.

I was just using gmail and saw that you can do this there, anyone got any ideas how to do this?

i.e. At a click of a link another field will load without reloading the page?

Cheers
Andrew

Posted: Sun Sep 25, 2005 4:39 am
by s.dot

Code: Select all

function newField(i) {
z = i+1;
document.gElementById("hiddenid").innerHTML = '<input type="text" name="'+z+'" size="20">';
}


// down to the html

<a href="#" onclick="newField(1);">Another field</a><BR>
<span id="hiddenid"></span>

Posted: Sun Sep 25, 2005 4:51 am
by Weirdan
It's done with javascript:

Code: Select all

<html>
  <head>
       <script type='text/javascript'>
       function addFileField(form, fieldName) {
           var file = document.createElement('input');
           file.type = 'file';
           file.name = fieldName;
           form.appendChild(file);
       }
       window.onload = function() {
           document.getElementById('theForm').getElementsByTagName('button')[0].onclick = function() {
              addFileField(this.parentNode, 'theFile[]');
           }
       }
       </script>
  </head>
  <body>
     <form id='theForm' method='post' action='upload.php'>
       <button>+</button>
     </form>
  </body>
</html>

Posted: Sun Sep 25, 2005 4:57 am
by AndrewBacca
thank you both :)

I never near <button> was a tag LOL been doing html more years than I can count!

Posted: Sun Sep 25, 2005 5:11 am
by Weirdan
AndrewBacca wrote:thank you both :)

I never near <button> was a tag LOL been doing html more years than I can count!
HTML 4.01 Specification wrote: Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to "image", but the BUTTON element type allows content.

Posted: Sun Sep 25, 2005 5:50 am
by Maugrim_The_Reaper
Should have seen the shin-kicking after I came across <label> ;) No harm to read through the specs from time to time, might find stuff you have missed in prior encounters...

Posted: Sun Sep 25, 2005 7:17 am
by AndrewBacca
too true, I am always teaching myself or being taught new things love it :D

Posted: Sun Sep 25, 2005 7:31 am
by AndrewBacca
Nevermind :D

A slight improvement of your script you posted

Code: Select all

<html>
	<head>
	<script type='text/javascript'>
		z = 0;
		maxfiles = 10;
		prefix = "file_";
		function newField() {
			z = z+1;
			filename = prefix + z;
			if (z > maxfiles)
			{
				alert ('You may only add ' + maxfiles + ' of files.');
			}
			else
			{
				document.getElementById("hiddenid").innerHTML += 'File ' + z + ' : <input type="file" name="'+filename+'" size="20"><br>';
			}
		}
	</script>
</head>
<body onload="newField();">
	<span id="hiddenid"></span><br>
	<a href="#" onclick="newField();">Another field</a><BR>
</body>
</html>
thought I would post it someone else may want to use it :)
You can set max files and a prefix for the field name :)

Andrew :D

P.S thx for all ya help, life saves! :D

Posted: Sun Sep 25, 2005 7:39 am
by feyd
I'd advise following createElement path (Weirdan's), not the innerHTML form (scrotaye's) as you will play better with the browser than was is intended by innerHTML.