JQuery remove html via JQuery dialog - javascript

I am currently having an issue where I want to remove the HTML element the user clicked the detach button and then will be prompted but when they have clicked the OK button in a JQuery dialog box it remove that div element with the row class they just clicked.
The following works if without using JQuery dialog box: $(this).closest('.row').remove();
I am having difficulty replicating this via a JQuery dialog box.
Below is an exmaple and a JSFiddle:
$(document).on("click", ".detach", function() {
var detachvalue = $(this).closest('div').prev().find('input.detachval').val();
$("<div title='Important Message'>Are you sure you want to detach?</div>").dialog({
modal: true,
buttons: {
Ok: function() {
$(this).closest('.row').remove();
console.log(detachvalue);
$(this).dialog("close");
}
}
});
});
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<div class="row">
<div class="form-group col-md-5">
<input type="text" class="form-control col-md-4 detachval" placeholder="No number currently">
</div>
<div class="form-group col-md-3">
<button type="submit" class="btn btn-primary form-control detach">Detach</button>
</div>
</div>
<div class="row">
<div class="form-group col-md-5">
<input type="text" class="form-control col-md-4 detachval" placeholder="No number currently">
</div>
<div class="form-group col-md-3">
<button type="submit" class="btn btn-primary form-control detach">Detach</button>
</div>
</div>
<div class="row">
<div class="form-group col-md-5">
<input type="text" class="form-control col-md-4 detachval" placeholder="No number currently">
</div>
<div class="form-group col-md-3">
<button type="submit" class="btn btn-primary form-control detach">Detach</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>


$(this) in ok: function(){} references the dialog and hence it can't remove the div .row.
Have a reference to the .row during detach.click() and use it on the ok: function(){}.
Here is the updated solution.
$(document).on("click", ".detach", function() {
var $row = $(this).parents('.row');
var detachvalue = $(this).closest('div').prev().find('input.detachval').val();
$("<div title='Important Message'>Are you sure you want to detach?</div>").dialog({
modal: true,
buttons: {
Ok: function() {
$row.remove();
console.log(detachvalue);
$(this).dialog("close");
}
}
});
});
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<div class="row">
<div class="form-group col-md-5">
<input type="text" class="form-control col-md-4 detachval" placeholder="No number currently">
</div>
<div class="form-group col-md-3">
<button type="submit" class="btn btn-primary form-control detach">Detach</button>
</div>
</div>
<div class="row">
<div class="form-group col-md-5">
<input type="text" class="form-control col-md-4 detachval" placeholder="No number currently">
</div>
<div class="form-group col-md-3">
<button type="submit" class="btn btn-primary form-control detach">Detach</button>
</div>
</div>
<div class="row">
<div class="form-group col-md-5">
<input type="text" class="form-control col-md-4 detachval" placeholder="No number currently">
</div>
<div class="form-group col-md-3">
<button type="submit" class="btn btn-primary form-control detach">Detach</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

Related

Remove prepend section when there is only one group jQuery

