Question

I’m creating a simple web application with which a user may author a message with attached files.

multiple HTML file inputs with jQuery link http://img39.imageshack.us/img39/4474/attachments.gif

That “attach another file” link does not yet work. When clicked, it should add an additional table row and file input control to the form.

<tr id="fileinput0">
    <td>Attachments</td>
    <td>
        <input type="file" name="Attachment0" id="Attachment0" />
    </td>
</tr>
<tr id="fileinput1">
    <td></td>
    <td>
        <input type="file" name="Attachment1" id="Attachment1" />
    </td>
</tr>
<tr id="addinput">
    <td></td>
    <td>
        <a href="#">attach another file</a>
    </td>
</tr>

It should also increment the number: fileinput2, Attachment2; fileinput3, Attachment3; etc.

How can I do this with jQuery?

Answer 1

I moved it around so it was all within a single table row:

<tr>
    <td>Attachments (<a id="addinput" href="#">add</a>)</td>
    <td id="fileinputs">
        <input type="file" name="Attachment0" id="Attachment0" />
    </td>
</tr>

And used this jQuery:

<script type="text/javascript">
    $(document).ready(function() {
        var num = 0;
        $("#addinput").click(function() {
            num++;
            $("#fileinputs").append("<br /><input type=\"file\" name=\"Attachment" + num + "\" id=\"Attachment" + num + "\" />");
        });
    });
</script>

It now looks like this:

multiple HTML file inputs with jQuery link http://img43.imageshack.us/img43/4474/attachments.gif