Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML dynamically add file input not working

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

enter image description here

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>
like image 769
Js Lim Avatar asked Feb 19 '14 10:02

Js Lim


1 Answers

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.

like image 130
Js Lim Avatar answered Nov 14 '22 13:11

Js Lim