Autocomplete form fields on dynamically created ones - javascript

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>

Related

Required field form by using id attribute in Javascript

here is my form. When user want to add another form they just click the "tambah bil".
my problem is the function of required just detect the name of input filed. I want the function of required detect by the id of input field because it have the same name in one form.
<fieldset>
<div id="item">
<div class="callout callout-warning" style="margin-top:15px">
<div class="row">
<div class="col-md-12">
<h6><i class="far fa-file-alt"style="font-size:20px"></i><b style="padding-left:7px">Maklumat Bil</b>
<span class="float-sm-right">
<button type="button" name="add" id="add" class="btn btn-block btn-primary btn-sm right add"><i class="fa fa-plus"></i> Tambah Bil</button>
</span></h6><hr>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Jabatan</label>
<input type="hidden" name="jabatan[]" class="form-control" value="<?php echo $dept; ?>">
<span class="form-control form-control-sm"><?php echo $jab; ?></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Kod*</label>
<select class="form-control select2bs4" name="kod[]" id= "kod" required>
<option value="" disabled="disabled" selected="selected">--Pilih Kod--</option>?php foreach($kod as $k):?>
<option value="<?php echo $k->kod;?>"><?php echo $k->kod;?> - <?php echo $k->keterangan;?></option>
<?php endforeach;?>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Perkara (Wajid isi ruangan pertama)*</label>
<input type="text" class="form-control form-control-sm" name="perkara1[]" id="perkara1" required>
<input type="text" class="form-control form-control-sm" name="perkara2[]" id="perkara2" required="false" style="margin-top:6px !important" >
<input type="text" class="form-control form-control-sm" name="perkara3[]" id="perkara3" required="false" style="margin-top:6px !important" >
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>No. Rujukan*</label>
<input id="noruj" type="text" class="form-control form-control-sm" name="noruj[]" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Jumlah (RM)* </label>
<input type="text" id="currency" class="form-control form-control-sm currency" name="jumlah[]" required>
</div>
</div>
</div>
<span>*Ruangan wajib diisi</span>
</div>
</div>
</fieldset>
here is my form in javascript when user want to add another bil.
$('html, body').animate({scrollTop: '+=550px'}, 400);
var html = '';
html += '<div class="callout callout-warning">';
html += '<div class="row"><div class="col-md-12"><h6><i class="far fa-file-alt"style="font-size:20px"></i><b style="padding-left:7px">Maklumat Bil</b><span class="float-sm-right" style="padding-left:5px"><button type="button" name="remove" class="btn btn-block btn-danger btn-sm right remove"><i class="fa fa-minus"></i> Padam Bil</button></span><span class="float-sm-right"><button type="button" name="add" class="btn btn-block btn-primary btn-sm right add"><i class="fa fa-plus"></i> Tambah Bil</button></span></h6><hr></div></div>';
html += '<div class="row"><div class="col-md-12"><div class="form-group"><label>Jabatan*</label><input type="hidden" name="jabatan[]" class="form-control" value="<?php echo $dept; ?>"><span class="form-control form-control-sm"><?php echo $jab; ?></span></div></div></div>';
html += '<div class="row"><div class="col-md-6">';
//html += '<div class="form-group"><label>Kategori*</label><select name="kategori'+i+'[]" class="form-control select2bs4" style="width: 100%;" required><option value="" disabled="disabled" selected="selected">--Pilih Kategori--</option><option value="INDIVIDU">Individu</option><option value="SYARIKAT">Syarikat</option></select></div>';
html += '<div class="form-group"><label>Kod*</label><select class="form-control select2bs4" name="kod[]" id ="kod'+i+'" required><option value="" disabled="disabled" selected="selected">--Pilih Kod--</option><?php foreach($kod as $k):?><option value="<?php echo $k->kod;?>"><?php echo $k->kod;?> - <?php echo $k->keterangan;?></option><?php endforeach;?></select></div>';
html += '</div><div class="col-md-6">';
html += '<div class="form-group"><label>Perkara (Wajib isi ruangan pertama)*</label><input type="text" class="form-control form-control-sm" name="perkara1[]" id="perkara1'+i+'" required><input type="text" class="form-control form-control-sm" name="perkara2[]" id="perkara2'+i+'" style="margin-top:6px !important" ><input type="text" class="form-control form-control-sm" name="perkara3[]" id="perkara3'+i+'" style="margin-top:6px !important" ></div>';
html += '</div></div>';
html += '<div class="row"><div class="col-md-6">';
html += '<div class="form-group"><label>No. Rujukan*</label><input id="noruj'+i+'" type="text" class="form-control form-control-sm" name="noruj[]" required></div>';
html += '</div><div class="col-md-6">';
html += '<div class="form-group"><label>Jumlah (RM)*</label><input type="text" id="currency" class="form-control form-control-sm currency" name="jumlah[]" required></div>';
html += '</div><span>*Ruangan wajib diisi</span></div>';
html += '</div>';
$('#item').append(html);
$(function()
{
const inputs = $("input").prop('required',true);
console.log('return value:');
inputs.each(log);
console.log('');
console.log('selector:');
$("input[required]").each(log);
function log(index, element)
{
console.log($(element).attr("id"));
}
});
the coding required field just read input field outside the javascript...
how i want to detect the input in javascript form is required by using id attribute??
function required cannot detect the id of input field, function detect the name of input field it is because in one form have same name of input field.
anybody can help me??
thank you in advance.

