Question

Im trying to implement some code i found on a website which duplicates a file field when you click a href link, the code is pretty much exactly the same from the site, yet its not working at all.

Could someone have a look and let me know where im going wrong.

The complete code is as follows:

JavaScript:

<script>
$(
function(){
    var jAddNewUpload = $( "#add-file-upload" );

    jAddNewUpload
        .attr( "href", "javascript:void( 0 )" )
        .click(
            function( objEvent ){
                AddNewUpload();

                objEvent.preventDefault();
                return( false );
            }
        );
}
);

function AddNewUpload(){
    var jFilesContainer = $( "mpfiles" );
    var jUploadTemplate = $( "#element-templates div.row" );
    var jUpload = jUploadTemplate.clone();
    var strNewHTML = jUpload.html();
    var intNewFileCount = (jFilesContainer.find( "div.row" ).length + 1);

    jUpload.attr( "id", ("file" + intNewFileCount) );

    strNewHTML = strNewHTML
        .replace(
            new RegExp( "::FIELD3::", "i" ), ("mpfile[]")
        );

    jUpload.html( strNewHTML );

    jFilesContainer.append( jUpload );
}
</script>

HTML:

<div id="mpfiles">
    <div class="row">
        <label>Files:</label>
        <div class="files-box">
            <div class="file sub-file">
                <input class="file-input-area" name="mpfile[]" type="file" size="32" value="" />
                <input readonly="readonly" class="text" type="text" value="click to upload" />
                <a href="#" class="button">view</a>
            </div>
        </div>
    </div>
</div>

<div id="element-templates" style="display: none;">
    <div class="row">
        <label>Files:</label>
        <div class="files-box">
            <div class="file sub-file">
                <input class="file-input-area" type="file" name="::FIELD3::" size="32" value="" />
                <input readonly="readonly" class="text" type="text" value="click to upload" />
                <a href="#" class="button">view</a>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <label>&nbsp;</label>
    <a href="" id="add-file-upload">Upload another file</a>
</div>

The website where i got the code from is here http://www.bennadel.com/blog/1375-Ask-Ben-Dynamically-Adding-File-Upload-Fields-To-A-Form-Using-jQuery.htm

Answer 1

function AddNewUpload(){ var jFilesContainer = $( "mpfiles" );

You need a # before mpfiles … like this:

function AddNewUpload(){ var jFilesContainer = $( "#mpfiles" );