0

I have the following code:

HTML

<label>File Upload: </label>
<input type="file" name="file[]" />

jQuery

$('#property_enquiry input[type=file]').change(function() {
    $('<input type="file" name="file[]">').insertAfter("input[type=file]");
});

What I want to happen is once the first file is added a new input is added underneath the current one. The above code works when adding the first file to create a second input, however when adding a second file a third input isn't created.

lethalMango
  • 4,433
  • 13
  • 54
  • 92

1 Answers1

1

Try this:

$('#property_enquiry input[type=file]').live('change', function() {
    $('<input type="file" name="file[]">').insertAfter("input[type=file]:last");
});

This will automatically work with newly added file inputs.

Try it here: http://jsfiddle.net/Lgmcz/

Arnaud Le Blanc
  • 98,321
  • 23
  • 206
  • 194
  • Thanks, just tried that. It seems to do it in multiples, once the first input is filled it adds a second form. When adding a second file to the input it then duplicates the first two inputs (including file names) and adds a new field at the bottom of that. – lethalMango Aug 22 '11 at 20:53
  • use `.insertAfter("input[type=file]:last");` – Arnaud Le Blanc Aug 22 '11 at 20:56
  • Bingo, works like a charm. Thanks a lot, saved me hours of messing! :) – lethalMango Aug 22 '11 at 20:58
  • Works in Firefox. But in my IE7, the change events happens after clicking on "submit". Then the new input appears, and you need a second press to submit the form (jquery 1.4.4). Related: http://stackoverflow.com/questions/2389341/jquery-change-event-to-input-file-on-ie – guettli Oct 25 '11 at 08:17