Javascript - adding controls to a form via a span

[skagg]

Hi,

I m currently trying to make a form which follows the sort of same idea as attaching files for gmail. I ve found a site with an example script on:
http://gavin.panicus.org/downloads/gmail_file_attachment.html

My idea is to get all of the files to upload however I cant seem to understand how to get this to work, I m trying to pass all of the files to a java servlet with commons-upload but the files arent getting passed to the servlet. I dont think this is a problem with the servlet as I ve printed out all of the params I m getting and havent got a single one relating to the input files.

So basically my form is this:
<form method=post action=Condor ENCTYPE="multipart/form-data" width=300 name="theForm" onSubmit="return checkForm()">
Enter your username: <input type=text name=username><br/>
<fieldset>
Select Executable: <input type="file" name="executable"><br/>
<span id="inputfiles"></span>
<p id="more" class="add" onclick="add();">Attach a file</p>
</fieldset>
<input type="submit" name="action" value="Submit" />
</form>

I m guessing this is a java script/html error but don't really see why? Is there a problem with having spans inside forms or is the javascript doing something which is preventing the files from reaching the servlet.

Many Thanks in advance, below is the code from the site I got the add file from.

Nathan

// Gmail File Attachment Clone
// (c) 2005, Gavin Lynch

//number of forms currently in < span id="content" > tree
var form_count = 0;

//add file attachment form and associated elements
function add()
{
//create new < img > element
var new_img = document.createElement('img');
//give element an id
new_img.setAttribute('id', 'child_attachment_img_' + form_count);
//set image source
new_img.setAttribute('src','file.png');
//set image alternative text
new_img.setAttribute('alt',' ');
//set image stylings
new_img.setAttribute('style', 'float: left;');
//append newly created element to < span id="content" > tree
document.getElementById('inputfiles').appendChild(new_img);

//create new < input > element
var new_attachment = document.createElement('input');
new_attachment.setAttribute('name', 'file_' + form_count);
//set element type
new_attachment.setAttribute('type', 'file');
//set element size
new_attachment.setAttribute('size', '48');
//append newly created element to < span id="content" > tree
document.getElementById('inputfiles').appendChild(new_attachment);

//create new < span > element
var new_text = document.createElement('span');
//give element an id
new_text.setAttribute('id','child_attachment_text_' + form_count);

//set element HTML to produce 'remove' text link
new_text.innerHTML = '<span class="remove" onclick="remove(' + form_count + ');">&nbsp;remove</span><br/>';

//append newly created element to < span id="content" > tree
document.getElementById('inputfiles').appendChild(new_text);

//increase the form count
form_count++;

//if an attachment has been added, change text to "Attach another file"
document.getElementById('more').innerHTML = 'Attach another file';
}