Page 2 of 2
Posted: Mon Dec 05, 2005 2:56 pm
by foobar
I give up. I surrender.
Code: Select all
if (el.childNodes.item(i).id == nodeID) break;
^JS doesn't like it for some reason. There is never an id here: el.childNodes.item(i).id . It's usually undefined. What bogus.
Posted: Mon Dec 05, 2005 3:16 pm
by markg85
aargh.. i must be a complete n00b.. i can`t get it working even with the clear directions you gave..
this is the code i have now.. what did i do wrong?
Code: Select all
<!--
function addFileBox(elementID)
{
el = document.getElementById(elementID); //Get the parent element Node
var appenderInput = document.createElement('input'); //Create a new <input /> element
appenderInput.name = 'theFile[]'; //Give it a <input name="theFile[]" /> attribute
appenderInput.type = 'file'; //Give it <input type="file" name="theFile[]" />
var appenderDiv = document.createElement('div');
appenderDiv.appendChild(appenderInput);
appenderDiv.innerHTML += '<a href="javascript:delFileBox(\'fileContainer\', this.parentNode);">[ Delete ]</a>';
el.appendChild(appenderDiv); //Add our newly created <input /> element to the parent node
}
function delFileBox(elementID, this.parentNode)
{
el = document.getElementById(elementID); //Get the parent element Node
el.removeChild(this.parentNode);
}
// -->
problem: not adding nor deleting :S
Posted: Mon Dec 05, 2005 3:31 pm
by Chris Corbyn
Code: Select all
<script type="text/javascript">
<!--
function addFileBox(elementID)
{
el = document.getElementById(elementID); //Get the parent element Node
var appenderInput = document.createElement('input'); //Create a new <input /> element
appenderInput.name = 'theFile[]'; //Give it a <input name="theFile[]" /> attribute
appenderInput.type = 'file'; //Give it <input type="file" name="theFile[]" />
var appenderDiv = document.createElement('div'); //New <div /> to hold the row
appenderDiv.appendChild(appenderInput); //Put our <input /> into the new <div />
var appenderLink = document.createElement('span'); //Anchors don't work so well with DHTML so we'll fake it with <span />
appenderLink.setAttribute('onclick', 'delFileBox(this)'); //Give it an onclick event so it behaves like a href
appenderLink.style.cursor = 'pointer'; //Make the cursor a pointer so its more obvious
appenderLink.innerHTML += '[ Delete ]'; //Text for the "fake" link
appenderDiv.appendChild(appenderLink); //Add the "fake" link to the <div />
el.appendChild(appenderDiv); //Add our newly created <input /> element to the parent node
}
function delFileBox(elementNode)
{
/*
Fetch the parent of the parent of the fake link (the outer div)
Fetch the parent of the div (the actual row)
Delete the rwo from the outer div
*/
elementNode.parentNode.parentNode.removeChild(elementNode.parentNode);
}
// -->
</script>
EDIT | Put it in php tags for you so it's easier to read the comments
http://www.w3style.co.uk/devnet/uploader3.html
Posted: Mon Dec 05, 2005 3:34 pm
by foobar
Thanks for the DOM "tutorial", d11. I'll use it as reference for later use. (I usually limit myself to using document.getElementById()

)
Posted: Mon Dec 05, 2005 3:36 pm
by Chris Corbyn
foobar wrote:Thanks for the DOM "tutorial", d11. I'll use it as reference for later use. (I usually limit myself to using document.getElementById()

)
Havent done one yet but thanks
I'll post a full length one with sections some time during the week when I get a chance. It's a fair thing to take in I guess

Posted: Tue Dec 06, 2005 1:34 pm
by markg85
awsome

thanx alot for the code

Posted: Sat Dec 24, 2005 11:21 am
by markg85
sorry for "waking up" this thread again but i run into trouble with this nice script
what am i trying to do? now i`m trying to upload files with it.. it all goos fine as long as i use the first form field. Ik i add another one by pressing the link it`s just not showing up in php`s $_FILES variable..
This is how i look at the files:
Code: Select all
foreach ($_FILES["theFile"]["error"] as $key => $error)
{
echo $tmp_name = $_FILES["theFile"]["tmp_name"][$key]."<br>";
echo $name = $_FILES["theFile"]["name"][$key]."<br>";
}
and the code of the form thing was this:
Code: Select all
<html>
<head>
<title>Multiple file uploader</title>
<script type="text/javascript">
<!--
function addFileBox(elementID)
{
el = document.getElementById(elementID); //Get the parent element Node
var appenderInput = document.createElement('input'); //Create a new <input /> element
appenderInput.name = 'theFile[]'; //Give it a <input name="theFile[]" /> attribute
appenderInput.type = 'file'; //Give it <input type="file" name="theFile[]" />
var appenderDiv = document.createElement('div'); //New <div /> to hold the row
appenderDiv.appendChild(appenderInput); //Put our <input /> into the new <div />
var appenderLink = document.createElement('span'); //Anchors don't work so well with DHTML so we'll fake it with <span />
appenderLink.setAttribute('onclick', 'delFileBox(this)'); //Give it an onclick event so it behaves like a href
appenderLink.style.cursor = 'pointer'; //Make the cursor a pointer so its more obvious
appenderLink.innerHTML += '[ Delete ]'; //Text for the "fake" link
appenderDiv.appendChild(appenderLink); //Add the "fake" link to the <div />
el.appendChild(appenderDiv); //Add our newly created <input /> element to the parent node
}
function delFileBox(elementNode)
{
/*
Fetch the parent of the parent of the fake link (the outer div)
Fetch the parent of the div (the actual row)
Delete the rwo from the outer div
*/
elementNode.parentNode.parentNode.removeChild(elementNode.parentNode);
}
// -->
</script>
</head>
<body>
<div style="width: 500px; padding: 10px; background: #BBBBFF; border: 1px solid #CCCCCC;">
<div id="fileContainer" style="padding: 10px; background: #F5F5F5;">
<input type="file" name="theFile[]" />
</div>
<div style="padding: 10px; background: #F5F5F5;">
<a href="javascript:addFileBox('fileContainer');">Click here to add another file</a>
</div>
</div>
</body>
</html>
some more help please

i couldn`t find anything wrong in the foreach loop so i`m afraid that there might be something wrong in the javascript coding... but as far as i have javascript knowledge i can`t see anything wrong..
btw..
Merry Christmas and a happy new year to you all!! 