How to get value of document.getElementById('###') DYNAMIC

JavaScript
1

Hello,

I have a upload site… I have styled the <input type=file /> with css and javascript… and i also have ADD MORE option when clicked a box below of input file gets added wrapped in div file_wrapper… code here…

<div id="file_wraper0">
<div id="divinputfile">
<input type="file" onchange="document.getElementById('fakefilepc').value = this.value;" id="filepc" size="30" name="filepc"/>
<div id="fakeinputfile"><input type="text" id="fakefilepc" name="fakefilepc"/></div>
</div>
</div>

<div id="file_wraper1">
<div id="divinputfile">
<input type="file" onchange="document.getElementById('fakefilepc').value = this.value;" id="filepc" size="30" name="filepc"/>
<div id="fakeinputfile"><input type="text" id="fakefilepc" name="fakefilepc"/></div>
</div>
</div>

now the problem is whenever a file is selected with browse button the value is updated in first fakefilepc element… is there anyway to have document.getElementById(‘this element’) something so that it updates value of that particular div wrapper.

Note: Every content between <div id=“file_wraper”> stays static.

Thank You.

Regards,

Shishant Todi.

2

That’s happening because the name and id of each file element is the same.
The id and quite likely the name, of the file elements will need to be different for things to work for you.

Show us the code you’re using to to add another file, and we should be able to you how to make it work properly.

3

The code just adds a <div id="file_wraper [with no.] "> below… i tried using

 <input type="file" onchange="this.nextSibling.firstChild.value = this.value" id="filepc" size="30" name="filepc"/>
<div id="fakeinputfile">
<input type="text" id="fakefilepc" name="fakefilepc"/>
</div>

It gets the value properly, but when i click on upload it says please select an file to upload.

4

Depending on what browser you’re using, nextSibling could be the div element, or it could be the whitespace between the input field and the div.

The following should see you right.


function updateFakeFile(el) {
	var filename = el.value;
	el = el.nextSibling;
	while (el && el.nodeType !== 1) {
		el = el.nextSibling;
	}
	if (el) {
		el.getElementsByTagName('input')[0].value = filename;
	}
}

It goes to the next sibling, but if that next one is whitespace or anything than an actual element, it keeps going to the next sibling until it either runs out or it finds an element.

If it runs out then there’s no point in carrying on, but if it does find one (as it should) then it takes the first input it finds inside there and gives it the filename that was just updated.

Use “updateFakeFile(this)” on the file update event to make it work.

5

Thank You …very very very much.

6