On click event, I'm cloning the section which is working fine. I also prepend the remove button when there is new section added.
I have only one issue, i want to remove the prepended button when there is only one section remain.
This is the code
$(document).ready(function() {
$('#taskForm')
// Add button click handler
.on('click', '.addButton', function() {
var $template = $('#taskTemplate'),
$clone = $template
.clone(true, true)
.removeClass('hide')
.removeAttr('id')
.insertBefore($template);
$('.dateofbirth').prepend($('<div style="height:0;"><a class="delete removeButton" href="#"><i class="fa fa-times"></i></a></div>'));
})
// Remove button click handler
.on('click', '.removeButton', function() {
var $row = $(this).closest('.form--group');
$row.remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="name-field row" id="taskForm">
<div class="form--group">
<div class="col-xs-12 col-sm-6 childname">
<div class="field text-left">
<label class="text-left">First Name</label> <input class="“first" name="first[]" placeholder="“Firstname”" type="text">
</div>
</div>
<div class="col-xs-12 col-sm-6 dateofbirth">
<div class="field text-left">
<label class="text-left">Date of birth</label> <input class="date" name="date[]" onkeyup="dateOfBirth(this.value,'stepbirth')" placeholder="DD / MM / JJJJ" type="text">
</div>
</div>
<div class="form--group hide" id="taskTemplate">
<div class="col-xs-12 col-sm-6 childname">
<div class="field text-left">
<label class="text-left">First Name</label> <input class="firstname character" name="first[]" placeholder="Voornaam" type="text">
</div>
</div>
<div class="col-xs-12 col-sm-6 dateofbirth">
<div class="field text-left">
<label class="text-left">Date of birth</label> <input class="date" name="date[]" onkeyup="dateOfBirth(this.value,'stepbirth')" placeholder="DD / MM / JJJJ" type="text">
</div>
</div>
</div>
<div class="col-lg-12 col-sm-12 col-xs-12">
<a class="btn-success addButton" href="#" id="addChild" name="addchild">Add Child</a>
</div>
</div>
</div>
Can anyone help me with this how can i achieve this?
Thanks in advance.

Make the following changes:
The template should not be a child of the first form--group, it should be a sibling. If not, your dynamically added rows are regarded children of the first row. So move the template out of it, as well as the Add button.
Do not add the HTML for the removal button via code. Instead add the HTML for that button in your static HTML, both in the first row and the template
Every time you add or remove a row, and also at page load, perform the following action:
$(".removeButton").toggle($(".removeButton").length > 2)
This will count the number of delete buttons (including the one that is in the template). If that counts to just two, then hide those buttons, otherwise show them.
Here is a little snippet:
$(document).ready(function() {
$('#taskForm')
// Add button click handler
.on('click', '.addButton', function() {
var $template = $('#taskTemplate'),
$clone = $template
.clone(true,true)
.removeClass('hide')
.removeAttr('id')
.insertBefore($template);
$(".removeButton").toggle($(".removeButton").length > 2);
})
// Remove button click handler
.on('click', '.removeButton', function() {
var $row = $(this).closest('.form--group');
$row.remove();
$(".removeButton").toggle($(".removeButton").length > 2);
});
$(".removeButton").toggle($(".removeButton").length > 2);
});
.hide { display: none }
.field { margin-left: 20px }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="name-field row" id="taskForm">
<div class="form--group">
<div class="col-xs-12 col-sm-6 childname">
<div class="field text-left">
<label class="text-left">First Name</label> <input class="“first" name="first[]" placeholder="“Firstname”" type="text">
</div>
</div>
<div style="height:0;"><a class="delete removeButton" href="javascript:;"><i class="fa fa-times"></i></a></div>
<div class="col-xs-12 col-sm-6 dateofbirth">
<div class="field text-left">
<label class="text-left">Date of birth</label> <input class="date" name="date[]" onkeyup="dateOfBirth(this.value,'stepbirth')" placeholder="DD / MM / JJJJ" type="text">
</div>
</div>
</div>
<div class="form--group hide" id="taskTemplate">
<div class="col-xs-12 col-sm-6 childname">
<div class="field text-left">
<label class="text-left">First Name</label> <input class="firstname character" name="first[]" placeholder="Voornaam" type="text">
</div>
</div>
<div style="height:0;"><a class="delete removeButton" href="javascript:;"><i class="fa fa-times"></i></a></div>
<div class="col-xs-12 col-sm-6 dateofbirth">
<div class="field text-left">
<label class="text-left">Date of birth</label> <input class="date" name="date[]" onkeyup="dateOfBirth(this.value,'stepbirth')" placeholder="DD / MM / JJJJ" type="text">
</div>
</div>
</div>
<div class="col-lg-12 col-sm-12 col-xs-12">
<a class="btn-success addButton" href="javascript:;" id="addChild" name="addchild">Add Child</a>
</div>
</div>

Dynamic multiselect feature

I am creating the fields dynamically in HTML using this JS, and in multiselect I'm using bootstrap multiselect here is the code https://bootsnipp.com/snippets/Ekd8P when I click on the add more button it creates the form dynamically.
js code for creating a form dynamically :
$(function() {
// Remove button
$(document).on(
'click',
'[data-role="dynamic-fields"] > .form-horizontal [data-role="remove"]',
function(e) {
e.preventDefault();
$(this).closest('.form-horizontal').remove();
}
);
// Add button
var i = 1;
$(document).on(
'click',
'[data-role="dynamic-fields"] > .form-horizontal [data-role="add"]',
function(e) {
e.preventDefault();
var container = $(this).closest('[data-role="dynamic-fields"]');
new_field_group = container.children().filter('.form-horizontal:first-child').clone();
new_field_group.find('input').each(function() {
if (this.name == 'tags[0]') {
$(this).tagsinput('destroy');
$(this).tagsinput('removeAll');
this.name = this.name.replace('[0]', '[' + i + ']');
var new_container = $(this).closest('[class="form-group"]');
new_container.find(".bootstrap-tagsinput:first").remove();
} else {
$(this).val('');
}
});
new_field_group.find('select').each(function() {
if (this.name == 'addons[0]') {
$(this).multiselect('rebuild');
this.name = this.name.replace('[0]', '[' + i + ']');
var new_container = $(this).closest('[class="multiselect-native-select"]');
new_container.find(".multiselect-native-select > .multi").remove();
} else {
$(this).val('');
}
});
i += 1;
container.append(new_field_group);
}
);
});
and html code for form elements:
<form action="" method="post" novalidate="novalidate" enctype="multipart/form-data">
{{ csrf_field() }}
<div data-role="dynamic-fields">
<div class="form-horizontal">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Enter Dish Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="Name1" name="Name[]" required data-rule-minlength="2">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Enter Dish Price</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="Price" name="Price[]" required data-rule-minlength="2">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Select Food Type</label>
<div class="col-sm-8">
<select id="select1" class="form-control" name="select[]" required>
#foreach($types as $type)
<option value="{{$loop->iteration}}">{{$type->food_type_name}}</option>
#endforeach
</select>
<p class="help-block" data-toggle="tooltip" data-placement="bottom" title="xyz"><i class="md md-info"></i></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Dish Description</label>
<div class="col-sm-8">
<textarea name="Description[]" id="field-value" class="form-control" rows="1"></textarea>
</div>
</div>
</div>
<div class="col-sm-4 contacts">
<div class="form-group">
<label class="col-sm-3" for="rolename">Add Addons</label>
<div class="col-sm-8">
<select id="dates-field2" class="multiselect-ak form-control" name="addons[0]" id="trigger3" data-role="multiselect" multiple="multiple">
#foreach($addons as $addon)
<option value="{{$addon->addonid}}">{{$addon->addon_name}}</option>
#endforeach
</select>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Enter Tags</label>
<div class="col-sm-8">
<input type="text" value="" name="tags[0]" class="form-control" data-role="tagsinput" placeholder="e.g. spicy, healthy" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="col-sm-4">
<div class="checkbox checkbox-styled">
<label><em>Half Plate Price</em>
<input type="checkbox" value="" class="trigger2" id="trigger2" name="question">
</label>
</div>
</div>
<div class="col-sm-4">
<div id="hidden_fields2" class="hidden_fields2" style="display:none;">
<input type="text" id="hidden_field2" name="Price2[]" placeholder="Please Enter" class="form-control">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="col-sm-5">
<div class="checkbox checkbox-styled">
<label><em>Quarter Plate Price</em>
<input type="checkbox" value="" class="trigger" id="trigger" name="question">
</label>
</div>
</div>
<div class="col-sm-4">
<div id="hidden_fields" class="hidden_fields" style="display:none;">
<input type="text" id="hidden_field" name="Price3[]" placeholder="Please Enter" class="form-control">
</div>
</div>
</div>
</div>
<br>
<button class="btn btn-delete" data-toggle="tooltip" data-placement="bottom" title="Delete Field" data-role="remove">
Delete Item
</button>
<button class="btn ink-reaction btn-raised btn-primary" data-toggle="tooltip" data-placement="bottom" title="Add More Field" data-role="add">
Add More Items
</button>
</div>
<!-- /div.form-inline -->
</div>
<!-- /div[data-role="dynamic-fields"] -->
<div class="form-group">
<button type="submit" name="submit" href="#" class="btn ink-reaction btn-raised btn-primary" style="margin-top: -62px;margin-left: 160px;">Submit Items</button>
</div>
<!--end .form-group -->
</form>
The issue is that when I click on the add more item it reflects the multiselect dropdown twice as you see in this image.
I want that if I click on the add more item button it restates the multiselect dropdown as in the first state.
see this jsfiddle.net/akshaycic/svv742r7/7 it will clear all your doubt. on click plus button it is not reflect to "none selected" state it will remain in its initial state.
Any leads would be helpful. Thank you in advance.

Add required attribute when you add form inputs dynamically

I have a form where dynamically, the user can add/delete form inputs. The problem is that in form-group which is hidden, I can't add the attribute required because in submit event, the submit won't happen.
How can I add the attribute required every time i press + button and delete it when I press - button?
I tried this: $('#barcode').prop('required',true); but isn't right because if I press 2 times the + button, I will have 2 inputs with the same id...
var counter = 0;
$('#form1')
// Add button click handler
.on('click', '.addButton', function() {
counter++;
var $template = $('#addLine'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.attr('data-index', counter)
.insertBefore($template);
// Update the name attributes
$clone
.find('[name="barcode"]').attr('name', 'barcode-' + counter).end()
.find('[name="productsInBox"]').attr('name', 'productsInBox-' + counter).end()
.find('[name="packer"]').attr('name', 'packer-' + counter).end()
.find('[name="count"]').attr('name', 'count-' + counter).end();
$('#barcode').prop('required', true);
})
// Remove button click handler
.on('click', '.removeButton', function() {
var $row = $(this).parents('.form-group'),
index = $row.attr('data-index');
counter--;
// Remove element containing the fields
$('#barcode').prop('required', false);
$row.remove();
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-6">
<form id="form1" method="post" action="actions?do=barcodePaleta_submit" class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<label for="inputName" class="col-md-1 col-sm-2 control-label">box:</label>
<div class="col-md-3 col-sm-4">
<input type="text" pattern=".{23,23}" class="form-control" name="barcode" required/>
</div>
<label for="inputName" class="col-md-1 col-sm-2 control-label">num:</label>
<div class="col-md-1 col-sm-3">
<input type="number" min="0" class="form-control" name="productsInBox" required/>
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<div id="addLine" class="form-group hide">
<label for="inputName" class="col-md-1 col-sm-2 control-label">box:</label>
<div class="col-md-3 col-sm-4">
<input id="barcode" type="text" pattern=".{23,23}" class="form-control" name="barcode" />
</div>
<label for="inputName" class="col-md-1 col-sm-2 control-label">num:</label>
<div class="col-md-1 col-sm-3">
<input type="number" min="0" class="form-control" name="productsInBox" />
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i>
</button>
</div>
</div>
<div class="form-group myTop">
<div class="col-lg-10 ">
<button type="submit" name="formAction" value="next" class="btn btn-primary">submit</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>

I miss understood question.try this for + button
if($('#barcode').attr('required') != true){
$('#barcode').attr('required',true);
}
this for - button
if($('#barcode').attr('required')){
$('#barcode').removeAttr('required');
}

Put form inputs in the same line fails after 2 times

I have a form inputs and I want to add some extra inputs in the same line when I press the add button (input name2, name3).
I have done this which works if I pressed the add button once. After 2 times the alignment is broken..
var counter6=0;
$('#formType1')
.on('click', '.addButton6', function() {
counter6++;
var $template = $('#dose1 .col-md-1.col-sm-2'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.attr('data-dose1-index', counter6)
.insertBefore($template.parent());
// Update the name attributes
$clone
.find('[name="strofes"]').attr('name', 'strofes-' + counter6).end();
var $template = $('#dose2 .col-md-1.col-sm-2'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.attr('data-dose1-index', counter6)
.insertBefore($template.parent());
$clone
.find('[name="uesi"]').attr('name', 'uesi-' + counter6).end();
})
// Remove button click handler
.on('click', '.removeButton6', function() {
counter6 = counter6-1;
var $row = $(this).parents('.form-group'),
index = $row.attr('data-dose1-index');
// Remove element containing the fields
$row.remove();
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row ">
<div class="col-md-12 col-sm-12">
<form id="formType1" method="post" action="workplan?action=form1S_submit" class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<div class="col-md-4 col-sm-4">
<label style="font-size: 16px; color: #C0506C;">TITLE</label>
</div>
</div>
<div class="form-group">
<label for="inputName" class="col-md-1 col-sm-2 control-label">name1</label>
<div class="col-md-1 col-sm-2 col-md-offset-1">
<input min="0" step="0.1" class="form-control" name="" required="" type="number">
</div>
</div>
<div class="form-group">
<label for="inputName" class="col-md-1 col-sm-2 control-label">name2</label>
<div class="col-md-1 col-sm-2 col-md-offset-1">
<input min="0" step="0.1" class="form-control" name="strofes" required="" type="number">
</div>
<div id="dose1" class="form-group hide">
<div class="col-md-1 col-sm-2 ">
<input min="0" step="0.1" class="form-control" name="strofes" required="" type="number">
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-default removeButton6"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
<div class="form-group">
<label for="inputName" class="col-md-1 col-sm-2 control-label">name3</label>
<div class="col-md-1 col-sm-2">
<input min="0" step="0.1" class="form-control" name="uesi" required="" type="number">
</div>
<div class="col-md-offset-1"> </div>
<div id="dose2" class="form-group hide">
<div class="col-md-1 col-sm-2 ">
<input min="0" step="0.1" class="form-control" name="uesi" required="" type="number">
</div>
</div>
</div>
<div class="form-group">
<label for="inputName" class="col-md-1 col-sm-2 control-label">name4</label>
<div class="col-md-1 col-sm-2">
<input min="0" step="0.1" class="form-control" name="" required="" type="number">
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-default addButton6"><i class="fa fa-plus"></i></button>
</div>
</div>
</fieldset>
</form>
</div>
</div></div>

The problem is the classes you are using to clone the template. You have to made some changes to your script and your HTML. The changes are mentioned below-
1- Replace first occurrence of $template and $clone with this one
var $template = $('#dose1'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.attr('data-dose1-index', counter6)
.insertBefore($template);
2- Replace Second occurrence of $template and $clone with this one
var $template = $('#dose2'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.attr('data-dose2-index', counter6)
.insertBefore($template);
Here i am getting innerHTML of #dose1 and #dose2 and inserting it before their parent div.
3- In HTML replace #dose2 div with this one
<!----- #dose1--->
<div id="dose1" class="hide">
<div class="col-md-1 col-sm-2 ">
<input min="0" step="0.1" class="form-control" name="strofes" required="" type="number">
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-default removeButton6"><i class="fa fa-minus"></i></button>
</div>
</div>
<!------- #dose2 ----------->
<div id="dose2" class="hide">
<div class="col-md-1 col-sm-2">
<input type="number" min="0" step="0.1" class="form-control" name="uesi" required="">
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-default removeButton6"><i class="fa fa-minus"></i></button>
</div>
</div>

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
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.

Categories

Resources