For example, I have a section called students
I allow user to add student dynamically
Each student has the fields Name, Points, & Image
The Name & Points works. The problem comes when I add the Image field
See the attachment above, when I try to select the file from 2nd student, the image value goes to the 1st student.
<label for="student-image-1">
was point to the 1st student<label for="student-image-2">
was point to the 2nd student
And the id for file input was correct.
NOTE: I'm using jQuery.clone to duplicate the div
Any idea why I choose 2nd input will populate to 1st one?
Source code
$('#student-add-more').click(function(e) {
e.preventDefault();
var count = $('div[id^=student-row-]').length;
var last = $('div[id^=student-row-]').last();
var $clone = last.clone(true);
var next_id = count + 1;
$clone.attr('id', 'student-row-' + next_id);
$clone.find('.image-label')
.attr('for', 'student-image-' + next_id)
;
var fileinput = $clone.find('.filestyle')
.attr('id', 'student-image-' + next_id)
.attr('name', 'students_image['+count+']')
;
fileinput.wrap('<form>').closest('form').get(0).reset();
fileinput.unwrap();
$clone.find('.bootstrap-filestyle > label.btn')
.attr('for', 'student-image-' + next_id)
;
$clone.find('.bootstrap-filestyle > input').val('');
var delete_button = $clone.find('.btn-danger')
.attr('data-url', 'student-row-' + next_id)
.attr('href','#deleteModal')
.attr('class', 'btn btn-danger btn-sm btn-delete')
;
delete_button.closest('.form-group').removeAttr('style');
$clone.show().insertAfter(last);
});
html from firebug
<div id="student-row-1">
<div class="form-group ">
<div class="col-lg-3 col-md-3 col-sm-3 control-label">
<span class="badge bg-info student-no">1</span>
<div class="clearfix visible-xs"></div>
<label class="student-label" for="student-1">Name</label> <em class="red">*</em>
</div>
<div class="col-lg-6 col-md-7 col-sm-7">
<input type="text" value="" name="students[0][title]" class="form-control title-control" id="title-1"> </div>
</div>
<div class="form-group">
<div class="col-lg-3 col-md-3 col-sm-3 control-label">
<label class="point-label" for="point-1">Points</label> <em class="red">*</em>
</div>
<div class="col-lg-6 col-md-7 col-sm-7">
<input type="text" value="" name="students[0][point]" class="form-control point-control" id="point-1"> </div>
</div>
<div class="form-group">
<div class="col-lg-3 col-md-3 col-sm-3 control-label">
<label class="image-label" for="student-image-1">Image</label> <em class="red">*</em>
</div>
<div class="col-lg-6 col-md-8 col-sm-8">
<input type="file" name="students_image[0]" data-classinput="form-control inline input-s" data-classbutton="btn btn-default" data-icon="false" class="filestyle" id="student-image-1" style="position: fixed; left: -500px;"><div style="display: inline;" class="bootstrap-filestyle"><input type="text" disabled="" class="form-control inline input-s"> <label class="btn btn-default" for="student-image-1"><span>Choose file</span></label></div> </div>
</div>
<div class="form-group">
<div class="col-lg-3 col-md-3 col-sm-3 control-label"></div>
<div class="col-lg-6 col-md-7 col-sm-7">
<a title="Delete" data-toggle="modal" href="#" class="btn btn-danger btn-sm hidden" data-url="student-row-1">Delete</a>
</div>
</div>
</div>
<div id="student-row-2" style="display: block;">
<div class="form-group ">
<div class="col-lg-3 col-md-3 col-sm-3 control-label">
<span class="badge bg-info student-no">2</span>
<div class="clearfix visible-xs"></div>
<label class="student-label" for="student-1">Name</label> <em class="red">*</em>
</div>
<div class="col-lg-6 col-md-7 col-sm-7">
<input type="text" value="" name="students[1][title]" class="form-control title-control" id="title-2"> </div>
</div>
<div class="form-group">
<div class="col-lg-3 col-md-3 col-sm-3 control-label">
<label class="point-label" for="point-1">Points</label> <em class="red">*</em>
</div>
<div class="col-lg-6 col-md-7 col-sm-7">
<input type="text" value="" name="students[1][point]" class="form-control point-control" id="point-2"> </div>
</div>
<div class="form-group">
<div class="col-lg-3 col-md-3 col-sm-3 control-label">
<label class="image-label" for="student-image-2">Image</label> <em class="red">*</em>
</div>
<div class="col-lg-6 col-md-8 col-sm-8">
<input type="file" name="students_image[1]" data-classinput="form-control inline input-s" data-classbutton="btn btn-default" data-icon="false" class="filestyle" id="student-image-2" style="position: fixed; left: -500px;"><div style="display: inline;" class="bootstrap-filestyle"><input type="text" disabled="" class="form-control inline input-s"> <label class="btn btn-default" for="student-image-2"><span>Choose file</span></label></div> </div>
</div>
<div class="form-group">
<div class="col-lg-3 col-md-3 col-sm-3 control-label"></div>
<div class="col-lg-6 col-md-7 col-sm-7">
<a title="Delete" data-toggle="modal" href="#deleteModal" class="btn btn-danger btn-sm btn-delete" data-url="student-row-2">Delete</a>
</div>
</div>
</div>
Finally solved the problem, I just realized that the file input was using Bootstrap Filestyle.
// file
var file_container = $clone.find('.filestyle').parent();
file_container.empty();
var fileinput = $('<input>').addClass('filestyle').attr({
id: 'student-image-'+next_id,
name: 'students_image['+count+']',
type: 'file',
});
file_container.append(fileinput);
fileinput.filestyle({
icon: 'false',
classButton: 'btn btn-default',
classInput: 'form-control inline input-s',
});
var file_label_container = file_container.prev();
var new_label = $('<label>').addClass('image-label').attr('for', 'student-image-'+next_id).text(file_label_container.find('label').text());
file_label_container.find('label').remove();
file_label_container.prepend(new_label);
I remove the original input, and recreate a plain input, then use the filestyle to style the file input and append to the container. As well as the label on left hand side.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With