Change data format in CRUD output to dd/mm/yyy [duplicate] - javascript

This question already has answers here:
How do I format a date in JavaScript?
(68 answers)
Closed 4 months ago.
i know it's a question asked many times here, but i tried all the solutions and no one is working.
I want to change the output in my CRUD from the input form to dd/mm/yyyy and not in yyyy-mm-dd.
Here's my code:
var nextId = 1;
var activeId = 0;
function productDisplay(ctl) {
var row = $(ctl).parents("tr");
var cols = row.children("td");
activeId = $($(cols[0]).children("button")[0]).data("id");
$("#productname").val($(cols[1]).text());
$("#introdate").val($(cols[2]).text());
$("#finishdate").val($(cols[3]).text());
$("#url").val($(cols[4]).text());
$("#phone").val($(cols[5]).text());
$("#note").val($(cols[6]).text());
$("#client").val($(cols[7]).text());
$("#updateButton").text("Aggiorna");
}
function productUpdate() {
if ($("#updateButton").text() == "Add") {
productUpdateInTable(activeId);
}
else {
productAddToTable();
}
formClear();
$("#productname").focus();
}
function productAddToTable() {
if ($("#productTable tbody").length == 0) {
$("#productTable").append("<tbody></tbody>");
}
$("#productTable tbody").append(
productBuildTableRow(nextId));
nextId += 1;
}
function productUpdateInTable(id) {
var row = $("#productTable button[data-id='" + id + "']")
.parents("tr")[0];
$(row).after(productBuildTableRow(id));
$(row).remove();
formClear();
$("#updateButton").text("Add");
}
function productBuildTableRow(id) {
var ret =
"<tr>" +
"<td>" +
"<button type='button' " +
"onclick='productDisplay(this);' " +
"class='btn btn-default' " +
"data-id='" + id + "'>" +
"<span class='glyphicon glyphicon-pencil' />" +
"</button>" +
"</td>" +
"<td>" + $("#productname").val() + "</td>" +
"<td>" + $("#introdate").val() + "</td>" +
"<td>" + $("#finishdate").val() + "</td>" +
"<td>" + $("#url").val() + "</td>" +
"<td>" + $("#phone").val() + "</td>" +
"<td>" + $("#note").val() + "</td>" +
"<td>" + $("#client").val() + "</td>" +
"<td>" +
"<button type='button' " +
"onclick='productDelete(this);' " +
"class='btn btn-default' " +
"data-id='" + id + "'>" +
"<span class='glyphicon glyphicon-minus' />" +
"</button>" +
"</td>" +
"</tr>"
return ret;
}
function productDelete(ctl) {
var result = confirm("Want to delete record?");
if (result) {
var result2 = confirm("Really?");
}
if (result2) {
$(ctl).parents("tr").remove();
}
}
function formClear() {
$("#productname").val("");
$("#introdate").val("");
$("#finishdate").val("");
$("#url").val("");
$("#phone").val("");
$("#note").val("");
$("#client").val("");
}
function doSearch(text, color = "yellow") {
if (color != "transparent") {
doSearch(document.getElementById('hid_search').value, "transparent");
document.getElementById('hid_search').value = text;
}
if (window.find && window.getSelection) {
document.designMode = "on";
var sel = window.getSelection();
sel.collapse(document.body, 0);
while (window.find(text)) {
document.execCommand("HiliteColor", false, color);
sel.collapseToEnd();
}
document.designMode = "off";
} else if (document.body.createTextRange) {
var textRange = document.body.createTextRange();
while (textRange.findText(text)) {
textRange.execCommand("BackColor", false, color);
textRange.collapse(false);
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6">
<h2><b>Availability</h2></b>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<table id="productTable" class="table table-bordered table-condensed table-striped">
<thead>
<tr>
<th class="col-sm-0">Modify</th>
<th class="col-sm-2">Name</th>
<th class="col-sm-1">From</th>
<th class="col-sm-1">To</th>
<th class="col-sm-2">Area</th>
<th class="col-sm-2">Phone</th>
<th class="col-sm-3">Note</th>
<th class="col-sm-2">Client</th>
<th class="col-sm-0">Delete</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="row">
<div class="col-sm-5">
<div class="panel panel-primary">
<div class="panel-heading">
Add Availability
</div>
<div class="panel-body">
<div class="form-group">
<label for="productname">
Name
</label>
<input type="text" class="form-control" value="" id="productname" />
</div>
<div class="form-group">
<label for="introdate">
From
</label>
<input type="date" class="form-control" value="gg/mm/aaaa" id="introdate">
</div>
<div class="form-group">
<label for="introdate">
To
</label>
<input type="date" class="form-control" value="gg/mm/aaaa" id="finishdate" />
</div>
<div class="form-group">
<label for="area">
Area
</label>
<input type="search" class="form-control" value="" id="url" />
</div>
<div class="form-group">
<label for="phone">
Phone
</label>
<input type="" class="form-control" value="" id="phone" />
</div>
<div class="form-group">
<label for="note">
Note
</label>
<input type="" class="form-control" value="" id="note" />
</div>
<div class="form-group">
<label for="client">
Client
</label>
<select id="client" class="form-control">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
<div class="panel-footer">
<div class="row">
<div class="col-xs-12">
<button type="button" id="updateButton" class="btn btn-primary" onclick="productUpdate();">
Add
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
When I insert a new record from form field date, the output in my CRUD is like YYYY-MM-DD.


This should help you. Pass a valid date in any format and the function will return a dd/mm/yyyy date format
// Helper function to format date from $(input).val()
function formatDate(date) {
if (date == '') {
return '';
}
let d = new Date(date),
ye = new Intl.DateTimeFormat('en', {
year: 'numeric'
}).format(d),
mo = new Intl.DateTimeFormat('en', {
month: '2-digit'
}).format(d),
da = new Intl.DateTimeFormat('en', {
day: '2-digit'
}).format(d);
return (`${da}-${mo}-${ye}`);
}
// ----
var nextId = 1;
var activeId = 0;
function productDisplay(ctl) {
var row = $(ctl).parents("tr");
var cols = row.children("td");
activeId = $($(cols[0]).children("button")[0]).data("id");
$("#productname").val($(cols[1]).text());
$("#introdate").val($(cols[2]).text());
$("#finishdate").val($(cols[3]).text());
$("#url").val($(cols[4]).text());
$("#phone").val($(cols[5]).text());
$("#note").val($(cols[6]).text());
$("#client").val($(cols[7]).text());
$("#updateButton").text("Aggiorna");
}
function productUpdate() {
if ($("#updateButton").text() == "Add") {
productUpdateInTable(activeId);
}
else {
productAddToTable();
}
formClear();
$("#productname").focus();
}
function productAddToTable() {
if ($("#productTable tbody").length == 0) {
$("#productTable").append("<tbody></tbody>");
}
$("#productTable tbody").append(
productBuildTableRow(nextId));
nextId += 1;
}
function productUpdateInTable(id) {
var row = $("#productTable button[data-id='" + id + "']")
.parents("tr")[0];
$(row).after(productBuildTableRow(id));
$(row).remove();
formClear();
$("#updateButton").text("Add");
}
function productBuildTableRow(id) {
var ret =
"<tr>" +
"<td>" +
"<button type='button' " +
"onclick='productDisplay(this);' " +
"class='btn btn-default' " +
"data-id='" + id + "'>" +
"<span class='glyphicon glyphicon-pencil' />" +
"</button>" +
"</td>" +
"<td>" + $("#productname").val() + "</td>" +
"<td>" + formatDate($("#introdate").val()) + "</td>" + // call helper function
"<td>" + formatDate($("#finishdate").val()) + "</td>" + // call helper function
"<td>" + $("#url").val() + "</td>" +
"<td>" + $("#phone").val() + "</td>" +
"<td>" + $("#note").val() + "</td>" +
"<td>" + $("#client").val() + "</td>" +
"<td>" +
"<button type='button' " +
"onclick='productDelete(this);' " +
"class='btn btn-default' " +
"data-id='" + id + "'>" +
"<span class='glyphicon glyphicon-minus' />" +
"</button>" +
"</td>" +
"</tr>"
return ret;
}
function productDelete(ctl) {
var result = confirm("Want to delete record?");
if (result) {
var result2 = confirm("Really?");
}
if (result2) {
$(ctl).parents("tr").remove();
}
}
function formClear() {
$("#productname").val("");
$("#introdate").val("");
$("#finishdate").val("");
$("#url").val("");
$("#phone").val("");
$("#note").val("");
$("#client").val("");
}
function doSearch(text, color = "yellow") {
if (color != "transparent") {
doSearch(document.getElementById('hid_search').value, "transparent");
document.getElementById('hid_search').value = text;
}
if (window.find && window.getSelection) {
document.designMode = "on";
var sel = window.getSelection();
sel.collapse(document.body, 0);
while (window.find(text)) {
document.execCommand("HiliteColor", false, color);
sel.collapseToEnd();
}
document.designMode = "off";
} else if (document.body.createTextRange) {
var textRange = document.body.createTextRange();
while (textRange.findText(text)) {
textRange.execCommand("BackColor", false, color);
textRange.collapse(false);
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6">
<h2><b>Availability</h2></b>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<table id="productTable" class="table table-bordered table-condensed table-striped">
<thead>
<tr>
<th class="col-sm-0">Modify</th>
<th class="col-sm-2">Name</th>
<th class="col-sm-1">From</th>
<th class="col-sm-1">To</th>
<th class="col-sm-2">Area</th>
<th class="col-sm-2">Phone</th>
<th class="col-sm-3">Note</th>
<th class="col-sm-2">Client</th>
<th class="col-sm-0">Delete</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="row">
<div class="col-sm-5">
<div class="panel panel-primary">
<div class="panel-heading">
Add Availability
</div>
<div class="panel-body">
<div class="form-group">
<label for="productname">
Name
</label>
<input type="text" class="form-control" value="" id="productname" />
</div>
<div class="form-group">
<label for="introdate">
From
</label>
<input type="date" class="form-control" value="gg/mm/aaaa" id="introdate">
</div>
<div class="form-group">
<label for="introdate">
To
</label>
<input type="date" class="form-control" value="gg/mm/aaaa" id="finishdate" />
</div>
<div class="form-group">
<label for="area">
Area
</label>
<input type="search" class="form-control" value="" id="url" />
</div>
<div class="form-group">
<label for="phone">
Phone
</label>
<input type="" class="form-control" value="" id="phone" />
</div>
<div class="form-group">
<label for="note">
Note
</label>
<input type="" class="form-control" value="" id="note" />
</div>
<div class="form-group">
<label for="client">
Client
</label>
<select id="client" class="form-control">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
<div class="panel-footer">
<div class="row">
<div class="col-xs-12">
<button type="button" id="updateButton" class="btn btn-primary" onclick="productUpdate();">
Add
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Related

Accessing Element previously appended to the DOM?

I have the following HTML structure in two modals on my website - one for adding new datasets and one for editing existing datasets:
HTML (add) is added to the DOM via TWIG Syntax
<div class="mb-3" id="bar_area-add">
<div class="card">
<div class="card-body">
<h3 class="float-start">Thekendienst</h3>
<div class="float-end">
<button class="btn btn-sm btn-primary" type="button" id="bar_plus-add">
<i class="bi-plus-lg"></i>
</button>
<button class="btn btn-sm btn-danger" type="button" id="bar_minus-add">
<i class="bi-dash-lg"></i>
</button>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Zeitfenster</th>
<th>MAs</th>
</tr>
</thead>
<tbody id="bar_multiple-add">
<tr id="bar_placeholder-add" style="display: none;">
<td colspan="2">aktuell keine Position(en) verfügbar</td>
</tr>
<tr id="bar_shift_1-add">
<td><input type="text" name="bar_timewindow_1" value="21:00-24:00" required=""></td>
<td><input type="number" min="0" name="bar_amountma_1" value="2" required=""></td>
<input type="hidden" name="bar_id_1" value="3" required="">
</tr>
</tbody>
</table>
</div>
</div>
</div>
HTML (edit) is appended to the DOM via JQuery.append() function
<div class="mb-3" id="bar_area-edit" style="">
<div class="card">
<div class="card-body">
<h3 class="float-start">Thekendienst</h3>
<div class="float-end">
<button class="btn btn-sm btn-primary" type="button" id="bar_plus-edit">
<i class="bi-plus-lg"></i>
</button>
<button class="btn btn-sm btn-danger" type="button" id="bar_minus-edit">
<i class="bi-dash-lg"></i>
</button>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Zeitfenster</th>
<th>MAs</th>
</tr>
</thead>
<tbody id="bar_multiple-edit">
<tr id="bar_placeholder-edit" style="display: none;">
<td colspan="2">aktuell keine Position(en) verfügbar</td>
</tr>
<tr id="bar_shift_1-edit">
<td><input type="text" name="bar_timewindow_1" value="21:00-24:00" required=""></td>
<td><input type="number" min="0" name="bar_amountma_1" value="2" required=""></td>
<input type="hidden" name="bar_id_1" value="3" required="">
</tr>
</tbody>
</table>
</div>
</div>
</div>
As you can see, I also have 2 Buttons in both structures to add oder remove lines - it´s a kind of dynamic formfield. For this purpose I have written the following JQuery-Function:
var tasks = ['add', 'edit'];
var services = {{ services | json_encode | raw }};
tasks.forEach(task => {
services.forEach(service => {
$("#" + service.shortname + "_plus-" + task).click(function () {
$("#" + service.shortname + "_multiple-" + task).each(function () {
var i = $(this).find("tr").length;
var n = (i - 1);
$(this).append('<tr id="' + service.shortname + '_shift_' + (n + 1) + '-' + task + '">\n' +
'<td><input type="text" name="' + service.shortname + '_timewindow_' + (n + 1) + '" value="00:00-00:00" required></td>\n' +
'<td><input type="number" min="0" name="' + service.shortname + '_amountma_' + (n + 1) + '" value="0" required></td>\n' +
'</tr><input type="hidden" name="' + service.shortname + '_id_' + (n + 1) + '" value="' + service.id + '" required>');
if (n === 0) {
$("#" + service.shortname + "_placeholder-" + task).hide();
}
});
});
$("#" + service.shortname + "_minus-" + task).click(function () {
$("#" + service.shortname + "_multiple-" + task).each(function () {
var i = $(this).find("tr").length;
var n = i;
if (n !== 0) {
$("#" + service.shortname + '_shift_' + (n - 1) + '-' + task).remove();
if (n === 2) {
$("#" + service.shortname + "_placeholder-" + task).show();
}
}
});
});
});
});
Unfortunately this only works for the add-task, when clicking on add/remove button in the edit modal nothing happens. There´s no error message. I think this could be a result of adding edit-structure with Jquery.append() to the DOM like this.
$.ajax({
url: '/getJobs/' + eventClickEvent.event.id,
type: 'get',
success: function (jobData) {
var jobs = JSON.parse(jobData);
var services = {{ services | json_encode | raw }};
services.forEach(service => {
$('#areas-edit').append(`<div class="mb-3" id="` + service.shortname + `_area-edit" style="display: none;">
<div class="card">
<div class="card-body">
<h3 class="float-start">` + service.name + `</h3>
<div class="float-end">
<button class="btn btn-sm btn-primary" type="button"
id="` + service.shortname + `_plus-edit">
<i class="bi-plus-lg"></i>
</button>
<button class="btn btn-sm btn-danger" type="button"
id="` + service.shortname + `_minus-edit">
<i class="bi-dash-lg"></i>
</button>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Zeitfenster</th>
<th>MAs</th>
</tr>
</thead>
<tbody id="` + service.shortname + `_multiple-edit">
<tr id="` + service.shortname + `_placeholder-edit">
<td colspan="2">aktuell keine Position(en) verfügbar</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>`);
var i = 1;
jobs.forEach(job => {
if (service.id === job.serviceId) {
$('#' + service.shortname + '-editPill').addClass('bg-primary');
$('#' + service.shortname + '-editPill').removeClass('bg-secondary');
$('#' + service.shortname + '_area-edit').show();
$('#' + service.shortname + '_placeholder-edit').hide();
$('#' + service.shortname + '_multiple-edit').append(`
<tr id="` + service.shortname + `_shift_` + i + `-edit">
<td><input type="text"
name="` + service.shortname + `_timewindow_` + i + `"
value="` + job.timewindow + `" required></td>
<td><input type="number" min="0"
name="` + service.shortname + `_amountma_` + i + `"
value="` + job.mas + `" required></td>
<input type="hidden" name="` + service.shortname + `_id_` + i + `"
value="` + service.id + `" required>
</tr>
`);
i++;
}
});
});
}
});

You have jQuery, use it. Delegate or something like this
$(".service").on("click", function() {
$(".task", this).each(function() {
if (this.id.includes("plus")) {
var len = $(this).find("tr").length;
...
}
if (n === 0) {
$(this).find("[id*='_placeholder-']).hide();
}
})
}
else if (this.id.includes("_multiple") {
...
}
});
});

how to sort select option and combine it if the option type is same

I need some help with the code here, so whenever i pick a same option and click submit order button it will display the qty>name>price of the option i choose based on the row of the select boxes.
I want to change the result so it will be when i click a same option type, it should combine the option and sum the qty in a same row at the table. Here is the image in case anyone a bit confused with my question
As you can see, i pick "pancake" twice with a different qty here and the result are the first row and second row of table which display it separately. For the output it should be like this "Qty combined (2+3=5), Pancake, Price sum of the combined qty (17000+25500=42500)".
I have tried searching for a similar question like this, but the method only works when it have same name inside a json object..
Here is the full code:
var data = {Food:[{id:1,name:"Fried Rice",price:1e4},{id:2,name:"Fried Noodle",price:9e3},{id:3,name:"Pancake",price:8500},{id:4,name:"French Fries",price:7500}],Drink:[{id:1,name:"Cola",price:4600},{id:2,name:"Orange Juice",price:5400},{id:3,name:"Mineral Water",price:3500},{id:4,name:"Coffee",price:5800}]};
function handleChange(e) {
var $row = e ? $(e).closest(".menu-position") : $('.menu-position')
var selectedCategory = $row.find('.category-select').val()
var $typeSelect = $row.find('.type-select')
var dataOptions = data[selectedCategory]
$typeSelect.html('')
dataOptions.forEach(function (option) {
var optionEle = document.createElement('option')
optionEle.value = option.id
optionEle.label = option.name
optionEle.setAttribute('data-price', option.price)
$typeSelect.append(optionEle)
})
}
handleChange()
$(".addRow").click(function () {
var $typeSelect = $(".type-select").clone()
var html = '<div class="row outer menu-position">';
html += '<div class="col-md-3">';
html += '<button type="button" class="btn btn-danger btn-lg delRow">Del</button>';
html += '</div>';
html += '<div class="col-md-3">';
html += '<select class="form-select form-select-lg mb-3 category-select cat" onChange="handleChange(this)">';
html += '<option value="Food">Food</option>';
html += '<option value="Drink">Drink</option>';
html += '</select>';
html += '</div>';
html += '<br>';
html += '<div class="col-md-3">';
html += '<select class="form-select form-select-lg mb-3 type-select type">' + $typeSelect.html() + '</select>';
html += '</div>';
html += '<div class="col-md-3">';
html += '<input type="number" class="form-control form-control-lg mb-3 qty" placeholder="Qty" min="0">';
html += '</div>';
html += '</div>';
$('.container-fluid').append(html);
});
$(document).on('click', '.delRow', function () {
$(this).closest('.row').remove();
$('.order').trigger('click')
});
$(document).ready(function () {
$('.order').click(function () {
var selectMenu = {};
$("select.type").each(function (i) {
selectMenu[i] = {}
var text = $(this).find("option:selected").attr('label');
var price = Number($(this).find("option:selected").data('price'));
var qty = Number($(this).closest(".row").find(".qty").val())
selectMenu[i] = {
"total": price * qty,
"itemname": text,
"qty": qty
}
})
$('.result tbody').html("");
var total = 0
$.each(selectMenu, function (index, data) {
$('.result tbody').append("<tr class='orders'><td>" + data.qty + '</td><td>' + data.itemname + '</td><td>' + data.total + "</td></tr>");
total += parseInt(data.total);
})
$(".totalPrice input").val(total)
});
});
button[type=submit] {
width: 50%;
margin-left: 25%;
margin-right: 25%;
}
button[type=button] {
font-size: 20px;
width: 50%;
margin-left: 25%;
margin-right: 25%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
<div class="container-fluid text-center">
<h2 style="font-size:70px; font-family:Lucida Console;">MENU</h2>
<br>
<div class="row menu-position">
<div class="col-md-3">
<button type="button" class="btn btn-primary btn-lg addRow">Add</button>
</div>
<div class="col-md-3">
<select class="form-select form-select-lg mb-3 category-select cat" onChange='handleChange(this)'>
<option value="Food">Food</option>
<option value="Drink">Drink</option>
</select>
</div>
<br>
<div class="col-md-3">
<select class="form-select form-select-lg mb-3 type-select type"></select>
</div>
<div class="col-md-3">
<input type="number" class="form-control form-control-lg mb-3 qty" placeholder="Qty" min="0">
</div>
</div>
</div>
</div>
<br>
<button type="submit" class="btn btn-secondary order">Order</button>
<br>
<br>
<div class="result text-center">
<table class="table table-bordered">
<thead>
<tr>
<th style="width:30%">Qty</th>
<th style="width:30%">Item name</th>
<th style="width:30%">Price</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<br>
<div class="totalPrice text-center">
<h4>Total Price</h4>
<input type="number" class="text-center" disabled>
</div>
Sorry for asking a lot, hope anyone would be kind to share some tips on the problem i had.

ihave modified your code of order click. I use selectMenu object like that
selectMenu={item:[qty,price,qty*price}, so its easier to group same item. (i avoid to display an item with qty = 0).
var data = {Food:[{id:1,name:"Fried Rice",price:1e4},{id:2,name:"Fried Noodle",price:9e3},{id:3,name:"Pancake",price:8500},{id:4,name:"French Fries",price:7500}],Drink:[{id:1,name:"Cola",price:4600},{id:2,name:"Orange Juice",price:5400},{id:3,name:"Mineral Water",price:3500},{id:4,name:"Coffee",price:5800}]};
function handleChange(e) {
var $row = e ? $(e).closest(".menu-position") : $('.menu-position')
var selectedCategory = $row.find('.category-select').val()
var $typeSelect = $row.find('.type-select')
var dataOptions = data[selectedCategory]
$typeSelect.html('')
dataOptions.forEach(function (option) {
var optionEle = document.createElement('option')
optionEle.value = option.id
optionEle.label = option.name
optionEle.setAttribute('data-price', option.price)
$typeSelect.append(optionEle)
})
}
handleChange()
$(".addRow").click(function () {
var $typeSelect = $(".type-select").clone()
var html = '<div class="row outer menu-position">';
html += '<div class="col-md-3">';
html += '<button type="button" class="btn btn-danger btn-lg delRow">Del</button>';
html += '</div>';
html += '<div class="col-md-3">';
html += '<select class="form-select form-select-lg mb-3 category-select cat" onChange="handleChange(this)">';
html += '<option value="Food">Food</option>';
html += '<option value="Drink">Drink</option>';
html += '</select>';
html += '</div>';
html += '<br>';
html += '<div class="col-md-3">';
html += '<select class="form-select form-select-lg mb-3 type-select type">' + $typeSelect.html() + '</select>';
html += '</div>';
html += '<div class="col-md-3">';
html += '<input type="number" class="form-control form-control-lg mb-3 qty" placeholder="Qty" min="0">';
html += '</div>';
html += '</div>';
$('.container-fluid').append(html);
});
$(document).on('click', '.delRow', function () {
$(this).closest('.row').remove();
$('.order').trigger('click')
});
$(document).ready(function () {
$('.order').click(function () {
var selectMenu = {};
$("select.type").each(function (i) {
//selectMenu[i] = {}
var text = $(this).find("option:selected").attr('label');
var price = Number($(this).find("option:selected").data('price'));
var qty = Number($(this).closest(".row").find(".qty").val());
if(text in selectMenu){
selectMenu[text][0] += qty;
selectMenu[text][1] += price;
selectMenu[text][2] += qty*price;
}else{
if(qty > 0) selectMenu[text]=[qty,price,qty*price];
}
})
$('.result tbody').html("");
var total = 0
$.each(selectMenu, function (key,value) {
$('.result tbody').append("<tr class='orders'><td>" + value[0] + '</td><td>' + key + '</td><td>' + value[2] + "</td></tr>");
total += parseInt(value[2]);
});
$(".totalPrice input").val(total)
});
});
button[type=submit] {
width: 50%;
margin-left: 25%;
margin-right: 25%;
}
button[type=button] {
font-size: 20px;
width: 50%;
margin-left: 25%;
margin-right: 25%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
<div class="container-fluid text-center">
<h2 style="font-size:70px; font-family:Lucida Console;">MENU</h2>
<br>
<div class="row menu-position">
<div class="col-md-3">
<button type="button" class="btn btn-primary btn-lg addRow">Add</button>
</div>
<div class="col-md-3">
<select class="form-select form-select-lg mb-3 category-select cat" onChange='handleChange(this)'>
<option value="Food">Food</option>
<option value="Drink">Drink</option>
</select>
</div>
<br>
<div class="col-md-3">
<select class="form-select form-select-lg mb-3 type-select type"></select>
</div>
<div class="col-md-3">
<input type="number" class="form-control form-control-lg mb-3 qty" placeholder="Qty" min="0">
</div>
</div>
</div>
</div>
<br>
<button type="submit" class="btn btn-secondary order">Order</button>
<br>
<br>
<div class="result text-center">
<table class="table table-bordered">
<thead>
<tr>
<th style="width:30%">Qty</th>
<th style="width:30%">Item name</th>
<th style="width:30%">Price</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<br>
<div class="totalPrice text-center">
<h4>Total Price</h4>
<input type="number" class="text-center" disabled>
</div>

Cascading Dropdown list in html not working when appended

I have a cascading dropdown lists (or dependant dropdown lists) using javascript which works fine. I would like to be able to append the html with this cascading dropdown list. The issue i'm now having is, when I append the html the dropdown list in the appended html doesn't work. Not sure how to rectify this, any help would be much appreciated. Thank you.
<html>
<head>
<!--CASCADING JS-->
<script>
var subjectObject = {
"Mattress": {
"75x30x3":["20", "22", "35"],
"75x30x4":["20", "22", "35"],
"75x30x6":["20", "22", "35"],
"75x36x3":["20", "22", "35"],
},
"Orthopaedic": {
"75x54x6":["N/A"],
"75x54x8":["N/A"],
"75x54x10":["N/A"],
},
"Block": {
"108":["13", "16", "18", "20", "22", "35"],
"88":["13", "16", "18", "20", "22", "35"],
}
window.onload = function() {
var subjectSel = document.getElementById("subject");
var topicSel = document.getElementById("topic");
var chapterSel = document.getElementById("chapter");
for (var x in subjectObject) {
subjectSel.options[subjectSel.options.length] = new Option(x, x);
}
subjectSel.onchange = function() {   
//empty Chapters- and Topics- dropdowns
chapterSel.length = 1; topicSel.length = 1;
//display correct values
for (var y in subjectObject[this.value]) {
topicSel.options[topicSel.options.length] = new Option(y, y);
}
}
topicSel.onchange = function() { //empty Chapters dropdown chapterSel.length = 1;
//display correct values
var z = subjectObject[subjectSel.value][this.value];
for (var i = 0; i < z.length; i++) {
chapterSel.options[chapterSel.options.length] = new Option(z[i], z[i]);
}
}
}
</script>
<!---END OF CASCADING JS-->
<!------ START OF APPENDED JS--------->
<script> //START OF APPENDED HTML (via JS)
function myFunction() {
var html =
'<div class="container">' +
'<div class="grid-item">' +
'<label for="itempurchased">' +
'<span style="color:darkred; font-size:14px; padding-top: -14px">Item:
</span>' +
'</label>' +
'</div>' +
'<div class="grid-item">' +
'<select name="subject" id="subject">' +
'<option value="" selected="selected" style="font-style: italic">Select Item</option>' +
'</select>' +
'</div>' +
'<div class="grid-item">' +
'<label for="size">' +
'<span style="color:darkred; font-size:14px">Size:</span>' +
'</label>' +
'</div>' +
'<div class="grid-item">' +
'<select name="topic" id="topic">' +
'<option value="" selected="selected" style="font-style: italic">Select Size</option>' +
'</select>' +
'</div>' +
'<div class="grid-item">' +
'<label for="density">' +
'<span style="color:darkred; font-size:14px">Density:</span>' +
'</label>' +
'</div>' +
'<div class="grid-item">' +
'<select name="chapter" id="chapter">' +
'<option value="" selected="selected" style="font-style: italic">Select Density</option>' +
'</select>' +
'</div>' +
'<div class="grid-item">' +
'<label for="qty">' +
'<span style="color:darkred; font-size:14px">Qty:</span>' +
'</label>' +
'</div>' +
'<div class="grid-item">' +
'<input type="text" name="qty" id="qty">' +
'</div>' +
'</div>' +
'<hr>';
$('div.additem').append(html).trigger('create');
}
</script>
<!------ END OF APPENDED HTML--------->
</head>
<body>
<html>
HTML
<form>
<div class="sales">
<div class="customer">
<label for="customer"> Customer Name:</label> <input type="text" name="customername" id="customername">
</div>
<hr>
<div>
<div class="container">
<div class="grid-item">
<label for="itempurchased">
<span style="color:darkred; font-size:14px; padding-top: -14px">Item:
</span>
</label>
</div>
<div class="grid-item">
<select name="subject" id="subject">
<option value="" selected="selected" style="font-style: italic">Select Item</option>
</select>
</div>
<div class="grid-item">
<label for="size">
<span style="color:darkred; font-size:14px">Size:</span>
</label>
</div>
<div class="grid-item">
<select name="topic" id="topic">
<option value="" selected="selected" style="font-style: italic">Select Size</option>
</select>
</div>
<div class="grid-item">
<label for="density">
<span style="color:darkred; font-size:14px">Density:</span>
</label>
</div>
<div class="grid-item">
<select name="chapter" id="chapter">
<option value="" selected="selected" style="font-style: italic">Select Density</option>
</select>
</div>
<div class="grid-item">
<label for="qty">
<span style="color:darkred; font-size: 14px">Qty:</span>
</label>
</div>
<div class="grid-item">
<input type="text" name="qty" id="qty">
</div>
</div>
<hr>
<!--div for add item-->
<div class="additem"></div>
</div>
<!--------------ACTION BUTTONS------------->
<div class="payment">
<input type="submit" value="GO TO PAYMENT" name="btnSubmit" data-theme="d" id="btnSubmit" data-ajax="false">
</div>
<div class="add_item">
<button onclick="myFunction()" data-theme="d" data-corners="5px" type="button">ADD ITEM</button>
</div>
</div>
</form>
</body>
</html>

You have a few syntax errors in your JS code:
Missing closing curly brace, before window.onload = function..., to match the opening one of var subjectObject = {
On line 7 of your second script, you have a new line after Item:. Your code could use some formatting love.
https://jsfiddle.net/02ejx9wq/
var subjectObject = {
"Mattress": {
"75x30x3": ["20", "22", "35"],
"75x30x4": ["20", "22", "35"],
"75x30x6": ["20", "22", "35"],
"75x36x3": ["20", "22", "35"],
},
"Orthopaedic": {
"75x54x6": ["N/A"],
"75x54x8": ["N/A"],
"75x54x10": ["N/A"],
},
"Block": {
"108": ["13", "16", "18", "20", "22", "35"],
"88": ["13", "16", "18", "20", "22", "35"],
}
}
window.onload = function() {
var subjectSel = document.getElementById("subject");
var topicSel = document.getElementById("topic");
var chapterSel = document.getElementById("chapter");
for (var x in subjectObject) {
subjectSel.options[subjectSel.options.length] = new Option(x, x);
}
subjectSel.onchange = function() {
//empty Chapters- and Topics- dropdowns
chapterSel.length = 1;
topicSel.length = 1;
//display correct values
for (var y in subjectObject[this.value]) {
topicSel.options[topicSel.options.length] = new Option(y, y);
}
}
topicSel.onchange = function() { //empty Chapters dropdown chapterSel.length = 1;
//display correct values
var z = subjectObject[subjectSel.value][this.value];
for (var i = 0; i < z.length; i++) {
chapterSel.options[chapterSel.options.length] = new Option(z[i], z[i]);
}
}
}
function myFunction() {
var html =
'<div class="container">' +
'<div class="grid-item">' +
'<label for="itempurchased">' +
'<span style="color:darkred; font-size:14px; padding-top: -14px">Item: </span>' +
'</label>' +
'</div>' +
'<div class="grid-item">' +
'<select name="subject" id="subject">' +
'<option value="" selected="selected" style="font-style: italic">Select Item</option>' +
'</select>' +
'</div>' +
'<div class="grid-item">' +
'<label for="size">' +
'<span style="color:darkred; font-size:14px">Size:</span>' +
'</label>' +
'</div>' +
'<div class="grid-item">' +
'<select name="topic" id="topic">' +
'<option value="" selected="selected" style="font-style: italic">Select Size</option>' +
'</select>' +
'</div>' +
'<div class="grid-item">' +
'<label for="density">' +
'<span style="color:darkred; font-size:14px">Density:</span>' +
'</label>' +
'</div>' +
'<div class="grid-item">' +
'<select name="chapter" id="chapter">' +
'<option value="" selected="selected" style="font-style: italic">Select Density</option>' +
'</select>' +
'</div>' +
'<div class="grid-item">' +
'<label for="qty">' +
'<span style="color:darkred; font-size:14px">Qty:</span>' +
'</label>' +
'</div>' +
'<div class="grid-item">' +
'<input type="text" name="qty" id="qty">' +
'</div>' +
'</div>' +
'<hr>';
$('div.additem').append(html).trigger('create');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
HTML
<form>
<div class="sales">
<div class="customer">
<label for="customer"> Customer Name:</label> <input type="text" name="customername" id="customername">
</div>
<hr>
<div>
<div class="container">
<div class="grid-item">
<label for="itempurchased">
<span style="color:darkred; font-size:14px; padding-top: -14px">Item:
</span>
</label>
</div>
<div class="grid-item">
<select name="subject" id="subject">
<option value="" selected="selected" style="font-style: italic">Select Item</option>
</select>
</div>
<div class="grid-item">
<label for="size">
<span style="color:darkred; font-size:14px">Size:</span>
</label>
</div>
<div class="grid-item">
<select name="topic" id="topic">
<option value="" selected="selected" style="font-style: italic">Select Size</option>
</select>
</div>
<div class="grid-item">
<label for="density">
<span style="color:darkred; font-size:14px">Density:</span>
</label>
</div>
<div class="grid-item">
<select name="chapter" id="chapter">
<option value="" selected="selected" style="font-style: italic">Select Density</option>
</select>
</div>
<div class="grid-item">
<label for="qty">
<span style="color:darkred; font-size: 14px">Qty:</span>
</label>
</div>
<div class="grid-item">
<input type="text" name="qty" id="qty">
</div>
</div>
<hr>
<!--div for add item-->
<div class="additem"></div>
</div>
<!--------------ACTION BUTTONS------------->
<div class="payment">
<input type="submit" value="GO TO PAYMENT" name="btnSubmit" data-theme="d" id="btnSubmit" data-ajax="false">
</div>
<div class="add_item">
<button onclick="myFunction()" data-theme="d" data-corners="5px" type="button">ADD ITEM</button>
</div>
</div>
</form>

How to sum dynamically added column values?

I have dynamically added rows that I need to sum.
Added columns and total will be displayed in separate fields.
I want to sum user enter data one particular column that is "DEBIT*" columns. for example user enter 1st row on debit coloumn 100rs and user click add new row and enter 100rs that amount will be calculate and show the total field..
Here is my code.
Faild Fiddle here
var ctr = 1;
var FieldCount = 1;
$('#fst_row').on('click', '.button-add', function() {
ctr++;
var cashacc_code = 'cashacc_code' + ctr;
var cashacc = 'cashacc' + ctr;
var cash_narrat = 'cash_narrat' + ctr;
var cashdeb = 'cashdeb' + ctr;
var cashcredit = 'cashcredit' + ctr;
var newTr = '<tr class="jsrow"><td><input type="number" class=' + "joe" + ' id=' + cashacc_code + ' placeholder="NNNN" /></td><td><select class="form-control" id="cashacc" ><option value="">TDS A/C Name1</option><option value="1">Joe</option><option value="2">Joe</option><option value="3">Joe</option></select></td><td><input type="text" class=' + "joe" + ' id=' + cash_narrat + ' placeholder="Enter Here" /></td><td><input type="number" class=' + "joe" + ' id=' + cashdeb + ' ' + FieldCount + ' placeholder="NNNN" /></td><td><input type="number" class=' + "joe" + ' id=' + cashcredit + ' /></td><td style="width: 4%"><img src="./img/plus.svg" class="insrt-icon button-add"><img src="./img/delete.svg" class="dlt-icon"></td></tr>';
$('#cashTable').append(newTr);
$(document).on('click', '.dlt-icon', function() {
$(this).parents('tr.jsrow').first().remove();
});
});
/* second row */
var ctr = 1;
var FieldCount = 1;
$('#sndRow').on('click', '.button-add', function() {
ctr++;
var rowNum = 'rowNum' + ctr;
var cashacc_nme = 'cashacc_nme' + ctr;
var acc_narrat = 'acc_narrat' + ctr;
var accdeb = 'accdeb' + ctr;
var accCredit = 'accCredit' + ctr;
var newTr = '<tr class="jsrow"><td><input type="number" class=' + "joe" + ' id=' + rowNum + ' placeholder="NNNN" /></td><td><select class="form-control" id="cashacc_nme" ><option value="">Account Name 1</option><option value="1">Plumz</option><option value="2">Plumz</option><option value="3">Plumz</option></select></td><td><input type="text" class=' + "joe" + ' id=' + acc_narrat + ' placeholder="Enter Here" /></td><td><input type="number" class=' + "joe debClass" + ' id=' + accdeb + ' ' + FieldCount + ' placeholder="NNNN" /></td><td><input type="number" class=' + "joe" + ' id=' + accCredit + ' /></td><td style="width: 4%"><img src="./img/plus.svg" class="insrt-icon button-add"><img src="./img/delete.svg" class="dlt-icon"></td></tr>';
$('#cashTable').append(newTr);
$(document).on('click', '.dlt-icon', function() {
$(this).parents('tr.jsrow').first().remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="cashTable" class="table table-bordered table-striped" required>
<thead>
<tr>
<th>A/c Code</th>
<th>Account Name*</th>
<th>Narration*</th>
<th>Debit*</th>
<th>Credit</th>
</tr>
</thead>
<tbody>
<tr id="fst_row">
<td>
<input type="number" id="cashacc_code" placeholder="NNNN" class="form-control" name="cashacc_code" />
</td>
<td>
<select class="form-control selectsch_items" name="cashacc" id="cashacc">
<option value="Choose and items">Choose and items</option>
<option value="1">TDS A/c Name 1</option>
<option value="2">TDS A/c Name 2</option>
</select>
</td>
<td>
<input type="text" id="cash_narrat" placeholder="Enter here" class="form-control" pattern="[a-zA-Z0-9-_.]{1,20}" name="cash_narrat" data-toggle="modal" data-target="#narratModal" />
</td>
<td>
<input type="number" id="cashdeb" placeholder="Debit Amount" class="form-control" name="cashdeb" readonly />
</td>
<td>
<input type="text" id="cashcredit" class="form-control" name="cashcredit" readonly />
</td>
<td class="tblBtn" style="width: 4%">
<img src="./img/plus.svg" class="insrt-icon button-add">
<img src="./img/delete.svg" class="dlt-icon dlt-icon">
</td>
</tr>
<tr id="sndRow">
<td>
<input type="number" class="form-control" id="rowNum" name="cashaccCode" placeholder="NNNN" />
</td>
<td>
<select class="form-control selectsch_items" name="cashacc_nme" id="cashacc_nme">
<option value="#">Choose and items</option>
<option value="1">Joe</option>
<option value="2">Joe2</option>
</select>
</td>
<td>
<input type="text" class="form-control" id="acc_narrat" placeholder="Enter here" name="acc_narrat" data-toggle="modal" data-target="#accnarratModal" />
</td>
<td>
<input type="number" class="form-control debClass" id="accdeb" placeholder="NNNNNN" name="accdeb" />
</td>
<td>
<input type="number" id="accCredit" class="form-control" name="accCredit" readonly />
</td>
<td style="width: 4%">
<img src="./img/plus.svg" id="debsum" class="insrt-icon button-add">
<img src="./img/delete.svg" class="dlt-icon">
</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-6">
<div class="cashTotal">
<p class="tableTotal">Total:</p>
</div>
</div>
<div class="col-6">
<input type="number" class="totaldeb" id="totaldbt" name="totaldbt" readonly>
</div>
</div>
I am just beginner, any help would be grateful.
Thank you.

EDIT: I'm sorry Joe, it looks like I attached your fiddle to the link other than my updated copy. Please check the link out again.
I've created a JSfiddle using yours for a working example.
I modified your code to make it easier by adding an attribute on your debit input of data-action="sumDebit" and added in this snippet.
$('body').on('change', '[data-action="sumDebit"]', function() { //Attach an event to body that binds to all tags that has the [data-action="sumDebit"] attribute. This will make sure all over dynamically added rows will have the trigger without us having to readd after ever new row.
var total = 0;
$('[data-action="sumDebit"]').each(function(i,e) { //Get all tags with [data-action="sumDebit"]
var val = parseFloat(e.value); //Get int value from string
if(!isNaN(val)) //Make sure input was parsable. If not, result come back as NaN
total += val;
});
$('#totaldbt').val(total); //Update value to total
});

I have fixed your code. please check it.
var ctr = 1;
var FieldCount = 1;
$('#fst_row').on('click', '.button-add', function() {
ctr++;
var cashacc_code = 'cashacc_code' + ctr;
var cashacc = 'cashacc' + ctr;
var cash_narrat = 'cash_narrat' + ctr;
var cashdeb = 'cashdeb' + ctr;
var cashcredit = 'cashcredit' + ctr;
var newTr = '<tr class="jsrow"><td><input type="number" class=' + "joe" + ' id=' + cashacc_code + ' name="cashaccCode" onchange="calSum()" keyup="calSum()" placeholder="NNNN" /></td><td><select class="form-control" id="cashacc" ><option value="">TDS A/C Name1</option><option value="1">Joe</option><option value="2">Joe</option><option value="3">Joe</option></select></td><td><input type="text" class=' + "joe" + ' id=' + cash_narrat + ' placeholder="Enter Here" /></td><td><input type="number" class=' + "joe" + ' id=' + cashdeb + ' ' + FieldCount + ' placeholder="NNNN" /></td><td><input type="number" class=' + "joe" + ' id=' + cashcredit + ' /></td><td style="width: 4%"><img src="./img/plus.svg" class="insrt-icon button-add"><img src="./img/delete.svg" class="dlt-icon"></td></tr>';
$('#cashTable').append(newTr);
$(document).on('click', '.dlt-icon', function() {
$(this).parents('tr.jsrow').first().remove();
});
});
/* second row */
var ctr = 1;
var FieldCount = 1;
$('#sndRow').on('click', '.button-add', function() {
ctr++;
var rowNum = 'rowNum' + ctr;
var cashacc_nme = 'cashacc_nme' + ctr;
var acc_narrat = 'acc_narrat' + ctr;
var accdeb = 'accdeb' + ctr;
var accCredit = 'accCredit' + ctr;
var newTr = '<tr class="jsrow"><td><input type="number" class=' + "joe" + ' id=' + rowNum + ' name="cashaccCode" onchange="calSum()" keyup="calSum()" placeholder="NNNN" /></td><td><select class="form-control" id="cashacc_nme" ><option value="">Account Name 1</option><option value="1">Plumz</option><option value="2">Plumz</option><option value="3">Plumz</option></select></td><td><input type="text" class=' + "joe" + ' id=' + acc_narrat + ' placeholder="Enter Here" /></td><td><input type="number" class=' + "joe debClass" + ' id=' + accdeb + ' ' + FieldCount + ' placeholder="NNNN" /></td><td><input type="number" class=' + "joe" + ' id=' + accCredit + ' /></td><td style="width: 4%"><img src="./img/plus.svg" class="insrt-icon button-add"><img src="./img/delete.svg" class="dlt-icon"></td></tr>';
$('#cashTable').append(newTr);
$(document).on('click', '.dlt-icon', function() {
$(this).parents('tr.jsrow').first().remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="cashTable" class="table table-bordered table-striped" required>
<tbody>
<tr id="fst_row">
///First row
<td>
<input type="number" onchange="calSum()" keyup="calSum()" id="cashacc_code" placeholder="NNNN" class="form-control" name="cashaccCode" />
</td>
<td>
<select class="form-control selectsch_items" name="cashacc" id="cashacc">
<option value="Choose and items">Choose and items</option>
<option value="1">TDS A/c Name 1</option>
<option value="2">TDS A/c Name 2</option>
</select>
</td>
<td>
<input type="text" id="cash_narrat" placeholder="Enter here" class="form-control" pattern="[a-zA-Z0-9-_.]{1,20}" name="cash_narrat" data-toggle="modal" data-target="#narratModal" />
</td>
<td>
<input type="number" id="cashdeb" placeholder="Debit Amount" class="form-control" name="cashdeb" readonly />
</td>
<td>
<input type="text" id="cashcredit" class="form-control" name="cashcredit" readonly />
</td>
<td class="tblBtn" style="width: 4%">
<img src="./img/plus.svg" class="insrt-icon button-add">
<img src="./img/delete.svg" class="dlt-icon dlt-icon">
</td>
</tr>
//// second row
<tr id="sndRow">
<td>
<input type="number" onchange="calSum()" keyup="calSum()" class="form-control" id="rowNum" name="cashaccCode" placeholder="NNNN" />
</td>
<td>
<select class="form-control selectsch_items" name="cashacc_nme" id="cashacc_nme">
<option value="#">Choose and items</option>
<option value="1">Joe</option>
<option value="2">Joe2</option>
</select>
</td>
<td>
<input type="text" class="form-control" id="acc_narrat" placeholder="Enter here" name="acc_narrat" data-toggle="modal" data-target="#accnarratModal" />
</td>
<td>
<input type="number" class="form-control debClass" id="accdeb" placeholder="NNNNNN" name="accdeb" />
</td>
<td>
<input type="number" id="accCredit" class="form-control" name="accCredit" readonly />
</td>
<td style="width: 4%">
<img src="./img/plus.svg" id="debsum" class="insrt-icon button-add">
<img src="./img/delete.svg" class="dlt-icon">
</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-6">
<div class="cashTotal">
<p class="tableTotal">Total:</p>
</div>
</div>
<div class="col-6">
<input type="number" class="totaldeb" id="totaldbt" name="totaldbt" readonly>
</div>
</div>
<script>
function calSum(){
var calvalue = 0;
$("input[name*='cashaccCode']").each( function( key, item ) {
//alert( key + ": " + item.value );
calvalue = calvalue + parseFloat(item.value);
});
$("#totaldbt").val(calvalue);
$
}
</script>

Cant' put number in value of text input using jquery

I have a list that has several option. I dynamically set an event that whenever a button is clicked, create a table and text input and put the value of list in in there, but I have option that have number value but it didn't set to the value of that input. See my code.
My jquery code:
$("#table_drugs").append("<tr><td>"
+ $("#drugs_list").val() + "<input type='text' name='past_druges_used' value="+$("#drugs_list").val()+">"
+ "</td><td>" + $("#drugs-explain").val()+"<input type='text' name='how_to_use' value="+$("#drugs-explain").val()+">"
+ "</td><td>" + "<button type='button' class='col-sm-7 btn btn-danger pull-right'>delete</button> "
+ "</td></tr>");
And my html:
<div class="col-md-12">
<div id="drugs_list_div" class="form-group">
<div class="col-md-4 col-md-offset-6">
<select id="drugs_list" class="form-control" style="font-family: font-style-3;">
<option>empty</option>
<option>Drugs 1</option>
<option>Drugs 3</option>
<option>Drugs 2</option>
</select>
</div>
</div>
<div id="drugs-explain-div" class="form-group">
<div class="col-md-4 col-md-offset-6">
<input type="text" class="form-control" id="drugs-explain" style="font-family: font-style-1;">
</div>
</div>
</div>
<div class="col-md-12">
<div id="table-drugs-div" class="col-xs-11 list-hide">
<table class="table table-striped" id="table_drugs">
</table>
</div>
</div>

You need to put quotes around your values:
$("#table_drugs").append("<tr><td>"
+ $("#drugs_list").val() + "<input type='text' name='past_druges_used' value='"+$("#drugs_list").val()+"'>"
+ "</td><td>" + $("#drugs-explain").val()+"<input type='text' name='how_to_use' value='"+$("#drugs-explain").val()+"'>"
+ "</td><td>" + "<button type='button' class='col-sm-7 btn btn-danger pull-right'>delete</button> "
+ "</td></tr>");

Categories

Resources