JS help...

[Sim]

I am trying to add a new upload field to my form. Its not working to well ;(. Here's what I got.

my JS:

Code: [Select]

<script type="text/javascript" language="javascript">    function addNewUploadField() { document.getElementById("files").appendChild("Test<br>"); } </script>
my HTML:

Code: [Select]

<div id="files"></div>
<tr>
  <td><strong></strong></td>
  <td><label><input type="submit" name="SubmitForm" value=" Go " /></label></td>
</tr>
  </table>
</form>
<a href="#" onclick="addNewUploadField()">Add Another File</a>


[LuckyD0g]

This should work

Code: [Select]

<script type="text/javascript" language="javascript">
    function addNewUploadField() { document.getElementById("files").innerHTML+="Test<br>"; }
</script>

[Sim]

Heres how I did it

HTML:

Code: [Select]

            <form name="form1" id="form1" method="post" action="" enctype="multipart/form-data">
            <input id="fileCount" type="hidden" name="hidden" value="2" />
            <table width="100%" border="1" id="fileTable">
                <tr>
                    <td>
                        <strong>Image #1</strong>
                    </td>
                    <td>
                        <label>
                            <input type="file" name="file1" id="file1" /></label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <strong>Image #2</strong>
                    </td>
                    <td>
                        <label>
                            <input type="file" name="file2" id="file2" /></label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <strong></strong>
                    </td>
                    <td>
                        <label>
                            <input type="submit" name="SubmitForm" value=" Go "></label>
                    </td>
                </tr>
            </table>
            </form>
            <a onclick="addNewUploadField()">Add Another File</a>
JS

Code: [Select]

var imgIndex = 3;

function addNewUploadField() {
    $('#fileTable tr:last').before('<tr><td><strong>Image #' + imgIndex + '</strong></td><td><label><input type="file" name="file' + imgIndex + '" id="file' + imgIndex + '" /></label></td></tr>');
    $('#fileCount').val(imgIndex);
    imgIndex++;
}


[Nox]

It's much more convenient to use name="someName[]" ... then the contents are automatically put into array and there's also no need for name="fileCount" since you can use count()