У меня проблема с отображением filenanme в соответствующем поле.
Теперь ,
Когда я просматриваю файл в добавленном div, его имя файла отображается в родительском div вместо динамически добавляемого div.
Форма
<!-- start other_docx -->
<div class="img_field">
<div class="j-row ">
<label class="j-label">Other Documents</label>
<div class="j-span9 j-unit">
<label class="j-input j-append-small-btn">
<label class="j-icon-left" for="files[]">
<i class="fa fa-download"></i>
</label>
<div class="j-file-button">
Browse
<!-- <input type="file" name="files[]" onchange="document.getElementById('files[]').value=this.value;"> -->
<input type="file" name="files[]" onchange="setfilename(this.value);">
</div>
<input type="text" id="files[]" readonly="" placeholder="No file selected">
<span class="j-hint">Only: jpg / png / Pdf</span>
</label>
</div>
<div class="j-span3 j-unit">
<div class="" style="margin-top:5px">
<button style="" class="btn btn-sm btn-primary add_more_button">Add more</button>
</div>
</div>
</div>
</div>
<!-- end other_docx -->
setfilename ()
<script>
function setfilename(val)
{
var fileName = val.substr(val.lastIndexOf("\\")+1, val.length);
document.getElementById("files[]").value = fileName;
}
</script>
js
$(document).ready(function() {
var max_fields_limit = 10; //set limit for maximum input fields
var x = 1; //initialize counter for text box
$('.add_more_button').click(function(e){ //click event on add more fields button having class add_more_button
e.preventDefault();
if(x < max_fields_limit){ //check conditions
x++; //counter increment
// $('.img_field').append('<div><input type="file" name="files[]" class="form-control"/><a href="#" class="remove_field" style="margin-left:10px;color:red;">Remove</a></div>'); //add input field
// var name="document.getElementById('files[]').value=this.value;";
$('.img_field').append('<div class="j-row">' +
'<div class="j-span9 j-unit">' +
'<label class="j-input j-append-small-btn">' +
'<label class="j-icon-left" for="files[]">' +
'<i class="fa fa-download"></i>' +
'</label>' +
'<div class="j-file-button"> Browse' +
'<input type="file" name="files[]" onchange="setfilename(this.value);">' +
// '<input type="file" name="files[]" onchange="'+name+'">' +
'</div>' +
'<input type="text" id="files[]" readonly="" placeholder="No file selected">' +
'<span class="j-hint">Only: jpg / png</span>' +
'</label>' +
'</div>' +
'<div class="j-span3 j-unit">' +
'<div class="" style="margin-top:5px">' +
'<button style="" class="btn btn-sm btn-danger remove_field">Remove</button>' +
'</div>' +
'</div>' +
'</div>');
}
});
$('.img_field').on("click",".remove_field", function(e){ //user click on remove text links
e.preventDefault();
// $(this).parent('div').remove();
$(this).closest("div.j-row").remove();
x--;
})
});
и вот так выглядит моя форма ..
введите описание изображения здесь
Я новичок в jquery ... любая помощь будет принята с благодарностью.
Заранее спасибо.!
// Edit
теперь работает нормально. Я просто заменил идентификатор «files []» уникальным идентификатором для каждого динамически создаваемого элемента.
Спасибо Уроборус за упоминание об ошибке.