Question

So, what I’m trying to do is both add multiple text fields and upload multiple files. The user should only see 1 field for uploading until having clicked it, and it is browsing for the file. Same goes for the text-fields. When a user clicks or starts typing in the text field the next will appear. I have so far had no luck in accomplishing my goal. I’m just starting with JavaScript so my code is badly broken, and not even worth posting.

What are the different ways of doing this and do you know the pros and cons?

Edit: This is one of the many ways I tried to do it.

<form name="form">
<label for="file">Filename:</label>
<input type="file" name="file[0]" id="file[0]" onclick="addForm()" />
</form>
<br />

<script type="text/javascript">

var part1 = '<label for="file">Filename:</label> <input type="file" name="file[';
var part2 = ']" id="file[';
var part3 =']" onclick="form()" /><br />'

var counter = 0;

function addForm()
{

if (document.form.file[counter].click) 
{
        document.write(part1 + counter + part2 + counter + part3);
        counter++;

}
}
</script>

Answer 1

Here’s a quick solution: http://jsfiddle.net/JTDZR/

It will add a new file input when a file is selected for the currently active file input, then it will disable the current file input, so only one is enabled at a time.

HTML

<form id="fups" name="form">
<label>
    Filename: <input type="file" name="file[]" />
</label>
</form>​

JS

var fups = document.getElementById("fups");
var file = document.form['file[]'];

fups.onchange = function(){
    file.disabled = true;
    var inp = document.createElement("input");
    inp.type = "file";
    inp.name = "file[]";
    var lab = document.createElement("label");
    lab.innerHTML = "Filename: ";
    lab.appendChild(inp);

    fups.appendChild(lab);
    file = inp;
};