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

Posted: Sun Sep 25, 2005 7:31 am
by AndrewBacca
Nevermind
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
P.S thx for all ya help, life saves!

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.