You could use it immediately after you set the prop
const inputs = $("input").prop('required',true);
console.log(inputs);
You can also use an attribute selector
const inputs = $("input[required]");
const i = 1;
$('html, body').animate({scrollTop: '+=550px'}, 400);
var html = '';
html += '<div class="callout callout-warning">';
html += '<div class="row"><div class="col-md-12"><h6><i class="far fa-file-alt"style="font-size:20px"></i><b style="padding-left:7px">Maklumat Bil</b><span class="float-sm-right" style="padding-left:5px"><button type="button" name="remove" class="btn btn-block btn-danger btn-sm right remove"><i class="fa fa-minus"></i> Padam Bil</button></span><span class="float-sm-right"><button type="button" name="add" class="btn btn-block btn-primary btn-sm right add"><i class="fa fa-plus"></i> Tambah Bil</button></span></h6><hr></div></div>';
html += '<div class="row"><div class="col-md-12"><div class="form-group"><label>Jabatan*</label><input type="hidden" name="jabatan[]" class="form-control" value="<?php echo $dept; ?>"><span class="form-control form-control-sm"><?php echo $jab; ?></span></div></div></div>';
html += '<div class="row"><div class="col-md-6">';
//html += '<div class="form-group"><label>Kategori*</label><select name="kategori'+i+'[]" class="form-control select2bs4" style="width: 100%;" required><option value="" disabled="disabled" selected="selected">--Pilih Kategori--</option><option value="INDIVIDU">Individu</option><option value="SYARIKAT">Syarikat</option></select></div>';
html += '<div class="form-group"><label>Kod*</label><select class="form-control select2bs4" name="kod[]" id ="kod'+i+'" required><option value="" disabled="disabled" selected="selected">--Pilih Kod--</option><?php foreach($kod as $k):?><option value="<?php echo $k->kod;?>"><?php echo $k->kod;?> - <?php echo $k->keterangan;?></option><?php endforeach;?></select></div>';
html += '</div><div class="col-md-6">';
html += '<div class="form-group"><label>Perkara (Wajib isi ruangan pertama)*</label><input type="text" class="form-control form-control-sm" name="perkara1[]" id="perkara1'+i+'" required><input type="text" class="form-control form-control-sm" name="perkara2[]" id="perkara2'+i+'" style="margin-top:6px !important" ><input type="text" class="form-control form-control-sm" name="perkara3[]" id="perkara3'+i+'" style="margin-top:6px !important" ></div>';
html += '</div></div>';
html += '<div class="row"><div class="col-md-6">';
html += '<div class="form-group"><label>No. Rujukan*</label><input id="noruj'+i+'" type="text" class="form-control form-control-sm" name="noruj[]" required></div>';
html += '</div><div class="col-md-6">';
html += '<div class="form-group"><label>Jumlah (RM)*</label><input type="text" id="currency" class="form-control form-control-sm currency" name="jumlah[]" required></div>';
html += '</div><span>*Ruangan wajib diisi</span></div>';
html += '</div>';
$('#item').append(html);
$(function()
{
const inputs = $("input").prop('required',true);
console.log('return value:');
inputs.each(log);
console.log('');
console.log('selector:');
$("input[required]").each(log);
function log(index, element) {
console.log($(element).attr('name'));
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="item"></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('');
});
}

