Creating File fields on the fly

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
AndrewBacca
Forum Commoner
Posts: 62
Joined: Thu Jan 30, 2003 10:03 am
Location: Isle of Wight, UK

Creating File fields on the fly

Post 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
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post 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>
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post 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>
Last edited by Weirdan on Sun Sep 25, 2005 5:12 am, edited 1 time in total.
User avatar
AndrewBacca
Forum Commoner
Posts: 62
Joined: Thu Jan 30, 2003 10:03 am
Location: Isle of Wight, UK

Post by AndrewBacca »

thank you both :)

I never near <button> was a tag LOL been doing html more years than I can count!
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post 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.
User avatar
Maugrim_The_Reaper
DevNet Master
Posts: 2704
Joined: Tue Nov 02, 2004 5:43 am
Location: Ireland

Post 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...
User avatar
AndrewBacca
Forum Commoner
Posts: 62
Joined: Thu Jan 30, 2003 10:03 am
Location: Isle of Wight, UK

Post by AndrewBacca »

too true, I am always teaching myself or being taught new things love it :D
User avatar
AndrewBacca
Forum Commoner
Posts: 62
Joined: Thu Jan 30, 2003 10:03 am
Location: Isle of Wight, UK

Post 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
Last edited by AndrewBacca on Sun Sep 25, 2005 7:45 am, edited 1 time in total.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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.
Post Reply