Display Multiple Attachment Filenames With JQuery

I'm using the following jQuery to get the filename from my hidden field which I then append to my filename class in my HTML. filenameCache = $('#example-marketing-material-file-ca

Solution 1:

Give the file fields a common class like of "file_upload" , can use text(fn) to loop over the filename fields and update instances

$files=$('.file_upload');
// loops over all in selector and updates instances
$(".filename").text(function(idx , txt){
    return $files.eq(idx).val().replace(/^.*[\\\/]/g, '');
});

This assumes that you have 3 of each and they have matching indexing in page

If there is only one filename field

$(".filename").text(function(idx , txt){
    return $.map($files, function(el){
          return el.value.replace(/^.*[\\\/]/g, '');
    }).join(", ");
});

Solution 2:

Give them a common clas, capture them, and loop over them.

Since you are using jquery you can use .each

HTML

<input class="filename-input" value="some.pdf"/>
<input class="filename-input" value="other.pdf"/>
<input class="filename-input" value="another.pdf"/>

JS

var filenames = [];
jQuery(".filename-input").each(function(){
   filenames.push( jQuery(this).val().replace(/^.*[\\\/]/g, '') );
});
jQuery(".filename").text(filenames.join(" "));

Demo

var filenames = "";
jQuery(".filename-input").each(function(){
  filenames += jQuery(this).val().replace(/^.*[\\\/]/g, '')+" ";
});
jQuery("#log").text(filenames);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input class="filename-input" type="hidden" value="some.pdf"/>
<input class="filename-input" type="hidden" value="other.pdf"/>
<input class="filename-input" type="hidden" value="another.pdf"/>    

<div id="log"></div>

Solution 3:

html:

<div class="filename"></div>
<div id="container">
<input id="example-marketing-material-file-cache1" name="bid[example_marketing_material_cache]" type="hidden" value="1430984214-14326-1254/Banking_Details_Reader.pdf" />
<input id="example-marketing-material-file-cache2" name="bid[example_marketing_material_cache]" type="hidden" value="1430984214-14326-1254/Banking_Details_Reader.pdf" />
<input id="example-marketing-material-file-cache3" name="bid[example_marketing_material_cache]" type="hidden" value="1430984214-14326-1254/Banking_Details_Reader.pdf" />

js:

var inputs = $('#container input');
var fileNames = [];
$.each(inputs,function(index,input){

var value = $(input).val();
if(value){
    fileNames.push(value.replace(/^.*[\\\/]/g, ''));
}  

});

$(".filename").text(fileNames.join('|'));

jsfiddle