Creating File fields on the fly
Moderator: General Moderators
- AndrewBacca
- Forum Commoner
- Posts: 62
- Joined: Thu Jan 30, 2003 10:03 am
- Location: Isle of Wight, UK
Creating File fields on the fly
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
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
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.
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.
- AndrewBacca
- Forum Commoner
- Posts: 62
- Joined: Thu Jan 30, 2003 10:03 am
- Location: Isle of Wight, UK
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.
- Maugrim_The_Reaper
- DevNet Master
- Posts: 2704
- Joined: Tue Nov 02, 2004 5:43 am
- Location: Ireland
- AndrewBacca
- Forum Commoner
- Posts: 62
- Joined: Thu Jan 30, 2003 10:03 am
- Location: Isle of Wight, UK
- AndrewBacca
- Forum Commoner
- Posts: 62
- Joined: Thu Jan 30, 2003 10:03 am
- Location: Isle of Wight, UK
Nevermind 
A slight improvement of your script you posted
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!
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>You can set max files and a prefix for the field name
Andrew
P.S thx for all ya help, life saves!
Last edited by AndrewBacca on Sun Sep 25, 2005 7:45 am, edited 1 time in total.