Remove multiple text box in on-click

Adding multiple text-box using j-query
HTML
<div class="col-md-12">
<div class="col-md-3"><label>Name</label><input type="text" class="form-control" name=""/></div>
<div class="col-md-2"><label>Count</label><input type="text" class="form-control" name=""/></div>
<div class="col-md-3"><label>Brand</label><input type="text" class="form-control" name=""/></div>
<div class="col-md-3"><label>Condition</label><input type="text" class="form-control" name=""/></div>
<div class="col-md-1" style="margin-top:30px;"></span></div>
<div class="contents"></div>
</div>
And script like
<script>
$(document).ready(function() {
$(".add").click(function() {
$('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(".contents");
$('<div class="col-md-2"><input type="text" class="form-control" name=""/></div>').appendTo(".contents");
$('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(".contents");
$('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(".contents");
$('<div class="col-md-1"><span class="rem" ><a href="javascript:void(0);" >Remove</span></div>').appendTo(".contents");
});
});
</script>
The above query is used to add multiple text box that properly working and i try to remove added items in remove button but that only remove one text box only i am using this script
<script>
$('.contents').on('click', '.rem', function() {
$(this).parent("div").remove();
});
</script>
any way to remove the clicked full row only ?
enter image description here

You can rewrite code like this. You are removing the container, that was the issue
$(document).ready(function() {
$(".add").click(function() {
var container= $('<div>');
$('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(container);
$('<div class="col-md-2"><input type="text" class="form-control" name=""/></div>').appendTo(container);
$('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(container);
$('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(container);
$('<div class="col-md-1"><span class="rem" ><a href="javascript:void(0);" >Remove</span></div>').appendTo(container);
$('.childControl').after($(container).clone());
});
$('.contents').on('click', '.rem', function() {
$(this).parent("div").parent("div").empty();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="col-md-3"><label>Name</label><input type="text" class="form-control" name=""/></div>
<div class="col-md-2"><label>Count</label><input type="text" class="form-control" name=""/></div>
<div class="col-md-3"><label>Brand</label><input type="text" class="form-control" name=""/></div>
<div class="col-md-3"><label>Condition</label><input type="text" class="form-control" name=""/></div>
<div class="col-md-1" style="margin-top:30px;"></span>Add</div>
<div class="contents"><div class="childControl"></div>
</div>

Updated answer: Use prevUntil() to achieve this:
$('.contents').on('click', '.rem', function() {
$(this).parent().prevUntil(".col-md-1").remove();
$(this).parent().remove();
});
$(document).ready(function() {
$(".add").click(function() {
$('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(".contents");
$('<div class="col-md-2"><input type="text" class="form-control" name=""/></div>').appendTo(".contents");
$('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(".contents");
$('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(".contents");
$('<div class="col-md-1"><span class="rem" ><a href="javascript:void(0);" >Remove</span><hr></div>').appendTo(".contents");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="col-md-3"><label>Name</label><input type="text" class="form-control" name="" /></div>
<div class="col-md-2"><label>Count</label><input type="text" class="form-control" name="" /></div>
<div class="col-md-3"><label>Brand</label><input type="text" class="form-control" name="" /></div>
<div class="col-md-3"><label>Condition</label><input type="text" class="form-control" name="" /></div>
<div class="col-md-1" style="margin-top:30px;">
<span class="glyphicon glyphicon-plus">Add this</span>
</div>
<div class="contents"></div>
</div>

The parent should be grand parent, try below code
replace $(this).parent("div").remove();
with
$(this).parent().parent().remove();
so final code is:
<script>
$('.contents').on('click', '.rem', function() {
$(this).parent().parent().remove();
});
</script>

Get values from Dynamically Input Fields and Store to Database with PHP

I have form to create an itinerary. I have the add new button to create new fields for each day. My form looks like that:
Js
$(document).ready(function() {
bookIndex = 0;
$('#bookForm')
// Add button click handler
.on('click', '.addButton', function() {
bookIndex++;
var $template = $('#bookTemplate'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.attr('data-book-index', bookIndex)
.insertBefore($template);
// Update the name attributes
$clone
.find('[name="day"]').attr('name', 'day[' + bookIndex + ']').end()
.find('[name="departs_on"]').attr('name', 'departs_on[' + bookIndex + ']').end()
.find('[name="arrives_on"]').attr('name', 'arrives[' + bookIndex + ']').end()
.find('[name="port_code"]').attr('name', 'port_code[' + bookIndex + ']').end()
.find('[name="port_name"]').attr('name', 'port_name[' + bookIndex + ']').end()
.find('[name="location"]').attr('name', 'location[' + bookIndex + ']').end()
.find('[name="latitude"]').attr('name', 'latitude[' + bookIndex + ']').end()
.find('[name="longitude"]').attr('name', 'longitude[' + bookIndex + ']').end();
// Add new fields
// Note that we also pass the validator rules for new field as the third parameter
})
// Remove button click handler
.on('click', '.removeButton', function() {
var $row = $(this).parents('.form-group'),
index = $row.attr('data-book-index');
// Remove fields
$('#bookForm')
// Remove element containing the fields
$row.remove();
});
});
And my HTML:
<form id="bookForm" method="post" class="form-horizontal">
<div class="form-group">
<div class="col-xs-4 col-lg-1">
<label class="col-xs-1 control-label">Day</label>
<input type="text" class="form-control" name="day[]" placeholder="day" />
</div>
<div class="col-xs-4 col-lg-2">
<label class="control-label">Departs</label>
<input type="date" class="form-control" name="departs_on[]" placeholder="departs_on" />
</div>
<div class="col-xs-2 col-lg-2">
<label class="control-label">Arrives On</label>
<input type="date" class="form-control" name="arrives_on[]" placeholder="arrives_on" />
</div>
<div class="col-xs-2 col-lg-1">
<label class="control-label">Port Code</label>
<input type="text" class="form-control" name="port_code[]" placeholder="port_code" />
</div>
<div class="col-xs-2 col-lg-1">
<label class="control-label">Port Name</label>
<input type="text" class="form-control" name="port_name[]" placeholder="port_name" />
</div>
<div class="col-xs-2 col-lg-2">
<label class="control-label">Location</label>
<input type="text" class="form-control" name="location[]" placeholder="location" />
</div>
<div class="col-xs-2 col-lg-1">
<label class="control-label">Latitude</label>
<input type="text" class="form-control" name="latitude[]" placeholder="latitude" />
</div>
<div class="col-xs-2 col-lg-1">
<label class="control-label">Longitude</label>
<input type="text" class="form-control" name="longitude[]" placeholder="longitude" />
</div>
</div>
</form>
I have this hidden form as well for the add new fields
<div class="form-group hide" id="bookTemplate">
<div class="col-xs-4 col-lg-1">
<label class="col-xs-1 control-label">Day</label>
<input type="text" class="form-control" name="day" placeholder="day" />
</div>
<div class="col-xs-4 col-lg-2">
<label class="control-label">Departs</label>
<input type="date" class="form-control" name="departs_on" placeholder="departs_on" />
</div>
<div class="col-xs-2 col-lg-2">
<label class="control-label">Arrives On</label>
<input type="date" class="form-control" name="arrives_on" placeholder="arrives_on" />
</div>
<div class="col-xs-2 col-lg-1">
<label class="control-label">Port Code</label>
<input type="text" class="form-control" name="port_code" placeholder="port_code" />
</div>
<div class="col-xs-2 col-lg-1">
<label class="control-label">Port Name</label>
<input type="text" class="form-control" name="port_name" placeholder="port_name" />
</div>
<div class="col-xs-2 col-lg-2">
<label class="control-label">Location</label>
<input type="text" class="form-control" name="location" placeholder="location" />
</div>
<div class="col-xs-2 col-lg-1">
<label class="control-label">Latitude</label>
<input type="text" class="form-control" name="latitude" placeholder="latitude" />
</div>
<div class="col-xs-2 col-lg-1">
<label class="control-label">Longitude</label>
<input type="text" class="form-control" name="longitude" placeholder="longitude" />
</div>
<div class="col-xs-1 col-lg-1">
<button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i></button>
</div>
It working.
I was wondering is there any option to get this as an array and then insert then to database or should I use a loop and run e.g 6 times my db query?
I got lost a little bit here. I tried to create an array but nothing worked.
How to get the values of the inputs for each day and insert into the database with PHP?

In form name attribute build a array like below
name="data[0][day]"
In jquery
name="data[1][day]" // 1 should be replaced with incrementer variable
so you will get each date separately . so you can loop the array and insert the data into mysql .
Example array : This is you will get on server side
array( [0]=>array(
[day]=>value,
[departs_on]=>value,
.......
),
[1]=>array(
[day]=>value,
[departs_on]=>value,
.......
),
.........
)

How To Get Right SrNo in Add remove Clone With My Calculation

How To Get Right SrNo in Add remove Clone With My Calculation
Click To Add(Multiple Time) After Delete Some Row After Re Click Add To Get SrNo Wrong And I Want With My Calculation...
<div id="button_pro">
<div id='input_1' class="row">
<div class="input-field col s1">
<input class="sno" type="text" name="Sr_1" value="1" >
<label for="Sr">Sr</label>
</div>
<div class="input-field col s2">
<input id="item_code" type="text" name="item_code_1" value=" ">
<label for="item_code">Item Code</label>
</div>
<div class="input-field col s2">
<input id="item_name" type="text" name="item_name_1" value=" ">
<label for="item_name">Item Name</label>
</div>
<div class="input-field col s1">
<input type="text" class="quantity" name="quantity_1" value=" ">
<label for="quantity">Quantity</label>
</div>
<div class="input-field col s1">
<input type="text" class="net_rate" name="net_rate_1" value=" ">
<label for="net_rate">Net Rate</label>
</div>
<div class="input-field col s1">
<input type="text" class="tax" name="tax_1" value=" ">
<label for="tax">tax</label>
</div>
<div class="input-field col s1">
<input type="text" class="Gross Rate" name="Gross Rate_1" value=" ">
<label for="Gross Rate">Gross Rate</label>
</div>
<div class="input-field col s1">
<input type="text" class="total" name="total_1" value=" " readonly>
<label for="total">total</label>
</div>
<div class="input-field col s2"> <i class="mdi-content-add">Add</i>
</div>
</div>
</div>
<div class="row">
<div class="input-field col s8">
</div>
<div class="input-field col s2">
<input type="text" name="Grand" id="Grand" value=" ">
<label for="net_rate">Grand Total</label>
</div>
</div>
$('document').ready(function(){
var id=2,txt_box;
$('#button_pro').on('click','.add',function(){
$(this).remove();
txt_box='<div id="input_'+id+'" class="row"><div class="input-field col s1"><input type="text" name="Sr_'+id+'" value="'+id+'" ><label for="SrNo" class="active">SrNo</label></div><div class="input-field col s2"><input id="item_code" type="text" name="item_code_'+id+'"><label for="item_code" class="active">Item Code</label></div><div class="input-field col s2"><input id="item_name" type="text" name="item_name_'+id+'"><label for="item_name" class="active">Item Name</label></div><div class="input-field col s1"><input id="qty" type="text" name="quantity_'+id+'"><label for="quantity" class="active">Quantity</label></div><div class="input-field col s1"><input type="text" name="net_rate_'+id+'" ><label for="net_rate" class="active">Net Rate</label></div><div class="input-field col s1"><input type="text" name="tax_'+id+'" ><label for="tax"class="active">tax</label></div><div class="input-field col s1"><input type="text" name="Gross_Rate_'+id+'"><label for="Gross Rate" class="active">Gross Rate</label></div><div class="input-field col s1"><input type="text" name="total_'+id+'"><label for="total" class="active">total</label></div><div class="input-field col s2"><i class="mdi-content-add">Add</i></div><i class="mdi-content-clear">Remove</i></div>';
$("#button_pro").append(txt_box);
id++;
});
$('#button_pro').on('click','.remove',function(){
var parent=$(this).parent().prev().attr("id");
var parent_im=$(this).parent().attr("id");
$("#"+parent_im).slideUp('fast',function(){
$("#"+parent_im).remove();
if($('.add').length<1){
$("#"+parent).append('<div class="input-field col s2"> <i class="mdi-content-add">Add</i></div> ');
}
});
});
});
http://jsfiddle.net/p6jaxvzz/5/ Example For Problem

$('#button_pro').on('click', '.remove', function () {
var parent = $(this).parent().prev().attr("id");
var parent_im = $(this).parent().attr("id");
$("#" + parent_im).slideUp('fast', function () {
$("#" + parent_im).remove();
if ($('.add').length < 1) {
$("#" + parent).append('<div class="input-field col s2"> <i class="mdi-content-add">Add</i></div> ');
}
var $rows = $('.row');
$rows.each(function (i) {
if (i < $rows.length - 1) {
i++;
var $inputs = $('input', this);
$inputs.eq(0).attr('name', 'Sr_' + i).val(i);
$inputs.eq(1).attr('name', 'item_code_' + i);
$inputs.eq(2).attr('name', 'item_name_' + i);
$inputs.eq(3).attr('name', 'quantity_' + i);
$inputs.eq(4).attr('name', 'net_rate_' + i);
$inputs.eq(5).attr('name', 'tax_' + i);
$inputs.eq(6).attr('name', 'Gross_Rate_' + i);
$inputs.eq(7).attr('name', 'total_' + i);
}
});
id--;
});
});
Fiddle

This will surely help you. I have moddifed your sequence of elements in HTML too, but they are fine don't worry about that.
Here just showing you only for two fields, you add rest in var clone
JSFiddle
HTML
<div class="button_pro">
<div id='input_1' class="row">
<div class="input-field col s1">
<input class="sno" type="text" name="Sr_1" value="1">
<label for="Sr">Sr</label>
</div>
<div class="input-field col s2">
<input id="item_code" type="text" name="item_code_1" value=" ">
<label for="item_code">Item Code</label>
</div>
</div>
</div>
<div class="row">
<div class="input-field col s2">
<a href="#" class="btn-floating waves-effect waves-light add ">
<i class="mdi-content-add">Add</i>
</a>
</div>
<div class="input-field col s2">
<a href="#" class="btn-floating waves-effect waves-light remove ">
<i class="mdi-content-add">Remove</i>
</a>
</div>
<div class="input-field col s8"></div>
<div class="input-field col s2">
<input type="text" name="Grand" id="Grand" value=" ">
<label for="net_rate">Grand Total</label>
</div>
</div>
JavaScript/JQuery
$(".remove").hide();
$(function () {
$(".add").click(function () {
num = $(".button_pro").length;
//alert(num);
if(num>=1)
{
$(".remove").show();
}
incr = num + 1;
var clone = '<div class="button_pro">';
clone += '<div id="input_' + incr + '" class="row">';
clone += '<div class="input-field col s1">';
clone += '<input class="sno" type="text" name="Sr_' + incr + '" value="' + incr + '">';
clone += '<label for="Sr">Sr</label>';
clone += '</div>';
clone += '<div class="input-field col s2">';
clone += '<input id="item_code" type="text" name="item_code_' + incr + '" value=" ">'
clone += '<label for="item_code">Item Code</label>'
clone += '</div>';
clone += '</div>';
clone += '</div>';
$(clone).insertBefore($(this).closest('.row'));
});
$(".remove").click(function () {
lastnum = $(".button_pro").length;
if(lastnum == 2)
{
$(".remove").hide();
}
$(".button_pro:nth-child(" + lastnum + ")").remove();
});
});

Categories

Resources