In the form have a one div tag in which some fields have,now i can create more fields from this one div tag,from the plus symbol with javascript and i can remove also div fields through minus symbol...
in the main or first DIV tag all categories are displayed but when i create another DIV through plus symbol so all categories are not display..
please anyone tell me how i can solve this problem...
js code
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script type="text/javascript">
$(document).ready(function(){
var addButton = $('#addButton');
var wrapper = $('#wrapper');
var x = "{{$detail_count + 1}}";
$(addButton).click(function(){
x++;
$(wrapper).append(
'<div class="form-group row">'+
'<label class="col-sm-1 col-form-label" style="text-align-last: right;">Category : </label>'+
'<div class="col-sm-2">'+
'<select class="form-control" name="cat_id" id="category '+x+'">'+
'<option value="" disabled selected>Select Category</option>'+
'foreach($category as $key){'+
'<option value="{{ $key->id }}">{{ $key->cat_nm }}</option>'+
' }' +
'</select>'+
'</div>'+
'<label class="col-sm-1 col-form-label" style="text-align-last: right;">SubCategory : </label>'+
'<div class="col-sm-2">'+
'<select class="form-control" id="subcategory '+x+'" name="sub_cat_id">'+
'<option value="" disabled selected>Subcategory from category</option>'+
'</select>'+
'</div>'+
'<label class="col-sm-1 col-form-label" style="text-align-last: right;">Product Price:</label>'+
'<div class="col-sm-2">'+
'<select class="form-control" id="productprice '+x+'" name="pro_price"> '+
'<option>Price from subcategory</option>'+
'</select>'+
'</div>'+
'<label class="col-sm-1 col-form-label" style="text-align-last: right;">Total : </label>'+
'<div class="col-sm-1">'+
'<input type="text" class="form-control" name="total[]" cat_id="total '+x+'">'+
'</div>'+
'<div class="col-sm-1">'+
'<i class="fa fa-minus"></i>'+
'</div>'+
'</div>'
);
});
$(wrapper).on('click','#remove',function(){
if(confirm("Do you want to delete this row?")){
$(this).parent().parent().remove();
}
});
});
</script>
HTML Code
<div class="col-md-12 field-wrapper" id="wrapper">
<div class="form-group row">
<label class="col-sm-1 col-form-label" style="text-align-last: right;">Category : </label>
<div class="col-sm-2">
<select class="form-control" name="cat_id" id="category">
<option value="" disabled selected>Select Category</option>
#foreach($category as $key)
<option value="{{ $key->id }}">{{ $key->cat_nm }}</option>
#endforeach
</select>
</div>
<label class="col-sm-1 col-form-label" style="text-align-last: right;">SubCategory : </label>
<div class="col-sm-2">
<select class="form-control" id="subcategory" name="sub_cat_id">
<option value="" disabled selected>Subcategory from category</option>
</select>
</div>
<label class="col-sm-1 col-form-label" style="text-align-last: right;">Product Price:</label>
<div class="col-sm-2">
<select class="form-control" id="productprice" name="pro_price">
<option>Price from subcategory</option>
</select>
</div>
<label class="col-sm-1 col-form-label" style="text-align-last: right;">Total : </label>
<div class="col-sm-1">
<input type="text" class="form-control" name="total[]">
</div>
<div class="col-sm-1">
<i class="fa fa-plus"></i>
</div>
</div>
</div>
First DIV
Another DIVs
This is is happening because your foreach loop is inside your append() and it is not appending the all option only last value is getting appended that you can see in your output.Now, to solve this put this foreach loop outside your append something like this (I don't know much about laravel so there may be syntax error ) :
var select=""
foreach($category as $key){
//appending option in select variable
select+='<option value="{{ $key->id }}">{{ $key->cat_nm }}</option>';
}
Then passed this value i.e: select in append something like below :
$(wrapper).append(
'<div class="form-group row">' +
'<label class="col-sm-1 col-form-label" style="text-align-last: right;">Category : </label>' +
'<div class="col-sm-2">' +
'<select class="form-control" name="cat_id" id="category ' + x + '">' +
'<option value="" disabled selected>Select Category</option>' +
select + //<--pass here
'</select>' + '</div>');
Related
by click of the button the same form is added under that form but how can i get the value of the number of times it getting printed &store it in table. How can I insert the data into table if the user add more experiences from model. On the click of the button the value in the value field should increment too and how can I enter if the user add any number of experiences so how can I enter the data in the table. I am inserting this data in table in row wise fashion in table
<div class="col-md-12" id="addexperience">
<button type="button" class="btn-primary" style="float:right;" onclick="addexperience()">Add work experience</button>
<input type="hidden" name="1experience" id="1experience" value="<?php $i = 1; ?>">
<div class="form-group">
<label>If yes, fill the following table</label>
<div class="col-md-3">
<label>Status</label>
<select class="form-control" name="status">
<option value="">Select</option>
<option value="1" <?php sel($student_experience['status'], '1'); ?>>Current</option>
<option value="0" <?php sel($student_experience['status'], '0'); ?>>Past</option>
</select>
</div>
<div class="col-md-3">
<label>Designation</label>
<input type="text" class="form-control" name="designation" value="<?php echo esc_output($student_experience['designation']);?>">
</div>
<div class="col-md-3">
<label>Duration</label>
<input type="number" class="form-control" name="duration" value="<?php echo esc_output($student_experience['duration']);?>">
</div>
<div class="col-md-3">
<label>Employer</label>
<input type="text" class="form-control" name="employer" value="<?php echo esc_output($student_experience['employer']);?>">
</div>
</div>
</div>
<script>
function addexperience(){
var i = $('#1experience').val();
i++;
$('#addexperience').append('<div class="col-md-3"> <label>Status</label> <select class="form-control" name="status'+i+'">'+
'<option value="">Select</option>'+
'<option value="Current">Current</option>'+
'<option value="Past">Past</option> </select> </div>'+
'<div class="col-md-3">'+
'<label>Designation</label>'+
'<input type="text" class="form-control" name="designation'+i+'">'+
'</div>'+
'<div class="col-md-3">'+
'<label>Duration</label>'+
'<input type="text" class="form-control" name="duration'+i+'">'+
'</div>'+
'<div class="col-md-3">'+
'<label>Employer</label>'+
'<input type="text" class="form-control" name="employer'+i+'">'+
'</div>'+
'</div>');
$(function () {
$('#1experience').val(i);
});
}
</script>
If you modify the HTML slightly in both the initial page display and within the javascript function so that the newly added items are grouped within a single container(div) and the initial elements are similarly grouped and a name assigned to the immediate ancestor of the initially displayed elements ( here I chose data-id='receiver' ) then this matter of deducing the number of times the elements have been added becomes a matter of counting the child elements within the common parent - querySelectorAll being useful here though no doubt jQuery has a concise method to do this too.
With that said though if you were to use the array syntax form form element names, such as designation[] or duration[] when the form is submitted you will have access to each element as an array in PHP ( or other backend language ) which will also, as a byproduct, reveal that same number of elements. Using the array syntax means you do not need to try to keep track of this number within the client
function addexperience() {
let i=document.querySelectorAll('[data-id="receiver"] > div').length;
$('[data-id="receiver"]').append('<div><div class="col-md-3"> <label>Status</label> <select class="form-control" name="status' + i + '">' +
'<option value="">Select</option>' +
'<option value="Current">Current</option>' +
'<option value="Past">Past</option> </select> </div>' +
'<div class="col-md-3">' +
'<label>Designation</label>' +
'<input type="text" class="form-control" name="designation' + i + '">' +
'</div>' +
'<div class="col-md-3">' +
'<label>Duration</label>' +
'<input type="text" class="form-control" name="duration' + i + '">' +
'</div>' +
'<div class="col-md-3">' +
'<label>Employer</label>' +
'<input type="text" class="form-control" name="employer' + i + '">' +
'</div>' +
'</div></div>');
alert(i);
document.querySelector('input[name="duplicates"]').value=i;
fetch( location.href, {method:'post',body:'total='+i})
.then(r=>r.text())
.then(text=>{
alert(text)
})
}
[data-id='receiver']{border:1px solid red;margin:1rem;padding:1rem;}
[data-id='receiver'] > div{margin:1rem;border:1px solid black;padding:0.5rem}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-12" id="addexperience">
<button type="button" class="btn-primary" style="float:right;" onclick="addexperience()">Add work experience</button>
<div data-id='receiver' class="form-group">
<div>
<label>If yes, fill the following table</label>
<div class="col-md-3">
<label>Status</label>
<select class="form-control" name="status">
<option value="">Select</option>
<option value="1" <?php sel($student_experience[ 'status'], '1'); ?>>Current</option>
<option value="0" <?php sel($student_experience[ 'status'], '0'); ?>>Past</option>
</select>
</div>
<div class="col-md-3">
<label>Designation</label>
<input type="text" class="form-control" name="designation" value="<?php echo esc_output($student_experience['designation']);?>">
</div>
<div class="col-md-3">
<label>Duration</label>
<input type="number" class="form-control" name="duration" value="<?php echo esc_output($student_experience['duration']);?>">
</div>
<div class="col-md-3">
<label>Employer</label>
<input type="text" class="form-control" name="employer" value="<?php echo esc_output($student_experience['employer']);?>">
</div>
</div>
<!-- additional content inserted here within common parent -->
</div>
</div>
<input type='hidden' name='duplicates' />
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>
I have multiple input that when you select the option, the stock and the price would come out on other input to be used for another function.
i've tried to add unique id's for the inputs added but i just cant seem to figure out how to apply the function to the added inputs.
here is the Html:
<div id="container1">
<div class="form-group row">
<div class="col-lg-3">
<select class="form-control border-teal" id="produk_nama1" name="produk_nama[]">
<option value="">Pilih Produk</option>
#foreach ($stoks as $stok)
<option data-stok="{{$stok->stok}}" data-price="{{$stok->harga}}" value="{{$stok->produk->produk}}">{{$stok->produk->produk}}</option>
#endforeach
</select>
<div class="d-block form-text">
<span id="stok1" class="badge bg-orange"></span>
</div>
</div>
<div class="col-lg-3">
<input type="text" id="harga1" name="harga[]" class="form-control border-teal border-1" placeholder="Harga Produk" readonly>
</div>
<div class="col-lg-3">
<input type="number" id="jumlah1" name="jumlah[]" min="1" class="form-control border-teal border-1" placeholder="Masukkan Jumlah">
</div>
<div class="col-lg-3">
<input type="text" id="subtotal1" name="subtotal" class="form-control border-teal border-1" placeholder="Subtotal" readonly>
</div>
</div>
</div>
here is the javascript:
$(document).ready(function() {
var add_button = $("#add_button");
var inputs = document.getElementsByTagName('input');
var select = document.getElementById("produk_nama");
var i = 1;
$(add_button).click(function(e) {
e.preventDefault();
i++;
$("#container1")
var html = '<div class="form-group row">';
// select buah
html += '<div class="col-lg-3">';
html += '<select class="form-control border-teal" id="produk_nama'+i+'" name="produk_nama[]">';
html += '<option value="">Pilih Produk</option>';
html += '#foreach ($stoks as $stok)';
html += '<option data-stok="{{$stok->stok}}" data-price="{{$stok->harga}}" value="{{$stok->produk->produk}}">{{$stok->produk->produk}}</option>';
html += '#endforeach';
html += '</select>';
html += '<div class="d-block form-text">';
html += '<span id="stok'+i+'" class="badge bg-orange"></span>';
html += '</div></div>';
html += '<div class="col-lg-3">';
html += '<input type="text" id="harga'+i+'" name="harga[]" class="form-control border-teal border-1" placeholder="Harga Produk" readonly>';
html += '</div>';
html += '<div class="col-lg-3">';
html += '<input type="number" id="jumlah'+i+'" name="jumlah[]" min="1" class="form-control border-teal border-1" placeholder="Masukkan Jumlah">';
html += '</div>';
html += '<div class="col-lg-3">';
html += '<input type="text" id="subtotal'+i+'" name="subtotal" class="form-control border-teal border-1" placeholder="Subtotal" readonly>';
html += '</div>';
html += '</div>';
$(this).before(html);
// clone entire div
// $("#container1")
// .append(
// $("#container1")
// .children(inputs)
// .first()
// .clone()
// )
});
// main input function
$('#produk_nama'+i).on('change', function(){
alert(i);
var hargaproduk = $('#produk_nama'+i+' option:selected').data('price');
var stok = $('#produk_nama'+i+' option:selected').data('stok');
$('#stok'+i).text('Stok '+stok);
$('#harga'+i).val(hargaproduk);
});
document.getElementById('jumlah'+i).addEventListener("blur", function(){
var jumlah = $('#jumlah'+i).val();
var harga = $('#harga'+i).val();
var subtotal = jumlah * harga;
$('#subtotal'+i).val(subtotal);
})
});
any help and explanation would be much appreciated, thank you
As your first select-box i.e :produk_nama is same for all divs you can use clone() method to get clone of that select instead of writing laravel code inside jquery code.
Then , you can use $(document).on("change", "select[name*=produk_nama]".. to capture all change event on select-box . Inside this you can use .closest() and .find() method to get required values from input you needed and add the value to required inputs.Same you can do for jumlah input .
Demo Code :
$(document).ready(function() {
var add_button = $("#add_button");
var i = 1;
$(add_button).click(function(e) {
e.preventDefault();
i++;
$("#container1")
//get first div > selct clone it
var slects = $('.outer:first').find("select").clone();
var html = '<div class="form-group row outer">';
html += '<div class="col-lg-3">';
html += '<select class="form-control border-teal" id="produk_nama' + i + '" name="produk_nama[]">';
html += $(slects).html(); //add that
html += '</select>';
html += '<div class="d-block form-text">';
html += '<span id="stok' + i + '" class="badge bg-orange"></span>';
html += '</div></div>';
html += '<div class="col-lg-3">';
html += '<input type="text" id="harga' + i + '" name="harga[]" class="form-control border-teal border-1" placeholder="Harga Produk" readonly>';
html += '</div>';
html += '<div class="col-lg-3">';
html += '<input type="number" id="jumlah' + i + '" name="jumlah[]" min="1" class="form-control border-teal border-1" placeholder="Masukkan Jumlah">';
html += '</div>';
html += '<div class="col-lg-3">';
html += '<input type="text" id="subtotal' + i + '" name="subtotal" class="form-control border-teal border-1" placeholder="Subtotal" readonly>';
html += '</div>';
html += '</div>';
$(this).before(html);
});
//on change of selct
$(document).on("change", "select[name*=produk_nama]", function() {
//get attrs values
var hargaproduk = $(this).find("option:selected").attr('data-price');
var stok = $(this).find("option:selected").attr('data-stok');
//add the values to required elemnt
$(this).closest(".outer").find(".d-block span").text('Stok ' + stok)
$(this).closest(".outer").find("input[name*=harga]").val(hargaproduk);
});
$(document).on("blur", "input[name*=jumlah]", function() {
var jumlah = $(this).val(); //get value
var harga = $(this).closest(".outer").find("input[name*=harga]").val();
var subtotal = jumlah * harga;
//add value to subtotal
$(this).closest(".outer").find("input[name=subtotal]").val(subtotal);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container1">
<!--just added outer class-->
<div class="form-group row outer">
<div class="col-lg-3">
<select class="form-control border-teal" id="produk_nama1" name="produk_nama[]">
<option value="">Pilih Produk</option>
<option data-stok="something" data-price="12" value="1">1</option>
<option data-stok="something" data-price="13" value="2">2</option>
<option data-stok="something" data-price="14" value="3">3</option>
</select>
<div class="d-block form-text">
<span id="stok1" class="badge bg-orange"></span>
</div>
</div>
<div class="col-lg-3">
<input type="text" id="harga1" name="harga[]" class="form-control border-teal border-1" placeholder="Harga Produk" readonly>
</div>
<div class="col-lg-3">
<input type="number" id="jumlah1" name="jumlah[]" min="1" class="form-control border-teal border-1" placeholder="Masukkan Jumlah">
</div>
<div class="col-lg-3">
<input type="text" id="subtotal1" name="subtotal" class="form-control border-teal border-1" placeholder="Subtotal" readonly>
</div>
</div>
</div>
<button id="add_button">Add more</button>
I'm using bootstrap datepicker on a form element that is appended to a div. after appending into the div it isn't work.
$('#bp').on('click', function(){
$('.wraper').empty();
var data ='<form role="form" method="get" action="" class="has-validation-callback">'+
'<h5 class="center" style="padding-right: 189px;">Serach Booking & Placement Report</h5><br>'+
'<input type="hidden" name="type" id="type" class="col-xs-12 " value="bp" data-validation="required" placeholder="Range From" />'+
'<div class="col-sm-4">\n'+
'<label class="col-sm-4 control-label no-padding-right" for="unit">From </label>'+
'<input type="text" name="range_from" id="range_from" class="datepicker col-xs-12 " value="" data-validation="required" placeholder="Range From" />'+
'</div>'+
'<div class="col-sm-4">'+
'<label class="col-sm-4 control-label no-padding-right" for="unit">To </label>'+
'<input type="text" name="range_to" id="range_to" class="datepicker col-xs-12 " value="" data-validation="required" placeholder="Range to" />'+
'</div>'+
'<div class="col-sm-2">'+
'<label class="col-sm-2 control-label no-padding-right" for="unit"> </label>'+
'<br><button type="submit" class="btn btn-primary btn-sm">'+
'<i class="fa fa-search"></i>'+
'Search'+
'</button>'+
'</div>'+
'</form>';
$('.order-wraper').append(data);
$('.datepicker').datepicker();
});
Initialize your picker like this
$('body').on('focus',".datepicker ", function(){
$(this).datepicker();
});
See http://api.jquery.com/on/ and especially the section about "delegated events"
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('');
});
}