How to put input value in card-title and card-text

How to put input value in card-title and card-text - javascript

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);
});
});

Related

How to change the dev position?

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);
}
}

Giving different ID to dynamically created button in jQuery

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>

JavaScript foreach statement to append entire records

I have following JavaScript code that used to append the entire records to MySQL table.
$('#request_table').append('<tr>' +
'<td ><span id="product" >' + jData.data[0].item_name + '</span>' +
'<input type="hidden" id="item_id[]" name="item_id[]" value="' + jData.data[0].item_id
+ '">' +
'</td>' +
'<td class="text-center">' + jData.data[0].qty + '</td>' +
'<td class="text-center"><input class="form-control text-center rquantity" data-qty-bal="' + jData.data[0].qty + '" autofocus required type="number" step="any" id="qty[]" name="qty[]" ></td>' +
'<td class="text-center"><input class="form-control text-right" autofocus required type="number" step="any" id="sales_price[]" name="sales_price[]" value="' + jData.data[0].unit_price + '"></td>' +
'<td class="text-center"><input class="form-control text-right" autofocus type="number" step="any" id="discount_price[]" name="discount_price[]" ></td>' +
'<td class="text-center" ><i class="fa fa-remove remove" style="cursor: pointer"></i>
</td>' +
'</tr>');
But the above function only append the first record to the table. How to change the code with foreach statement to append the entire records.I used Codeigniter framework.
Can anyone help me ?

You can use forEach like this:
jData.data.forEach(data => {
$('#request_table').append('<tr>' +
'<td ><span id="product" >' + data.item_name + '</span>' +
'<input type="hidden" id="item_id[]" name="item_id[]" value="' + data.item_id
+ '">' +
'</td>' +
'<td class="text-center">' + data.qty + '</td>' +
'<td class="text-center"><input class="form-control text-center rquantity" data-qty-bal="' + data.qty + '" autofocus required type="number" step="any" id="qty[]" name="qty[]" ></td>' +
'<td class="text-center"><input class="form-control text-right" autofocus required type="number" step="any" id="sales_price[]" name="sales_price[]" value="' + data.unit_price + '"></td>' +
'<td class="text-center"><input class="form-control text-right" autofocus type="number" step="any" id="discount_price[]" name="discount_price[]" ></td>' +
'<td class="text-center" ><i class="fa fa-remove remove" style="cursor: pointer"></i>
</td>' +
'</tr>');
})

You accesing only to jData.data[0].* (just the first index element)
you need an iteration eg: based on a index i and then accessing by
jData.data[i].qty ,
jData.data[i].unit_price,
....

Not working HTML table rows from jQuery append()

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 */
});

How to set option value dynamically using jquery/javascript

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>

We Keep Coding

JavaScript is the programming language of the Web.

How to put input value in card-title and card-text - javascript

Related

How to change the dev position?

Giving different ID to dynamically created button in jQuery

JavaScript foreach statement to append entire records

Not working HTML table rows from jQuery append()

How to set option value dynamically using jquery/javascript

Categories

Resources