How do I use JavaScript to grow an HTML form?

Answer 1

You could use the DOM to dynamically insert the file inputs

var myTd = /* Get the td from the dom */

var myFile = document.createElement('INPUT');
myFile.type = 'file'
myFile.name = 'files' + i; // i is a var stored somewhere
i++;

myTd.appendChild(myFile);

OR you can use this

http://developer.yahoo.com/yui/examples/uploader/uploader-simple-button.html

Answer 2

There might be a better way, but I did this client side by creating a set of HTML form elements and then hiding/showing the rows using JavaScript to update the CSS class.

EDIT: I'll leave this here as an alternate method but I like the idea of adding INPUT elements through the DOM better.

Answer 3

if you are already using jQuery you could take a look here too. It says somewhere to make file uploads sexy :) I found it funny :)

Answer 4

You probably don't want to replace the anchor, just insert something in front of it.

I use Prototype for things like this, because it irons out a lot of browser inconsistencies, particularly around forms and tables.

Using Prototype, it would look something like this:

function insertFileField(element, index) {
    element.insert({
        before: "<input type='file' name='Attachment" + index + " class='textinput'>"
    });
}

// And where you're hooking up your `a` element (`onclick` is very outdated,
// best to use unubtrustive JavaScript)
$('attachlink').observe('click', function(event) {
    event.stop();
    insertFileField(this, this.up('form').select('input[type=file]').length + 1);
});

...the bit at the end finds the form containing the link, finds out how many inputs of type file there are, and adds one for the index.

There are other ways as well, via the Element constructor provided by Prototype, but text works quite well (in fact, it's usually much faster).

It would be similar, though slightly different, with jQuery, MooTools, YUI, Glow, or any of the several other JavaScript frameworks.