How I can maintain the sequence of beneficiaries generated with jquery? - javascript

I'm developing a Will generating web application. For this I need to develop a system which allow the user to add multiple beneficiaries.
I have written some code which is working for creation on new beneficiary but the issue is when a user deletes a beneficiary the sequence number doesn't work accordingly.
For example, User added 5 beneficiaries and he deletes the 3rd beneficiary the sequence number doesn't change. i.e. beneficiary 1, beneficiary 2, beneficiary 4, beneficiary 5. I want to sort this problem make them in sequence.
For my code please check this
https://jsfiddle.net/shahzadwaris/purvo4bn/5/
$(document).delegate(".delBeneficiary", "click", function(e) {
e.preventDefault();
var div = $(this).attr("id");
var nmbr = div.replace(/\D/g, "");
$("." + div).remove();
bene--;
//alert(nmbr);
});
var bene = 2;
$(".addBeneficiary").click(function(e) {
e.preventDefault();
addBeneficiary(bene);
bene++;
});
$(document).delegate(".addBeneficiaryD", "click", function(e) {
e.preventDefault();
addBeneficiary(bene);
bene++;
});
function addBeneficiary(bene) {
$("#beneficiaries").append(
"<div class = 'bene" +
bene +
"'><h6 class = 'mt-3 mb-3'><b>Beneficiary <span class = 'bNmbr'>" +
bene +
"</span></b></h6>" +
"<div class='form-group row'>" +
"<label for='ename' class='col-sm-4 col-form-label backgroundForm pt-2 pb-2'><span class = 'pt-5'>Name</span><span class = 'text-danger'> *</span></label>" +
"<div class='col-sm-7'>" +
" <input type='text' class='form-control p-1 mt-1' id='ename' name = 'ebname[]' placeholder='Name'>" +
"</div>" +
"<label for='enric' class='col-sm-4 col-form-label backgroundForm pt-2 pb-2'><span class = 'pt-5'>NRIC / Passport No.</span><span class = 'text-danger'> *</span></label>" +
"<div class='col-sm-7'>" +
"<input type='text' class='form-control p-1 mt-1' id='enric' name = 'ebnric[]' placeholder='NRIC / Passport No'>" +
"</div> " +
"<label for='relationship' class='col-sm-4 col-form-label backgroundForm pt-2 pb-2'><span class = 'pt-5'>Relationship</span></label>" +
"<div class='col-sm-7'>" +
"<input type='text' class='form-control p-1 mt-1' id='Rrelationship' name = 'ebrelationship[]' placeholder='Relationship'>" +
"</div>" +
"<div class = 'col-xs-12 col-sm-12 col-md-11 mt-2 text-right'>" +
"<button class = 'btn btn-sm addBeneficiaryD ' id = 'bene" +
bene +
"' >Add</button>" +
"<button class = 'btn btn-sm delBeneficiary ml-2' id = 'bene" +
bene +
"'>Delete</button>" +
"</div>" +
"</div></div>"
);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h6 class='mt-3 mb-3'><b>Beneficiary <span class = 'bNmbr'>1</span></b></h6>
<div class="form-group row">
<label for="ename" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2"><span class = 'pt-5'>Name</span><span class = 'text-danger'> *</span></label>
<div class="col-sm-7">
<input type="text" class="form-control p-1 mt-1" id="ename" name='ebname[]' placeholder="Name" required='required' />
</div>
<label for="enric" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2"><span class = 'pt-5'>NRIC / Passport No.</span><span class = 'text-danger'> *</span></label>
<div class="col-sm-7">
<input type="text" class="form-control p-1 mt-1" id="enric" name='ebnric[]' placeholder="NRIC / Passport No" required='required' />
</div>
<label for="relationship" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2"><span class = 'pt-5'>Relationship</span></label>
<div class="col-sm-7">
<input type="text" class="form-control p-1 mt-1" id="Rrelationship" name='ebrelationship[]' placeholder="Relationship" required='required' />
</div>
<div class='col-xs-12 col-sm-10 col-md-8 mt-2 text-right'>
<button class='btn btn-sm addBeneficiary '>Add</button>
</div>
</div>
<div id='beneficiaries'>
</div>


You can start here
Much simpler code and removed the deprecated delegate
function renum() {
$(".beneficiary").each(function() {
$(this).find(".bNmbr").text($(this).index()+1)
})
}
$(".delBeneficiary").eq(0).hide()
$(document).on("click", ".delBeneficiary ", function(e) {
e.preventDefault();
$(this).closest(".beneficiary").remove();
renum();
});
$(document).on("click", ".addBeneficiary", function(e) {
e.preventDefault();
const beneCount = $(".beneficiary").length;
let $bene = $(this).closest(".beneficiary").clone();
$bene.find("input").each(function() { $(this).val("") }); // empty inputs
$bene.find("[id]").each(function() {
this.id += beneCount;
})
$bene.find(".bNmbr").text(beneCount + 1)
$bene.appendTo("#beneficiaries")
$(".delBeneficiary:gt(0)").show();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='beneficiaries'>
<div class="beneficiary">
<h6 class='mt-3 mb-3'><b>Beneficiary <span class = 'bNmbr'>1</span></b></h6>
<div class="form-group row">
<label for="ename" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2"><span class = 'pt-5'>Name</span><span class = 'text-danger'> *</span></label>
<div class="col-sm-7">
<input type="text" class="form-control p-1 mt-1" id="ename" name='ebname[]' placeholder="Name" required='required' />
</div>
<label for="enric" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2"><span class = 'pt-5'>NRIC / Passport No.</span><span class = 'text-danger'> *</span></label>
<div class="col-sm-7">
<input type="text" class="form-control p-1 mt-1" id="enric" name='ebnric[]' placeholder="NRIC / Passport No" required='required' />
</div>
<label for="relationship" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2"><span class = 'pt-5'>Relationship</span></label>
<div class="col-sm-7">
<input type="text" class="form-control p-1 mt-1" id="Relationship" name='ebrelationship[]' placeholder="Relationship" required='required' />
</div>
<div class='col-xs-12 col-sm-10 col-md-8 mt-2 text-right'>
<button class='btn btn-sm addBeneficiary '>Add</button>
<button class='btn btn-sm delBeneficiary ml-2'>Delete</button>
</div>
</div>
</div>
</div>


Try renumbering your entries every time you add or delete:
function renumber() {
var i = 1;
$('.bNmbr').each(function(){
this.innerHTML = i;
++i;
});
}
Can be combined with the code by mplungjan.


This would be a complete code for you. I tried to make it easier for editing and removed duplicate ID creations:
var bene = 1;
function correctNumbers() {
$('.bNmbr').each(function(i) {
$(this).text(i + 1);
});
};
$('body').on('click', '.addBeneficiary', function(e) {
e.preventDefault();
bene++;
addBeneficiary(bene);
});
$('body').on('click', '.delBeneficiary', function(e) {
e.preventDefault();
$(this).closest('.bene').remove();
correctNumbers();
});
function addBeneficiary(bene) {
$("#beneficiaries").append('\
<div class="bene" id="bene' + bene + '">\
<h6 class="mt-3 mb-3"><b>Beneficiary <span class="bNmbr">' + bene + '</span></b></h6>\
<div class="form-group row">\
<label for="ename' + bene + '" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2">\
<span class="pt-5">Name</span>\
<span class="text-danger"> *</span>\
</label>\
<div class="col-sm-7">\
<input type="text" class="form-control p-1 mt-1" id="ename' + bene + '" name="ebname[]" placeholder="Name">\
</div>\
<label for="enric' + bene + '" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2">\
<span class="pt-5">NRIC / Passport No.</span>\
<span class="text-danger"> *</span>\
</label>\
<div class="col-sm-7">\
<input type="text" class="form-control p-1 mt-1" id="enric' + bene + '" name="ebnric[]" placeholder="NRIC / Passport No">\
</div>\
<label for="relationship' + bene + '" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2">\
<span class="pt-5">Relationship</span>\
</label>\
<div class="col-sm-7">\
<input type="text" class="form-control p-1 mt-1" id="relationship' + bene + '" name="ebrelationship[]" placeholder="Relationship">\
</div>\
<div class="col-xs-12 col-sm-12 col-md-11 mt-2 text-right">\
<button class="btn btn-sm addBeneficiary" id="add' + bene + '">Add</button>\
<button class="btn btn-sm delBeneficiary ml-2" id="delete' + bene + '">Delete</button>\
</div>\
</div>\
</div>\
');
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h6 class='mt-3 mb-3'><b>Beneficiary <span class='bNmbr'>1</span></b></h6>
<div class="form-group row">
<label for="ename" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2"><span class='pt-5'>Name</span><span class='text-danger'> *</span></label>
<div class="col-sm-7">
<input type="text" class="form-control p-1 mt-1" id="ename" name='ebname[]' placeholder="Name" required='required' />
</div>
<label for="enric" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2"><span class='pt-5'>NRIC / Passport No.</span><span class='text-danger'> *</span></label>
<div class="col-sm-7">
<input type="text" class="form-control p-1 mt-1" id="enric" name='ebnric[]' placeholder="NRIC / Passport No" required='required' />
</div>
<label for="relationship" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2"><span class='pt-5'>Relationship</span></label>
<div class="col-sm-7">
<input type="text" class="form-control p-1 mt-1" id="Rrelationship" name='ebrelationship[]' placeholder="Relationship" required='required' />
</div>
<div class='col-xs-12 col-sm-12 col-md-11 mt-2 text-right'>
<button class='btn btn-sm addBeneficiary '>Add</button>
</div>
</div>
<div id='beneficiaries'>
</div>
Also on JSFiddle

Related

How to pass time input class (.timepicker) after incrementing the input fields for time?

i am working on a form with input which accept timepicker from bootstrap datetimepicker, this form comes with the modal on which user may increments these inputs to add more fields, the problem i found is 'every time i increment these fields the .timepicker class do not adds up to give the timepicker ui, it only respond for original input fields before incrementing them.
<div class="modal fade custom-modal" id="add_time">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add Time Slots</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="{{ url('schedules') }}" method="POST">
#csrf
<div class="hours-info">
<div class="row form-row hours-cont">
<div class="col-12 col-md-10">
<div class="row form-row">
<div class="col-12">
<div class="form-group">
<label>Days</label>
<select class="select form-control" name="day">
<option>Choose Day</option>
<option value="monday">Monday</option>
<option value="tuesday">Tuesday</option>
<option value="wednesday">Wednesday</option>
<option value="thursday">Thursday</option>
<option value="friday">Friday</option>
<option value="saturday">Saturday</option>
<option value="sunday">Sunday</option>
</select>
</div>
</div>
<div class="col-12 col-md-6">
<div class="form-group">
<label>Start Time</label>
<div class="input-group">
<input type="text" class="form-control timepicker" placeholder="Select time" aria-describedby="basic-addon2">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2"><i class="fa fa-clock"></i></span>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="form-group">
<label>End Time</label>
<div class="input-group">
<input type="text" class="form-control timepicker" placeholder="Select time" aria-describedby="basic-addon2">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2"><i class="fa fa-clock"></i></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="add-more mb-3">
<a href="javascript:void(0);" class="add-hours"><i class="fa fa-plus-circle"></i> Add
More</a>
</div>
<div class="submit-section text-center">
<button type="submit" class="btn btn-primary submit-btn">Save Changes</button>
</div>
</form>
</div>
</div>
</div>
My script is as follows:
$(".hours-info").on('click','.trash', function () {
$(this).closest('.hours-cont').remove();
return false;
});
$(".add-hours").on('click', function () {
var hourscontent = '<div class="row form-row hours-cont">' +
'<div class="col-12 col-md-10">' +
'<div class="row form-row">' +
'<div class="col-12 col-md-6">' +
'<div class="form-group">' +
'<label>Start Time</label>' +
'<div class="input-group">' +
'<input type="text" class="form-control timepicker" placeholder="Select time">' +
'<div class="input-group-append">' +
'<span class="input-group-text" id="basic-addon2"><i class="fa fa-clock"></i></span>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="col-12 col-md-6">' +
'<div class="form-group">' +
'<label>End Time</label>' +
'<div class="input-group">' +
'<input type="text" class="form-control timepicker" placeholder="Select time">' +
'<div class="input-group-append">' +
'<span class="input-group-text" id="basic-addon2"><i class="fa fa-clock"></i></span>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="col-12 col-md-2"><label class="d-md-block d-sm-none d-none"> </label><i class="far fa-trash-alt"></i></div>' +
'</div>';
$(".hours-info").append(hourscontent);
return false;
});
what am I missing? please any help out of the box?

Autocomplete form fields on dynamically created ones

I have been trying solutions for similar problems for hours now, all I could find is autocomplete for one field.
Here is my form code:
<div class="row form-group">
<label>1</label>
<div class="col col-sm-1"><input type="text" id="code1" name="code[]" placeholder="Code" class="form-control" required></div>
<div class="col col-sm-4"><input type="text" id="id2" name="product[]" placeholder="Produit" class="form-control" required></div>
<div class="col col-sm-1"><input type="text" id="id3" name="package[]" placeholder="Cdt" class="form-control" required></div>
<div class="col col-sm-1"><input type="text" id="id4" name="qte[]" placeholder="Qté" class="form-control" required></div>
<div class="col col-sm-1"><input type="text" id="id5" name="price[]" placeholder="Prix Unit" class="form-control" required></div>
<div class="col col-sm-1"><input type="text" id="id6" name="vat[]" placeholder="TVA" class="form-control" required></div>
<div class="col col-sm-1"><input type="text" id="id7" name="lot[]" placeholder="Lot" class="form-control" required></div>
<div class="col col-sm-1"><input type="text" id="id8" name="ddp[]" placeholder="DDP" class="form-control" required></div>
<div onclick="addRow(this.form);"><i class="btn-sm btn-primary fa fa-plus-circle"></i></div>
</div>
And here is the javascript to autocomplete + add rows:
var rowNum = 1;
function addRow(frm) {
rowNum ++;
var row = '<div class="row form-group" id="rowNum'+rowNum+'">'+
'<label>'+rowNum+'</label>'+
'<div class="col col-sm-1"><input type="text" id="code1" name="code[]" placeholder="Code" class="form-control" required></div>'+
'<div class="col col-sm-4"><input type="text" id="id2" name="product[]" placeholder="Produit" class="form-control" required></div>'+
'<div class="col col-sm-1"><input type="text" id="id3" name="package[]" placeholder="Cdt" class="form-control" required></div>'+
'<div class="col col-sm-1"><input type="text" id="id4" name="qte[]" placeholder="Qté" class="form-control" required></div>'+
'<div class="col col-sm-1"><input type="text" id="id5" name="price[]" placeholder="Prix Unit" class="form-control" required></div>'+
'<div class="col col-sm-1"><input type="text" id="id6" name="vat[]" placeholder="TVA" class="form-control" required></div>'+
'<div class="col col-sm-1"><input type="text" id="id7" name="lot[]" placeholder="Lot" class="form-control" required></div>'+
'<div class="col col-sm-1"><input type="text" id="id8" name="ddp[]" placeholder="DDP" class="form-control" required></div>'+
'<div onclick="removeRow('+rowNum+');"><i class="btn-sm btn-danger fa fa-minus-circle"></i></div>'+
'<div onclick="addRow(this.form);"><i class="btn-sm btn-primary fa fa-plus-circle"></i></div>';
jQuery('#itemRows').append(row);
frm.add_qty.value = '';
frm.add_name.value = '';
}
function removeRow(rnum) {
jQuery('#rowNum'+rnum).remove();
}
And:
var mySource = [{"label":"7545","id2":"Product 001","id3":"50","id5":"3850.00","id6":"19"},
{"label":"9071","id2":"Product 002","id3":"1","id5":"103867.13","id6":"0"},
{"label":"6701","id2":"Product 003","id3":"50","id5":"2556.3","id6":"17"}];
$("#code1").autocomplete({
source: mySource,
select: function(event, ui){
if(ui.item){
$("#id2").val(ui.item.id2);
$("#id3").val(ui.item.id3);
$("#id5").val(ui.item.id5);
$("#id6").val(ui.item.id6);
return ui.item.label;
}
else{
$("#id2").val('');
$("#id3").val('');
$("#id5").val('');
$("#id6").val('');
}
},
change: function(event, ui){
if(ui.item){
$("#id2").val(ui.item.id2);
$("#id3").val(ui.item.id3);
$("#id5").val(ui.item.id5);
$("#id6").val(ui.item.id6);
}
else{
$("#id2").val('');
$("#id3").val('');
$("#id5").val('');
$("#id6").val('');
}
}
});
Autocomplete is only working on the first row. But not the dynamically added rows!
Any idea how I can enable autocomplete on newly added rows too?

You are using same ids for mutliple elements first change them to class . Then , change $("#code1") to $(".code1") then inside select & change function use $(this).closest(".form-group") to refer div where autocomplete is present and use .find() to get required inputs and add values there .
Next , when you add new elements you need to initialize your autocomplete . So, use jQuery('#itemRows .form-group:last .code1').autocomplete(options); this will get last form-group which is added and then get .code1 intialize it .
Lastly , to remove div when - is clicked use jQuery(rnum).closest(".form-group").remove(); where rnum refer to current element which is clicked then using closest remove entire div.
Demo Code :
var mySource = [{
"label": "7545",
"id2": "Product 001",
"id3": "50",
"id5": "3850.00",
"id6": "19"
},
{
"label": "9071",
"id2": "Product 002",
"id3": "1",
"id5": "103867.13",
"id6": "0"
},
{
"label": "6701",
"id2": "Product 003",
"id3": "50",
"id5": "2556.3",
"id6": "17"
}
];
var rowNum = 1
//use like this ..because mutliple places
var options = {
source: mySource,
select: function(event, ui) {
var selector = $(this).closest(".form-group") //here get closest form-group
if (ui.item) {
//find required inputs and then add value there
selector.find(".product").val(ui.item.id2);
selector.find(".package").val(ui.item.id3);
selector.find(".price").val(ui.item.id5);
selector.find(".vat").val(ui.item.id6);
return ui.item.label;
} else {
selector.find(".product").val('');
selector.find(".package").val('');
selector.find(".price").val('');
selector.find(".vat").val('');
}
},
change: function(event, ui) {
var selector = $(this).closest(".form-group")
if (ui.item) {
selector.find(".product").val(ui.item.id2);
selector.find(".package").val(ui.item.id3);
selector.find(".price").val(ui.item.id5);
selector.find(".vat").val(ui.item.id6);
} else {
selector.find(".product").val('');
selector.find(".package").val('');
selector.find(".price").val('');
selector.find(".vat").val('');
}
}
}
function addRow(frm) {
rowNum++;
//remove ids .. add classes
var row = '<div class="row form-group" id="rowNum' + rowNum + '">' +
'<label for="codes">' + rowNum + '</label>' +
'<div class="col col-sm-1"><input type="text" name="code[]" placeholder="Code" class="form-control code1" required></div>' +
'<div class="col col-sm-4"><input type="text" name="product[]" placeholder="Produit" class="form-control product" required></div>' +
'<div class="col col-sm-1"><input type="text" name="package[]" placeholder="Cdt" class="form-control package" required></div>' +
'<div class="col col-sm-1"><input type="text" name="qte[]" placeholder="Qté" class="form-control qty" required></div>' +
'<div class="col col-sm-1"><input type="text" name="price[]" placeholder="Prix Unit" class="form-control price" required></div>' +
'<div class="col col-sm-1"><input type="text" name="vat[]" placeholder="TVA" class="form-control vat" required></div>' +
'<div class="col col-sm-1"><input type="text" name="lot[]" placeholder="Lot" class="form-control lot" required></div>' +
'<div class="col col-sm-1"><input type="text" name="ddp[]" placeholder="DDP" class="form-control ddp" required></div>' +
'<div onclick="removeRow(' + rowNum + ');"><i class="btn-sm btn-danger fa fa-minus-circle"></i></div>' +
'<div onclick="removeRow(this);"><i class="btn-sm btn-primary fa fa-plus-circle">-</i></div>';
jQuery('#itemRows').append(row);
//get last added form-group in that code1 initialize it ..
jQuery('#itemRows .form-group:last .code1').autocomplete(options);
}
function removeRow(rnum) {
jQuery(rnum).closest(".form-group").remove(); //remove closest form-group
var index = 1;
//rstart id and count
$("#itemRows .form-group").each(function() {
index++;
$(this).attr("id", "rowNum" + index);
$(this).find("label[for=codes]").text(index)
})
rowNum--; //decremnt count...
}
$(".code1").autocomplete(options);
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="row form-group">
<label>1</label>
<div class="col col-sm-1"><input type="text" id="code1" name="code[]" placeholder="Code" class="form-control code1" required></div>
<div class="col col-sm-4"><input type="text" id="id2" name="product[]" placeholder="Produit" class="form-control product" required></div>
<div class="col col-sm-1"><input type="text" id="id3" name="package[]" placeholder="Cdt" class="form-control package" required></div>
<div class="col col-sm-1"><input type="text" id="id4" name="qte[]" placeholder="Qté" class="form-control" required></div>
<div class="col col-sm-1"><input type="text" id="id5" name="price[]" placeholder="Prix Unit" class="form-control price" required></div>
<div class="col col-sm-1"><input type="text" id="id6" name="vat[]" placeholder="TVA" class="form-control vat" required></div>
<div class="col col-sm-1"><input type="text" id="id7" name="lot[]" placeholder="Lot" class="form-control lot" required></div>
<div class="col col-sm-1"><input type="text" id="id8" name="ddp[]" placeholder="DDP" class="form-control ddp" required></div>
<div onclick="addRow(this.form);"><i class="btn-sm btn-primary fa fa-plus-circle">+</i></div>
</div>
<div id="itemRows">
</div>

How to prevent append from key in button to not add extra values when a new div is created

I've created a form which will add products to be key in details of the said products, each products will sometime have serialnumbers, users will need to click enabled serial numbers to start key in serial numbers.
So i have issue here whereby, when i add a new product, and key in serial number on product #1, it will have additional value added to it.
in a more detailed and simpler explanation;
Add Product -> product #2 created.
enabled product #1 table to key in
value inputted to textarea became
SGH983819;
;
How do i go about to not let any previous product's key in not add on those ;\n in any previous appended section?
$(document).ready(function() {
function enableSerial() {
$('.enable-serial').on('change', function() {
var item = $(this).data('item');
$('.enable-' + item).prop('disabled', !this.checked);
});
}
$('#add_product').on('click', function() {
var itemNo = $('.product-item').length + 1;
var appendData = '<div class="product-item" data-item="' + itemNo +'">' +
'<span>#' + itemNo +'</span>' +
'<button type="button" class="btn btn-danger float-right remove_product"><i class="fas fa-trash-alt"></i></button>' +
'<div class="form-group row">' +
'<label class="col-sm-2 col-form-label font-weight-bold">Category</label>' +
'<div class="col-sm-2">' +
'<input class="form-control" name="products[' + (itemNo - 1) + ']category" type="text" placeholder="eg. 333" maxlength="3"required>' +
'</div>' +
'<label class="col-sm-1 col-form-label font-weight-bold">Code</label>' +
'<div class="col-sm-2">' +
'<input class="form-control" name="products[' + (itemNo - 1) + ']code" type="text" placeholder="eg. 22" maxlength="2" required>' +
'</div>' +
'<label class="col-sm-1 col-form-label font-weight-bold">Partnumber</label>' +
'<div class="col-sm-2">' +
'<input class="form-control" name="products[' + (itemNo - 1) + ']partnumber" type="text" placeholder="eg. NGH92838" required>' +
'</div>' +
'</div>' +
'<div class="form-group row">' +
'<label class="col-sm-2 col-form-label font-weight-bold">Brand</label>' +
'<div class="col-sm-2">' +
'<input class="form-control" name="products[' + (itemNo - 1) + ']brand" type="text" placeholder="eg. Rototype" required>' +
'</div>' +
'<label class="col-sm-1 col-form-label font-weight-bold">Quantities</label>' +
'<div class="col-sm-2">' +
'<input class="form-control" name="products[' + (itemNo - 1) + ']qty" type="number" placeholder="eg. 1" required>' +
'</div>' +
'<label class="col-sm-1 col-form-label font-weight-bold">Location</label>' +
'<div class="col-sm-2">' +
'<input class="form-control location-ctrl-' + itemNo +' location-ctrl" data-item="' + itemNo +'" type="text" name="products[' + (itemNo - 1) + ']loc_name" list="locations" value="">' +
'<input type="hidden" class="location-id-' + itemNo +'" name="products[' + (itemNo - 1) + ']location_id" value="">' +
'<input type="hidden" class="loc-desc-' + itemNo +'" name="products[' + (itemNo - 1) + ']loc_desc" value="">' +
'</div>' +
'</div>' +
'<div class="form-group row">' +
'<label class="col-sm-2 col-form-label font-weight-bold">Description</label>' +
'<div class="col-sm-8">' +
'<input class="form-control" name="products[0]description" type="text" placeholder="eg. Spare part for CSD2002">' +
'</div>' +
'</div>' +
'<div class="form-group row">' +
'<label class="col-sm-2 col-form-label font-weight-bold">Serial Number(s)</label>' +
'<div class="col-sm-5">' +
'<input class="form-control enable-' + itemNo +' serial-' + itemNo +'" maxlength="25" placeholder="Key in Serial Number and hit button Key In" disabled>' +
'</div>' +
'<div class="col-sm-5">' +
'<button class="btn btn-dark enable-' + itemNo +' keyin-ctrl-' + itemNo +' keyin-ctrl" data-item="' + itemNo +'" type="button" disabled>Key In</button>' +
'<button class="btn btn-dark ml-1 enable-' + itemNo +' undo-ctrl-' + itemNo +' undo-ctrl" data-item="' + itemNo +'" type="button" disabled>Del</button>' +
'<input class="form-check-input ml-4 mt-2 pointer enable-serial-' + itemNo +' enable-serial" data-item="'+ itemNo +'" id="checkbox-' + itemNo +'" type="checkbox">' +
'<label class="form-check-label ml-5 pointer" for="checkbox-' + itemNo +'">tick to enable serialnumber</label>' +
'</div>' +
'</div>' +
'<div class="form-group row">' +
'<label class="col-sm-2 col-form-label"></label>' +
'<div class="col-sm-5">' +
'<textarea class="form-control display-' + itemNo +'" name="products[' + (itemNo - 1) + ']serialnumbers" rows="5" style="resize: none;" placeholder="eg. SGH8484848" readonly></textarea>' +
'</div>' +
'</div>' +
'<hr>' +
'</div>';
$('#append').append(appendData);
enableSerial();
ctrlSerial();
});
function ctrlSerial() {
$('.keyin-ctrl').on('click', function() {
var item = $(this).data('item');
var result = $('.serial-' + item).val() + '; \n';
$('.display-' + item).append(result);
$('.serial-' + item).val('').focus();
});
$('.undo-ctrl').on('click', function() {
var item = $(this).data('item');
$('.display-' + item).html('');
});
}
$('#append').on('click','.remove_product', function(){
var itemNo = $('.product-item').length + 1;
$(this).parent('div').remove();
itemNo--;
});
enableSerial();
ctrlSerial();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="shadow border">
<h4>Product Details</h4>
<hr>
<h5>GRN Details</h5>
<form method="post" action="">
<div class="form-group row">
<label class="col-sm-2 col-form-label font-weight-bold">GRN</label>
<div class="col-sm-4">
<input class="form-control" type="text" value="020719" name="nnmmyy" readonly>
<input type="hidden" name="supp_name" value="ABCD Co. Ltd.">
<input type="hidden" name="supp_do" value="DO97/39901/01">
<input type="hidden" name="do_date" value="17/07/2019">
</div>
</div>
<!-- Multiple Product addition -->
<div class="form-group row">
<label class="col-sm-2 col-form-label font-weight-bold">Product Setting</label><br/>
<div class="col-sm-5">
<button type="button" id="add_product" class="btn btn-dark">Add Product <i class="fas fa-plus-square"></i></button>
</div>
</div>
<hr>
<!-- Frist Group -->
<div class="product" id="append">
<!-- Product Details -->
<div class="product-item" data-item="1">
<span>#1</span>
<div class="form-group row">
<label class="col-sm-2 col-form-label font-weight-bold">Category</label>
<div class="col-sm-2">
<input class="form-control" name="products[0]category" type="text" placeholder="eg. 333" maxlength="3"required>
</div>
<label class="col-sm-1 col-form-label font-weight-bold">Code</label>
<div class="col-sm-2">
<input class="form-control" name="products[0]code" type="text" placeholder="eg. 22" maxlength="2" required>
</div>
<label class="col-sm-1 col-form-label font-weight-bold">Partnumber</label>
<div class="col-sm-2">
<input class="form-control" name="products[0]partnumber" type="text" placeholder="eg. NGH92838" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label font-weight-bold">Brand</label>
<div class="col-sm-2">
<input class="form-control" name="products[0]brand" type="text" placeholder="eg. Rototype" required>
</div>
<label class="col-sm-1 col-form-label font-weight-bold">Quantities</label>
<div class="col-sm-2">
<input class="form-control" name="products[0]qty" type="number" placeholder="eg. 1" required>
</div>
<label class="col-sm-1 col-form-label font-weight-bold">Location</label>
<div class="col-sm-2">
<input class="form-control location-ctrl-1 location-ctrl" data-item="1" type="text" name="products[0]loc_name" list="locations" value="">
<input type="hidden" class="location_id-1" name="products[0]location_id" value="">
<input type="hidden" class="loc_desc-1" name="products[0]loc_desc" value="">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label font-weight-bold">Description</label>
<div class="col-sm-8">
<input class="form-control" name="products[0]description" type="text" placeholder="eg. Spare part for CSD2002">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label font-weight-bold">Serial Number(s)</label>
<div class="col-sm-5">
<input class="form-control enable-1 serial-1" maxlength="25" placeholder="Key in Serial Number and hit button Key In" disabled>
</div>
<div class="col-sm-5">
<button class="btn btn-dark enable-1 keyin-ctrl-1 keyin-ctrl" data-item="1" type="button" disabled>Key In</button>
<button class="btn btn-dark enable-1 undo-ctrl-1 undo-ctrl" data-item="1" type="button" disabled>Del</button>
<input class="form-check-input ml-4 mt-2 pointer enable-serial-1 enable-serial" data-item="1" id="checkbox-1" type="checkbox">
<label class="form-check-label ml-5 pointer" for="checkbox-1">tick to enable serialnumber</label>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label"></label>
<div class="col-sm-5">
<textarea class="form-control display-1" name="products[0]serialnumbers" rows="5" style="resize: none;" placeholder="eg. SGH8484848" readonly></textarea>
</div>
</div>
<hr>
</div>
<!-- append start -->
</div>
<datalist id="locations">
<option value="A0001" data-locationid="1" data-locdesc="Cabinet A"></option>
</datalist>
</form>
</main>
I in hope that there some suggestion or way to do it whereby wont have additional value added when keying previous product serial numbers

found my own fix...
added result.val(''); will reset any key in
function ctrlSerial() {
$('.keyin-ctrl').on('click', function() {
var item = $(this).data('item');
var result = $('.serial-' + item).val() + '; \n';
$('.display-' + item).append(result);
$('.serial-' + item).val('').focus();
result.val(''); // added this to also wipe clean properly
});
$('.undo-ctrl').on('click', function() {
var item = $(this).data('item');
$('.display-' + item).html('');
});
}

Addition On javascript Not working when new row is added

var str ="";
var counter=0;
$(document).ready(function() {
$(".amount, .penalty").change(function() {
var total = 0;
var amount = parseInt($(".amount").val()) || 0;
console.log("amount: "+amount);
var penalty = parseInt($(".penalty").val()) || 0;
console.log("penalty: "+penalty);
total = amount + penalty;
console.log(total);
$("#total").html(total);
});
$(".add").click(function() {
alert();
str +="<div class='form-group row' >"
+"<label class='col-xs-3 col-form-label mr-2'>Reason</label>"
+"<div class='col-xs-9'>"
+ "<input type='text' class='form-control' id='reason"+counter+"' name='reason'>"
+"</div>"
+"<label class='col-xs-3 col-form-label mr-2'>Amount</label>"
+"<div class='col-xs-9'>"
+ "<input type='text' class='form-control amount' id='amount"+counter+"' name='amount'>"
+"</div>"
+ "<label class='col-xs-3 col-form-label mr-2'>Penalty</label>"
+"<div class='col-xs-9'>"
+"<input type='text' class='form-control penalty' id='penalty"+counter+"' name='penalty'>"
+"</div>"
+ "<div class='col-xs-9'>"
+ "<button type='button' class='add'>+</button>"
+ "<button type='button' class='remove'>-</button>"
+ "</div>"
+ "</div>";
counter++;
$("#customsAdd").append(str);
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- <select class="form-control col-md-6">
<option value="1">Customs</option>
<option value="2">VAT</option>
<option value="3">Excise</option>
<option value="4">Others</option>
</select>-->
<!--div for customs!-->
<div class="form-group row" id="forCustoms">
<label class="col-xs-3 col-form-label mr-2">Reason</label>
<div class="col-xs-9">
<input type="text" class="form-control" id="reason" name="reason">
</div>
<label class="col-xs-3 col-form-label mr-2">Amount</label>
<div class="col-xs-9">
<input type="text" class="form-control amount" id="amount" name="amount">
</div>
<label class="col-xs-3 col-form-label mr-2">Penalty</label>
<div class="col-xs-9">
<input type="text" class="form-control penalty" id="penalty" name="penalty">
</div>
<div class="col-xs-9">
<button type="button" class="add">+</button>
<button type="button" class="remove">-</button>
</div>
</div>
<!--div for customs! ends-->
<div id="customsAdd"></div>
<div class="col-md-12">
Total :
<p id="total"></p>
</div>
</div>
</body>
</html>
The total "4" is coming only of first row and upto that my program is correct but when I add the new row then the total is not changing and new row is not added on after clicking "+" button.How to bring new row on "+" button press and change in total?The total is not changing after entering data in 2nd row and "+" is not working.

You have to use .on() for the event to work on dynamically created element. This will allow the event to work on the elements those are added to the body at a later time.
Change:
$(".add").click(function() {
To
$(".container").on("click", ".add", function() {
You can use .map() and reduce() to calculate the total. Try the following way:
var str = "";
var counter = 0;
var total = 0;
$(document).ready(function() {
$(".container").on("input", ".amount, .penalty", function() {
var tArr = $(".amount, .penalty").map(function(i,el){
return Number($(this).val());
}).get();
total = tArr.reduce((a,c) => a+c,0);
//console.log(total);
$("#total").html(total);
});
$(".container").on("click", ".add", function() {
str ="<div class='form-group row' >"
+"<label class='col-xs-3 col-form-label mr-2'>Reason</label>"
+"<div class='col-xs-9'>"
+ "<input type='text' class='form-control' id='reason"+counter+"' name='reason'>"
+"</div>"
+"<label class='col-xs-3 col-form-label mr-2'>Amount</label>"
+"<div class='col-xs-9'>"
+ "<input type='text' class='form-control amount' id='amount"+counter+"' name='amount'>"
+"</div>"
+ "<label class='col-xs-3 col-form-label mr-2'>Penalty</label>"
+"<div class='col-xs-9'>"
+"<input type='text' class='form-control penalty' id='penalty"+counter+"' name='penalty'>"
+"</div>"
+ "<div class='col-xs-9'>"
+ "<button type='button' class='add'>+</button>"
+ "<button type='button' class='remove'>-</button>"
+ "</div>"
+ "</div>";
counter++;
$("#customsAdd").append(str);
});
$(".container").on("click", ".remove", function() {
if($(".form-group.row").length > 1){ // remove only if there is more than one element
$(this).closest('.form-group.row').remove();
$(".amount, .penalty").trigger("input");
}
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<!-- <select class="form-control col-md-6">
<option value="1">Customs</option>
<option value="2">VAT</option>
<option value="3">Excise</option>
<option value="4">Others</option>
</select>-->
<!--div for customs!-->
<div class="form-group row" id="forCustoms">
<label class="col-xs-3 col-form-label mr-2">Reason</label>
<div class="col-xs-9">
<input type="text" class="form-control" id="reason" name="reason">
</div>
<label class="col-xs-3 col-form-label mr-2">Amount</label>
<div class="col-xs-9">
<input type="text" class="form-control amount" id="amount" name="amount">
</div>
<label class="col-xs-3 col-form-label mr-2">Penalty</label>
<div class="col-xs-9">
<input type="text" class="form-control penalty" id="penalty" name="penalty">
</div>
<div class="col-xs-9">
<button type="button" class="add">+</button>
<button type="button" class="remove">-</button>
</div>
</div>
<!--div for customs! ends-->
<div id="customsAdd"></div>
<div class="col-md-12">
Total :
<p id="total"></p>
</div>
</div>

Mamun is right, you need on.
We can make some other improvements too.
We can use your existing row as a template, so if you change your html, you may not need to change your javascript.
You also have a logic issue with your addition function, it won't currently get all fields.
var str ="";
var counter=0;
$(document).ready(function() {
//Use existing row as a template
var rowTemplate = $("#forCustoms").clone(true);
$(".container").on("change", ".amount, .penalty",function() {
var total = 0;
/*NOTE: Not sure what you want to actuall do here
This will always get the fist values, not values
for all
var amount = parseInt($(".amount").val()) || 0;
console.log("amount: "+amount);
var penalty = parseInt($(".penalty").val()) || 0;
console.log("penalty: "+penalty);
*/
/*To Total all values*/
var amount = 0;
var penalty = 0;
$(".form-group,.row").each(function(){
amount += parseInt($(this).find(".amount").val(),10) || 0;
penalty += parseInt($(this).find(".penalty").val(),10) || 0;
})
total = amount + penalty;
console.log(total);
$("#total").html(total);
});
$(".container").on("click" ,".add",function() {
alert();
//Clone our template
var t2 = rowTemplate.clone(true);
//Make Ids Unique
$(t2).attr("id", "row" + counter);
$(t2).find("[name=reason]").attr("id", "reason" + counter);
$(t2).find("[name=amount]").attr("id", "amount" + counter);
$(t2).find("[name=penalty]").attr("id", "penalty" + counter);
counter++;
$("#customsAdd").append(t2);
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- <select class="form-control col-md-6">
<option value="1">Customs</option>
<option value="2">VAT</option>
<option value="3">Excise</option>
<option value="4">Others</option>
</select>-->
<!--div for customs!-->
<div class="form-group row" id="forCustoms">
<label class="col-xs-3 col-form-label mr-2">Reason</label>
<div class="col-xs-9">
<input type="text" class="form-control" id="reason" name="reason">
</div>
<label class="col-xs-3 col-form-label mr-2">Amount</label>
<div class="col-xs-9">
<input type="text" class="form-control amount" id="amount" name="amount">
</div>
<label class="col-xs-3 col-form-label mr-2">Penalty</label>
<div class="col-xs-9">
<input type="text" class="form-control penalty" id="penalty" name="penalty">
</div>
<div class="col-xs-9">
<button type="button" class="add">+</button>
<button type="button" class="remove">-</button>
</div>
</div>
<!--div for customs! ends-->
<div id="customsAdd"></div>
<div class="col-md-12">
Total :
<p id="total"></p>
</div>
</div>
</body>
</html>

How to show text box in html which is declared in JavaScript

I had written JavaScript function to add text boxes with on click function. Here i need to show text boxes wherever i want in the page. The textbox code written in p tag with innerHTML but i need to show text boxes in html.
<div class="col-sm-4 col-md-4">
<div class="row">
<label class="control-label col-sm-12 col-md-10"> </label>
<div class="col-sm-4 col-md-4" id="div">
<div id="wrapper">
<div id="field_div">
<span class="glyphicon glyphicon-plus" onclick="add_field();"></span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="row">
<div class="form-group">
<label class="control-label col-sm-12 col-md-12">Child
</label>
<div class="col-md-12" I need to show text box here instead in javascript </div>
</div>
</div>
</div>
<script>
function add_field() {
var total_text = document.getElementsByClassName("input_text");
total_text = total_text.length + 1;
document.getElementById("field_div").innerHTML = document.getElementById("field_div").innerHTML +
"<p id='input_text" + total_text + "_wrapper'><input type='text' class='input_text' id='input_text" + total_text + "' placeholder='Enter Text'><input type='text' class='form-control input_text' id='input_text" + total_text + "' placeholder='Enter Text'><input type='button' value='Remove' onclick=remove_field('input_text" + total_text + "');></p>";
}
function remove_field(id) {
document.getElementById(id + "_wrapper").innerHTML = "";
}
</script>

You are adding the text box in incorrect div. Simply specify the id = 'childDiv' in the lower div and get the text box there.
function add_field() {
var total_text = document.getElementsByClassName("input_text");
total_text = total_text.length + 1;
document.getElementById("childDiv").innerHTML = document.getElementById("childDiv").innerHTML +
"<p id='input_text" + total_text + "_wrapper'><input type='text' class='input_text' id='input_text" + total_text + "' placeholder='Enter Text'><input type='text' class='form-control input_text' id='input_text" + total_text + "' placeholder='Enter Text'><input type='button' value='Remove' onclick=remove_field('input_text" + total_text + "');></p>";
}
function remove_field(id) {
document.getElementById(id + "_wrapper").innerHTML = "";
}
<div class="col-sm-4 col-md-4">
<div class="row">
<label class="control-label col-sm-12 col-md-10"> </label>
<div class="col-sm-4 col-md-4" id="div">
<div id="wrapper">
<div id="field_div">
<span class="glyphicon glyphicon-plus" onclick="add_field();">+</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="row">
<div class="form-group">
<label class="control-label col-sm-12 col-md-12">Child
</label>
<div id='childDiv' class="col-md-12"> I need to show text box here instead in javascript </div>
</div>
</div>
</div>

<div class="col-sm-4 col-md-4">
<div class="row">
<div class="form-group">
<label class="control-label col-sm-12 col-md-12">Child
</label>
<button onclick="add_field()">Add</button>
<div class="col-md-12" id="field_div"> I need to show text box here instead in javascript </div>
</div>
</div>
</div>
<script>
function add_field() {
var total_text = document.getElementsByClassName("input_text");
total_text = total_text.length + 1;
document.getElementById("field_div").innerHTML = document.getElementById("field_div").innerHTML +
"<p id='input_text" + total_text + "_wrapper'><input type='text' class='input_text' id='input_text" + total_text + "' placeholder='Enter Text'><input type='text' class='form-control input_text' id='input_text" + total_text + "' placeholder='Enter Text'><input type='button' value='Remove' onclick=remove_field('input_text" + total_text + "');></p>";
}
function remove_field(id) {
document.getElementById(id + "_wrapper").innerHTML = "";
}
</script>

Categories

Resources