In my browsers Firefox and Chrome I don't get any errors or warnings. It's just practice. I'm taking a course in javascript and Dynamic HTML. If anybody cares to look at my code and tell me what I'm doing wrong I'd appreciate it. There's got to be something that I'm not getting right.
I want to create new divs as the page loads. These divs will appear as an ordered group that changes depending upon external data from a JSON file. I will need to do this with a for a loop because there are over 100 divs needed.
HTML:
<!doctype html>
<html lang="fa" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container mt-5">
<div id="showFilters">
<!-- GROUP -->
</div>
<div class="w-100 text-center mt-4">
<p>Add new group</p>
<a id="addFilter" class="bg-primary text-white pt-2 pb-2 pe-3 ps-3 rounded-circle cursor-pointer">
<i class="fas fa-plus"></i>
</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
let count = 0;
$('#addFilter').click(function () {
count++;
let html = '<div class="position-relative">'+
'<div class="row">'+
'<div class="col-md-4 mb-3">'+
'<label for="name">Name</label>'+
'<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
'</div>'+
'<div class="col-md-4 mb-3">'+
'<label for="latin">Latin</label>'+
'<input type="text" id="latin" class="form-control" name="filters['+count+'][latin]">'+
'</div>'+
'<div class="col-md-4 mb-3">'+
'<label for="field">Select a field</label>'+
'<select id="field" class="form-select" name="filters['+count+'][field]">'+
'<option value="1">CheckBox</option>'+
'<option value="2">Color</option>'+
'</select>'+
'</div>'+
'</div>'+
'<div id="showGroups"> '+
'</div>'+
'<div class="w-100 text-center">'+
'<p>Add new subgroup.</p>'+
'<a onclick="addChildFilter()" class="bg-danger text-info pt-2 pb-2 pe-3 ps-3 rounded-circle cursor-pointer">'+
'<i class="fas fa-plus"></i>'+
'</a>'+
'</div>'+
'</div>';
$('#showFilters').append(html);
});
function addChildFilter() {
count++;
let selectedField = $('#field').val();
if (selectedField == 1) {
let html = '<div class="w-100">'+
'<div class="col-md-4 mb-3 position-relative">'+
'<label for="name">Check Box Name</label>'+
'<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
'</div>'+
'</div>';
$('#showGroups').append(html);
}
if (selectedField == 2) {
let html = '<div class="position-relative">'+
'<div class="row">'+
'<div class="col-md-6 mb-3">'+
'<label for="name">Color Name</label>'+
'<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
'</div>'+
'<div class="col-md-6 mb-3">'+
'<label for="code">Code Color</label>'+
'<input type="text" id="code" class="form-control jscolor" name="filters['+count+'][code]">'+
'</div>'+
'</div>'+
'</div>';
$('#showGroups').append(html);
}
}
</script>
</body>
</html>
Fixed all of your issues in the above demo. Click Run code snippet to see.
The issue is you don't use dynamic element id to render.
For example, in function addChildFilter(), you still use the id of the first groups $('#field').val(). You should dynamic it too.
So I add an id for each groups: id="group' + count + '". And then, I can easy to query the field value in any groups by let selectedField = $('#group' + groupId).find('.field').first().val();
And we also have to spend the new HTML into right group by $('#group' + groupId).find('.showGroups').append(html);.
In all cases we dynamic add/remove HTML. You should use class, or use element Id with a specific number for eachs.
<!doctype html>
<html lang="fa" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container mt-5">
<div id="showFilters">
<!-- GROUP -->
</div>
<div class="w-100 text-center mt-4">
<p>Add new group</p>
<a id="addFilter" class="bg-primary text-white pt-2 pb-2 pe-3 ps-3 rounded-circle cursor-pointer">
<i class="fas fa-plus"></i>
</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
let count = 0;
$('#addFilter').click(function () {
count++;
let html = '<div id="group' + count + '" class="position-relative">'+
'<div class="row">'+
'<div class="col-md-4 mb-3">'+
'<label for="name">Name</label>'+
'<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
'</div>'+
'<div class="col-md-4 mb-3">'+
'<label for="latin">Latin</label>'+
'<input type="text" id="latin" class="form-control" name="filters['+count+'][latin]">'+
'</div>'+
'<div class="col-md-4 mb-3">'+
'<label for="field">Select a field</label>'+
'<select class="form-select field" name="filters['+count+'][field]">'+
'<option value="1">CheckBox</option>'+
'<option value="2">Color</option>'+
'</select>'+
'</div>'+
'</div>'+
'<div id="showGroups" class="showGroups"> '+
'</div>'+
'<div class="w-100 text-center">'+
'<p>Add new subgroup.</p>'+
'<a onclick="addChildFilter('+count+')" class="bg-danger text-info pt-2 pb-2 pe-3 ps-3 rounded-circle cursor-pointer">'+
'<i class="fas fa-plus"></i>'+
'</a>'+
'</div>'+
'</div>';
$('#showFilters').append(html);
});
function addChildFilter(groupId) {
let selectedField = $('#group' + groupId).find('.field').first().val();
console.log(selectedField);
if (selectedField == 1) {
let html = '<div class="w-100">'+
'<div class="col-md-4 mb-3 position-relative">'+
'<label for="name">Check Box Name</label>'+
'<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
'</div>'+
'</div>';
$('#group' + groupId).find('.showGroups').append(html);
}
if (selectedField == 2) {
let html = '<div class="position-relative">'+
'<div class="row">'+
'<div class="col-md-6 mb-3">'+
'<label for="name">Color Name</label>'+
'<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
'</div>'+
'<div class="col-md-6 mb-3">'+
'<label for="code">Code Color</label>'+
'<input type="text" id="code" class="form-control jscolor" name="filters['+count+'][code]">'+
'</div>'+
'</div>'+
'</div>';
$('#group' + groupId).find('.showGroups').append(html);
}
}
</script>
</body>
</html>
The problem with your code is that you're adding the same code with elements with the same id, so when you're selecting one with $('#showGroups') it will go from top to bottom on the html and find the first one.
So what I did was adding a new variable called group that will keep the count of the group number, and assigned it along the id and send it on your addChildFilter method.
You can check the solution here: (Also note that you'll have the same problem with other id's like the $('#field') one you have there.
<!doctype html>
<html lang="fa" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container mt-5">
<div id="showFilters">
<!-- GROUP -->
</div>
<div class="w-100 text-center mt-4">
<p>Add new group</p>
<a id="addFilter" class="bg-primary text-white pt-2 pb-2 pe-3 ps-3 rounded-circle cursor-pointer">
<i class="fas fa-plus"></i>
</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
let count = 0;
let group = 0;
$('#addFilter').click(function() {
count++;
group++;
let html = '<div class="position-relative">' +
'<div class="row">' +
'<div class="col-md-4 mb-3">' +
'<label for="name">Name</label>' +
'<input type="text" id="name" class="form-control" name="filters[' + count + '][name]">' +
'</div>' +
'<div class="col-md-4 mb-3">' +
'<label for="latin">Latin</label>' +
'<input type="text" id="latin" class="form-control" name="filters[' + count + '][latin]">' +
'</div>' +
'<div class="col-md-4 mb-3">' +
'<label for="field">Select a field</label>' +
'<select id="field" class="form-select" name="filters[' + count + '][field]">' +
'<option value="1">CheckBox</option>' +
'<option value="2">Color</option>' +
'</select>' +
'</div>' +
'</div>' +
'<div id="showGroups' + group + '"> ' +
'</div>' +
'<div class="w-100 text-center">' +
'<p>Add new subgroup.</p>' +
'<a onclick="addChildFilter(' + group + ')" class="bg-danger text-info pt-2 pb-2 pe-3 ps-3 rounded-circle cursor-pointer">' +
'<i class="fas fa-plus"></i>' +
'</a>' +
'</div>' +
'</div>';
$('#showFilters').append(html);
});
function addChildFilter(group) {
count++;
let selectedField = $('#field').val();
if (selectedField == 1) {
let html = '<div class="w-100">' +
'<div class="col-md-4 mb-3 position-relative">' +
'<label for="name">Check Box Name</label>' +
'<input type="text" id="name" class="form-control" name="filters[' + count + '][name]">' +
'</div>' +
'</div>';
$('#showGroups' + group).append(html);
}
if (selectedField == 2) {
let html = '<div class="position-relative">' +
'<div class="row">' +
'<div class="col-md-6 mb-3">' +
'<label for="name">Color Name</label>' +
'<input type="text" id="name" class="form-control" name="filters[' + count + '][name]">' +
'</div>' +
'<div class="col-md-6 mb-3">' +
'<label for="code">Code Color</label>' +
'<input type="text" id="code" class="form-control jscolor" name="filters[' + count + '][code]">' +
'</div>' +
'</div>' +
'</div>';
$('#showGroups').append(html);
}
}
</script>
</body>
</html>
<!doctype html>
<html lang="fa" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container mt-5">
<div id="showFilters">
<!-- GROUP -->
</div>
<div class="w-100 text-center mt-4">
<p>Add new form</p>
<a id="addFilter" class="bg-primary text-white pt-2 pb-2 pe-3 ps-3 rounded-circle cursor-pointer">
<i class="fas fa-plus"></i>
</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
let count = 0;
$('#addFilter').click(function () {
count++;
let html = '<div id="group' + count + '" class="position-relative">'+
'<div class="row">'+
'<div class="col-md-4 mb-3">'+
'<label for="name">Name</label>'+
'<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
'</div>'+
'<div class="col-md-4 mb-3">'+
'<label for="latin">Latin</label>'+
'<input type="text" id="latin" class="form-control" name="filters['+count+'][latin]">'+
'</div>'+
'<div class="col-md-4 mb-3">'+
'<label for="field">Select a field</label>'+
'<select class="form-select field" name="filters['+count+'][field]">'+
'<option value="1">CheckBox</option>'+
'<option value="2">Color</option>'+
'</select>'+
'</div>'+
'</div>'+
'<div id="showGroups" class="showGroups"> '+
'</div>'+
'<div class="w-100 text-center">'+
'<p>Add new box.</p>'+
'<a onclick="addChildFilter('+count+')" class="bg-danger text-info pt-2 pb-2 pe-3 ps-3 rounded-circle cursor-pointer">'+
'<i class="fas fa-plus"></i>'+
'</a>'+
'</div>'+
'</div>';
$('#showFilters').append(html);
});
function addChildFilter(groupId) {
let selectedField = $('#group' + groupId).find('.field').first().val();
console.log(selectedField);
if (selectedField == 1) {
let html = '<div class="w-100">'+
'<div class="col-md-4 mb-3 position-relative">'+
'<label for="name">Check Box Name</label>'+
'<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
'</div>'+
'</div>';
$('#group' + groupId).find('.showGroups').append(html);
}
if (selectedField == 2) {
let html = '<div class="position-relative">'+
'<div class="row">'+
'<div class="col-md-6 mb-3">'+
'<label for="name">Color Name</label>'+
'<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
'</div>'+
'<div class="col-md-6 mb-3">'+
'<label for="code">Code Color</label>'+
'<input type="text" id="code" class="form-control jscolor" name="filters['+count+'][code]">'+
'</div>'+
'</div>'+
'</div>';
$('#group' + groupId).find('.showGroups').append(html);
}
}
</script>
</body>
</html>
replace <a onclick="addChildFilter()" to onclick="addChildFilter(this)"
and replace your function addChildFilter() to this:
function addChildFilter(e) {
count++;
let element = $(e).parents('.position-relative').find('#showGroups');
let selectedField = $('#field').val();
if (selectedField == 1) {
let html = '<div class="w-100">'+
'<div class="col-md-4 mb-3 position-relative">'+
'<label for="name">Check Box Name</label>'+
'<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
'</div>'+
'</div>';
element.append(html);
}
if (selectedField == 2) {
let html = '<div class="position-relative">'+
'<div class="row">'+
'<div class="col-md-6 mb-3">'+
'<label for="name">Color Name</label>'+
'<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
'</div>'+
'<div class="col-md-6 mb-3">'+
'<label for="code">Code Color</label>'+
'<input type="text" id="code" class="form-control jscolor" name="filters['+count+'][code]">'+
'</div>'+
'</div>'+
'</div>';
element.append(html);
}
}
Related
in the first row when i click category then subcategory automatically create which is correct but when i select category in second row then it is not effected..when i change category in first row then subcategory is show only first row but insted of this it's effected on all row's subcategories..How i can solve this problem?????
javascript for create new div tag
<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}}";
var add;
#foreach($category as $key)
add += '<option value="{{ $key->id }}">{{ $key->cat_nm }}</option>'
#endforeach
$(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>'+
add +
'</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>
javascript for subcategory through category..
<script type="text/javascript">
$(document).ready(function()
{
$('select#category').on('change', function()
{
var catID = $(this).val();
if(catID)
{
$.ajax({ // next step we need to make this url dynamic
url: "{{url('/')}}" + '/Supplier/add_supplier/ajax/' + catID,
type: "GET",
dataType: "json",
success: function(data)
{
console.log(data);
$('select#subcategory').empty();
$.each(data, function(key, value)
{
var select = "---select---"
var option = new Option(value, key);
$(option).html(value);
$('select#subcategory').append(option);
});
}
});
}
else{
$('select#subcategory').empty();
}
});
});
</script>
HTML
<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="price_id">
<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>
I am trying to create a set of textboxes using jQuery and give them ids. I need give id only textboxes.
It doesn't have to be the same ids I gave right now, there may be other. I couldn't figure out how. Is there can any help?
var cT = '<hr>';
cT += ' <div id="divMessageProfile"></div>';
cT += ' <div class="form-group" id="modalStockAdd" >';
cT += ' <div class="row">'
cT += ' <div class="col-lg-9 col-sm-9" >';
cT += ' <label class="pull-left">Barkod No</label> ';
cT += ' </div >';
cT += ' <div class="col-lg-3 col-sm-3" >';
cT += ' <label class="pull-left">Adet</label> ';
cT += ' </div >';
cT += ' </div >';
cT += ' <div class="row">'
cT += ' <div class="col-lg-9 col-sm-9" >';
cT += ' <input type="text" id="txtBarkod" class="form-control border-input" placeholder="Barkod No Giriniz"> ';
cT += ' </div >';
cT += ' <div class="col-lg-3 col-sm-3" >';
cT += ' <input type="text" id="txtPiece" class="form-control border-input pull-left" placeholder="Adet Giriniz"> ';
cT += ' </div >';
cT += ' </div >';
cT += ' </div >';
jQuery(document).on('click', '#btnContinue', function () {
$('#modalStockAdd').append(
' <div class="col-lg-9 col-sm-9" >'
+ ' <label class="pull-left">Barkod No</label> '
+ ' </div >'
+ ' <div class="col-lg-3 col-sm-3" >'
+ ' <label class="pull-left">Adet</label> '
+ ' </div >'
+ ' </div >'
+ ' <div class="row">'
+ ' <div class="col-lg-9 col-sm-9" >'
+ ' <input type="text" id="txtBarkod" class="form-control border-input" placeholder="Barkod No Giriniz"> '
+ ' </div >'
+ ' <div class="col-lg-3 col-sm-3" >'
+ ' <input type="text" id="txtPiece" class="form-control border-input pull-left" placeholder="Adet Giriniz"> '
+ ' </div > '
)
});
If i understadn you right this will do the job for you just adapt it for your html
var number = 0;
$('button').on("click", function(){
var html = '<p>number '+number+'</p>'
$('#message').append(html);
number++
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Append</button>
<div id="message"></div>
I'm new from scripting world so sorry for my bad factory code.
I'm trying to make appear the input value in "card title" and "card-text" of my "cards" variable
Here is the code:
<input id="input1" class="form-control form-control-lg" type="text" placeholder="Write something" value="">
<input id="input2" class="form-control" type="text" placeholder="Write something else" value="">
<button class="btn btn-success" id="create">Create</button>
<script>
$(document).ready(function(){
$("#create").click(function(){
let cards = '<div class="card" style="width: 18rem;">' +
'<div class="card-body">' +
'<h5 class="card-title"></h5>' +
'<p class="card-text"></p>' +
'<button class="btn btn-primary">Go somewhere</button>' +
'</div>' +
'</div>';
$(document.body).append(cards);
});
});
</script>
Thanks everyone for the help!
You can achieve that in the way like this:
$(document).ready(function() {
$("#create").click(function() {
let cards =
'<div class="card" style="width: 18rem;">' +
'<div class="card-body">' +
`<h5 class="card-title">${$('#input1').val()}</h5>` +
`<p class="card-text">${$('#input2').val()}</p>` +
'<button class="btn btn-primary">Go somewhere</button>' +
"</div>" +
"</div>";
$(document.body).append(cards);
})
Try with the following:
$(document).ready(function() {
$("#create").click(function() {
var cardtitle = $('#input1').val();
var cardtext = $('#input2').val();
let cards = '<div class="card" style="width: 18rem;">' +
'<div class="card-body">' +
'<h5 class="card-title">'+cardtitle+'</h5>' +
'<p class="card-text">'+cardtext+'</p>' +
'<button class="btn btn-primary">Go somewhere</button>' +
'</div>' +
'</div>';
$(document.body).append(cards);
});
});
Demo
$(document).ready(function() {
$("#create").click(function() {
var cardtitle = $('#input1').val();
var cardtext = $('#input2').val();
let cards = '<div class="card" style="width: 18rem;">' +
'<div class="card-body">' +
'<h5 class="card-title">'+cardtitle+'</h5>' +
'<p class="card-text">'+cardtext+'</p>' +
'<button class="btn btn-primary">Go somewhere</button>' +
'</div>' +
'</div>';
$(document.body).append(cards);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="input1" class="form-control form-control-lg" type="text" placeholder="Write something" value="">
<input id="input2" class="form-control" type="text" placeholder="Write something else" value="">
<button class="btn btn-success" id="create">Create</button>
$(document).ready(function(){
$("#create").click(function(){
let cards = '<div class="card" style="width: 18rem;">' +
'<div class="card-body">' +
'<h5 class="card-title">'+ $('#input1').val() +'</h5>' +
'<p class="card-text">'+ $('#input2').val() +'</p>' +
'<button class="btn btn-primary">Go somewhere</button>' +
'</div>' +
'</div>';
$(document.body).append(cards);
});
});
How to create rows in tables by append() that still be able to operate with math operations?
Now I have row in HTML including netto price, amount, discount, tax rate and brutto price - brutto price is shown after input netto and amount, tax is selected from , but it's working only for HTML generated row, not for jQuery append. How to fix it?
HTML
<table class="table table-striped table-bordered" id="invoice">
<thead>
<tr>
<th class="col-xs-0">Lp.</th>
<th class="col-xs-4">Towar/usługa</th>
<th class="col-xs-1">PKWiU</th>
<th class="col-xs-1">Ilość</th>
<th class="col-xs-1">Jedn.</th>
<th class="col-xs-1">Cena netto</th>
<th class="col-xs-1">Rabat</th>
<th class="col-xs-2">VAT</th>
<th class="col-xs-1">Cena brutto</th>
</tr>
</thead>
<tbody>
<tr>
<th><p class="form-control-static">1.</p></th>
<td>
<div class="form-group input-sm">
<input type="text" name="product[]" class="form-control" required>
</div>
</td>
<td>
<div class="form-group input-sm">
<input type="text" name="pkwiu[]" class="form-control">
</div>
</td>
<td>
<div class="form-group input-sm">
<input type="text" name="quantity[]" class="form-control quantity" required>
</div>
</td>
<td>
<div class="form-group input-sm">
<input type="text" name="unit[]" class="form-control">
</div>
</td>
<td>
<div class="form-group input-sm">
<input type="text" name="nettoprice[]" class="form-control nettoprice" required>
</div>
</td>
<td>
<div class="form-group input-sm">
<input type="text" name="discount[]" class="form-control discount">
</div>
</td>
<td>
<div class="form-group">
<div class="col-xs-12">
<select class="form-control vatrate" name="vatrate[]" form="invoice">
<option value="0">zw.</option>
<option value="1.00">0%</option>
<option value="1.05">5%</option>
<option value="1.08">8%</option>
<option value="1.23" selected>23%</option>
</select>
</div>
</div>
</td>
<td>
<div class="form-group input-sm">
<input type="text" name="bruttoprice[]" class="form-control bruttoprice" value="">
</div>
</td>
</tr>
</tbody>
</table>
jQuery
var x = 2;
$("#addProduct").click(function(){
$row = '<tr>' +
'<th>'+x+'.</th>' +
'<td>' +
'<div class="form-group input-sm">' +
'<input type="text" name="product[]" class="form-control" required>' +
'</div>' +
'</td>' +
'<td>' +
'<div class="form-group input-sm">' +
'<input type="text" name="pkwiu[]" class="form-control">' +
'</div>' +
'</td>' +
'<td>' +
'<div class="form-group input-sm">' +
'<input type="text" name="quantity[]" class="form-control quantity" required>' +
'</div>' +
'</td>' +
'<td>' +
'<div class="form-group input-sm">' +
'<input type="text" name="unit[]" class="form-control">' +
'</div>' +
'</td>' +
'<td>' +
'<div class="form-group input-sm">' +
'<input type="text" name="nettoprice[]" class="form-control nettoprice" required>' +
'</div>' +
'</td>' +
'<td>' +
'<div class="form-group input-sm">' +
'<input type="text" name="discount[]" class="form-control discount">' +
'</div>' +
'</td>' +
'<td>' +
'<div class="form-group">' +
'<div class="col-xs-12">' +
'<select class="form-control vatrate" name="vatrate[]" form="invoice">' +
'<option value="0">zw.</option>' +
'<option value="1.00">0%</option>' +
'<option value="1.05">5%</option>' +
'<option value="1.08">8%</option>' +
'<option value="1.23" selected>23%</option>' +
'</select>' +
'</div>' +
'</div>' +
'</td>' +
'<td>' +
'<div class="form-group input-sm">' +
'<input type="text" name="bruttoprice[]" class="form-control bruttoprice" value="">' +
'</div>' +
'</td>' +
'</tr>';
$('#invoice > tbody:last').append($row);
x=x+1;
});
$("#deleteProduct").click(function(){
$("tbody > tr:last").remove();
if(x > 1) {
x = x - 1;
}
});
$('select').on('change', function () {
var vat = this.selectedOptions[0].value;
console.log(vat);
});
$(":input").on('input', function(){
var $tr = $(this).closest("tr");
var netto = parseFloat($tr.find('.nettoprice').val()),
quantity = parseFloat($tr.find('.quantity').val()),
vat = parseFloat($tr.find('.vatrate').val()),
discount = parseFloat($tr.find('.discount').val());
if(isNaN(discount)) {
discount = 1;
} else {
discount = discount / 100;
discount = 1 - discount;
}
if(vat == 0 || vat == -1) {
vat = 1;
}
var v = '';
console.log(netto, quantity, vat, discount);
if(!isNaN(netto) && !isNaN(vat) && !isNaN(quantity)) {
v = netto * quantity * discount * vat;
v = v.toFixed(2);
}
$tr.find('.bruttoprice').val(v.toString());
});
Remove the last or make it :last-child:
$('#invoice > tbody').append($row);
$('#invoice > tbody:last-child').append($row);
Either remove the :last from it:
$('#invoice > tbody').append($row);
or use it with .after() with the :last tr of the table:
$('#invoice > tbody tr:last').after($row);
Okay, I found mistake - function works fine now.
$(document).on('input', ':input', function(){
/* Foo */
});
I want to set option value dynamically using Jquery/Javascript.I am explaining my work flow with code below.
index.html:
<Ol>
<div class="totalaligndiv" id="TextBoxContainer">
<li>
<div class="col-md-4 bmargindiv1">
<label for="qualification" accesskey="Q"><span class="required">*</span> Qualification</label>
<input name = "txtQualification" id="txtQualification" type="text" />
</div>
<div class="col-md-5 bmargindiv1">
<label for="college" accesskey="C"><span class="required">*</span> College</label>
<input type="text" ID="txtCollege" name="college"/>
</div>
<div class="col-md-2 bmargindiv1">
<label for="passingyear" accesskey="Q"><span class="required">*</span> Passing Year</label>
<select ID="txtPassingYear" name="passingyear">
<option>Year</option>
</select>
</div>
<div class="col-md-1 bmargindiv1">
<label for="action" accesskey="C"> </label>
<button type="button" class="btn btn-success btn-sm addbtn" id="Button1" onclick="AddTextBox(this)">+</button>
<button type="button" class="btn btn-danger btn-sm minusbtn " id="Button2" style="display:none;" onclick = "RemoveTextBox(this)">-</button>
</div>
</li>
</div>
</Ol>
<script type="text/javascript">
window.onload=function(){
getYears();
}
function getYears() {
var dropdown = document.getElementById("txtPassingYear");
var currentTime = new Date();
var year = currentTime.getFullYear();
for (var i = year; i >= 1960; i--) {
var newOption = document.createElement('option');
newOption.value = i;
newOption.innerHTML = i;
dropdown.add(newOption);
}
}
</script>
<script type="text/javascript">
function GetDynamicTextBox(value, value1, value2) {
return '<div class="col-md-4 bmargindiv1"><label for="qualification" accesskey="Q"><span class="required">*</span> Qualification</label>' +
'<input name = "txtQualification" id="txtQualification" type="text" value = "' + value + '" />' +
'</div>' +
'<div class="col-md-5 bmargindiv1">' +
'<label for="college" accesskey="C"><span class="required">*</span> College</label>' +
'<input type="text" ID="txtCollege" name="college" value = "' + value1 + '" />' +
'</div>' +
'<div class="col-md-2 bmargindiv1">' +
'<label for="passingyear" accesskey="Q"><span class="required">*</span> Passing Year</label>' +
'<select ID="txtPassingYear" name="passingyear">' +
'</select>' +
'</div>' +
'<div class="col-md-1 bmargindiv1">' +
'<label for="action" accesskey="C"> </label>' +
'<button type="button" class="btn btn-success btn-sm addbtn" id="Button1" onclick="AddTextBox(this)">+</button>' +
'<button type="button" class="btn btn-danger btn-sm minusbtn " id="Button2" style="display:none;" onclick = "RemoveTextBox(this)">-</button>'
}
function AddTextBox(objId) {
var div = document.createElement('li');
div.innerHTML = GetDynamicTextBox("", "", "");
document.getElementById("TextBoxContainer").appendChild(div);
$(objId).css('display', 'none');
$(objId).siblings("button.btn-danger").css('display', 'block');
var id=$(objId).closest('select');
console.log('id is',id);
getYears();
}
function RemoveTextBox(div) {
$(div).closest("li").remove();
}
</script>
In this above code first time after page load user is getting 3 fields i.e-Qualification,College,Passing year fields and the the years in drop down list is coming properly.When user is clicking on + button again another set of 3 fields is generating and in this section user is not getting any year in drop down list.Please help me to add years dynamically in dropdown list which is coming after clicked on + button.Please help me.
We have implemented the code for you. Id for the element is unique and for this we have created a dynamic id counter. Whenever you add the textboxes it will assign new id to select drop down and assign the year option to it.
<Ol>
<div class="totalaligndiv" id="TextBoxContainer">
<li>
<div class="col-md-4 bmargindiv1">
<label for="qualification" accesskey="Q"><span class="required">*</span> Qualification</label>
<input name = "txtQualification" id="txtQualification" type="text" />
</div>
<div class="col-md-5 bmargindiv1">
<label for="college" accesskey="C"><span class="required">*</span> College</label>
<input type="text" ID="txtCollege" name="college"/>
</div>
<div class="col-md-2 bmargindiv1">
<label for="passingyear" accesskey="Q"><span class="required">*</span> Passing Year</label>
<select ID="txtPassingYear" name="passingyear">
<option>Year</option>
</select>
</div>
<div class="col-md-1 bmargindiv1">
<label for="action" accesskey="C"> </label>
<button type="button" class="btn btn-success btn-sm addbtn" id="Button1" onclick="AddTextBox(this)">+</button>
<button type="button" class="btn btn-danger btn-sm minusbtn " id="Button2" style="display:none;" onclick = "RemoveTextBox(this)">-</button>
</div>
</li>
</div>
</Ol>
<script type="text/javascript">
window.onload=function(){
getYears();
}
function getYears() {
var dropdown = document.getElementById("txtPassingYear");
var currentTime = new Date();
var year = currentTime.getFullYear();
for (var i = year; i >= 1960; i--) {
var newOption = document.createElement('option');
newOption.value = i;
newOption.innerHTML = i;
dropdown.add(newOption);
}
}
function getYearsOther() {
var dropdown = document.getElementById("txtPassingYear" + counter);
var currentTime = new Date();
var year = currentTime.getFullYear();
for (var i = year; i >= 1960; i--) {
var newOption = document.createElement('option');
newOption.value = i;
newOption.innerHTML = i;
dropdown.add(newOption);
}
}
</script>
<script type="text/javascript">
var counter = 0;
function GetDynamicTextBox(value, value1, value2) {
counter++;
return '<div class="col-md-4 bmargindiv1"><label for="qualification" accesskey="Q"><span class="required">*</span> Qualification</label>' +
'<input name = "txtQualification" id="txtQualification" type="text" value = "' + value + '" />' +
'</div>' +
'<div class="col-md-5 bmargindiv1">' +
'<label for="college" accesskey="C"><span class="required">*</span> College</label>' +
'<input type="text" ID="txtCollege" name="college" value = "' + value1 + '" />' +
'</div>' +
'<div class="col-md-2 bmargindiv1">' +
'<label for="passingyear" accesskey="Q"><span class="required">*</span> Passing Year</label>' +
'<select ID="txtPassingYear' + counter + '" name="passingyear">' +
'</select>' +
'</div>' +
'<div class="col-md-1 bmargindiv1">' +
'<label for="action" accesskey="C"> </label>' +
'<button type="button" class="btn btn-success btn-sm addbtn" id="Button1" onclick="AddTextBox(this)">+</button>' +
'<button type="button" class="btn btn-danger btn-sm minusbtn " id="Button2" style="display:none;" onclick = "RemoveTextBox(this)">-</button>'
}
function AddTextBox(objId) {
var div = document.createElement('li');
div.innerHTML = GetDynamicTextBox("", "", "");
document.getElementById("TextBoxContainer").appendChild(div);
$(objId).css('display', 'none');
$(objId).siblings("button.btn-danger").css('display', 'block');
var id=$(objId).closest('select');
console.log('id is',id);
getYearsOther();
}
function RemoveTextBox(div) {
$(div).closest("li").remove();
}
</script>
You could try this code
function getYears() {
var $dropdown =$('#txtPassingYear');
var currentTime = new Date();
var year = currentTime.getFullYear();
for (var i = year; i >= 1960; i--) {
$dropdown.append($('<option>', {
value: i,
text: i
}));
}
}
CODE AFTER EDIT**
<Ol>
<div class="totalaligndiv" id="TextBoxContainer">
<li>
<div class="col-md-4 bmargindiv1">
<label for="qualification" accesskey="Q"><span class="required">*</span> Qualification</label>
<input name = "txtQualification" id="txtQualification" type="text" />
</div>
<div class="col-md-5 bmargindiv1">
<label for="college" accesskey="C"><span class="required">*</span> College</label>
<input type="text" ID="txtCollege" name="college"/>
</div>
<div class="col-md-2 bmargindiv1">
<label for="passingyear" accesskey="Q"><span class="required">*</span> Passing Year</label>
<select ID="txtPassingYear" name="passingyear">
<option>Year</option>
</select>
</div>
<div class="col-md-1 bmargindiv1">
<label for="action" accesskey="C"> </label>
<button type="button" class="btn btn-success btn-sm addbtn" id="Button1" onclick="AddTextBox(this)">+</button>
<button type="button" class="btn btn-danger btn-sm minusbtn " id="Button2" style="display:none;" onclick = "RemoveTextBox(this)">-</button>
</div>
</li>
</div>
</Ol>
<script type="text/javascript">
window.onload = function () {
var $dropdown = $('#txtPassingYear');
getYears($dropdown);
}
function getYears(element) {
var currentTime = new Date();
var year = currentTime.getFullYear();
for (var i = year; i >= 1960; i--) {
element.append($('<option>', {
value: i,
text: i
}));
}
}
</script>
<script type="text/javascript">
var selectId=1;
function GetDynamicTextBox(value, value1, value2) {
return '<div class="col-md-4 bmargindiv1"><label for="qualification" accesskey="Q"><span class="required">*</span> Qualification</label>' +
'<input name = "txtQualification" id="txtQualification" type="text" value = "' + value + '" />' +
'</div>' +
'<div class="col-md-5 bmargindiv1">' +
'<label for="college" accesskey="C"><span class="required">*</span> College</label>' +
'<input type="text" ID="txtCollege" name="college" value = "' + value1 + '" />' +
'</div>' +
'<div class="col-md-2 bmargindiv1">' +
'<label for="passingyear" accesskey="Q"><span class="required">*</span> Passing Year</label>' +
'<select ID="txtPassingYear' + selectId + '" name="passingyear">' +
'</select>' +
'</div>' +
'<div class="col-md-1 bmargindiv1">' +
'<label for="action" accesskey="C"> </label>' +
'<button type="button" class="btn btn-success btn-sm addbtn" id="Button1" onclick="AddTextBox(this)">+</button>' +
'<button type="button" class="btn btn-danger btn-sm minusbtn " id="Button2" style="display:none;" onclick = "RemoveTextBox(this)">-</button>'
}
function AddTextBox(objId) {
var div = document.createElement('li');
selectId++;
div.innerHTML = GetDynamicTextBox("", "", "");
document.getElementById("TextBoxContainer").appendChild(div);
$(objId).css('display', 'none');
$(objId).siblings("button.btn-danger").css('display', 'block');
var id = $(objId).closest('select');
console.log('id is', id);
var $dropdown = $('#txtPassingYear' + selectId);
getYears($dropdown);
}
function RemoveTextBox(div) {
$(div).closest("li").remove();
}
</script>