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() :P )

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() :P )
Havent done one yet but thanks :P

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 :D thanx alot for the code :D

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!! :D