Clone file upload input filed in form with jquery

clone, file-upload, input, javascript, jquery

Solution

You're not selecting the `<li>` element. Also, your anchor needs a hash to prevent it from trying to resolve a url

jsFiddle

HTML

<ul>
    <form enctype="multipart/form-data" action="" method="post">
        <li>Choose a file to upload:</li>
        <li><input name="uploadedfile" type="file" size="40" /></li>
        <li><a href="#" id="add-more-files">Add file upload box</a></li>
        <li><input type="submit" value="Upload File" /></li>
    </form>
</ul>

JS

$(function () {
   //clone file upload box
   $('#add-more-files').click(function() {
      var cloned = $(this).parent().prev().clone();
      cloned.val(null);
      $(cloned).insertBefore($(this).parent());
   });
});

​

Problem

I am making an upload form and I want users to add more input file fields to the form if they require using jquery if they want to upload more than one file. This is the code I have so far below that isn't working. You can also see this on js fiddle: http://jsfiddle.net/benpaton/JUJxn/ Thanks in advance. ``` $(function () { $('#add-more-files').click(function() { var cloned = $(this).prev().clone(); cloned.val(null); $(cloned).insertBefore($(this)); }); }); <ul> <form enctype="multipart/form-data" action="" method="post"> <li>Choose a file to upload:</li> <li><input name="uploadedfile" type="file" size="40" /></li> <li><a href="" id="add-more-files">Add file upload box</a></li> <li><input type="submit" value="Upload File" /></li> </form> </ul> ```

Original source