I have two datatables, one is for line items to order and the other one is for selected items to order.
I have available quantity and quantity to order. I do a check to see if user enter quantity which is not more than available quantity which works fine. I than let the user add the line item to order if quantity is provide. My struggle is getting to parse the entered quantity to the data table of selected line items. I only pass two cols the part number and quantity to datatable of selected line Items. I also want to make the input of quantity read-only once it is on the table of selected items
<pre>
$(function ($) {
createDataTableForAvailableHOstock("#availableHOstockForOrder", null);
createDataTableSelectedHOStock('#selectedHOStockToOrder', null);
$('#selectedHOStockToOrder').on("click", "tbody button", function (evt) { moveRow(evt, '#selectedHOStockToOrder', '#availableHOstockForOrder'); })
$('#availableHOstockForOrder').on("click", "tbody button", function (evt) { moveRow(evt, '#availableHOstockForOrder', '#selectedHOStockToOrder'); })
})
function createDataTableForAvailableHOstock(target, data) {
$(target).DataTable({
info: true,
searching:true,
paging: true,
data: list,
columnDefs: [{
targets: [-1], render: function () {
return "<button class='select' type='button' onClick='validateQuantity()'>" + (target == '#selectedHOStockToOrder' ? 'Remove' : 'Add') + "</button>"
}
}],
columns: [{
data: "part no"
}, {
data: "description"
}, {
data: "model no"
}, {
data: "avalaible qty"
}, {
data: "quantity"
},
{ data: null }],
});
}
function createDataTableSelectedHOStock(target, data) {
$(target).DataTable({
info: true,
searching:true,
paging: true,
columnDefs: [{
targets: [-1], render: function () {
return "<button type='button' class='select' >" + (target == '#selectedHOStockToOrder' ? 'Remove' : 'Add') + "</button>"
}
}],
columns: [{
data: "part no"
}, {
data: "quantity"
},
{ data: null }],
});
}
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
function compareQuantity(element, availableQuantity) {
if (availableQuantity > element.value){
console.log("True,",element.value + " is less than " + availableQuantity);
console.log("Place an Order");
}
if (element.value == ''){
alert("Quantity can not be empty. \n Please enter quantity which is less than available quantity");
console.log(element.value);
}
else if(availableQuantity < element.value) {
alert("Your order quantity can not be greater than available quantity. \n Please enter less quantity");
element.value = null;
console.log("False,",availableQuantity + " is small than " + element.value);
console.log("You can not place an order, enter less quantity");
console.log("Enter value between 1 till " +element.value+ " not more than " +availableQuantity);
}
}
function validateQuantity(){
var quantity = document.getElementsByName("quantity")[0].value;
alert (quantity);
}
function moveRow(evt, fromTable, toTable) {
var table1 = $(fromTable).DataTable();
var table2 = $(toTable).DataTable();
var tr = $(evt.target).closest("tr");
var row = table1.row(tr);
var data = JSON.parse(JSON.stringify(row.data()));
table2.row.add(data).draw();
row.remove().draw();
}
var list = [
{
"part no": 'CLT-C659S/SEE',
"description": 'Cyan Toner Cartridge',
"model no": 'CLX-8640/8650',
"avalaible qty": '<input type="text" id="CLT-C659S/SEE_avaliableQuantity" name="avaliableQuantity" class="form-control" readonly="readonly" value="23">',
"quantity": '<input type="text" id="CLT-C659S/SEE_quantity" name="quantity" class="form-control" onkeypress="return isNumber(event)" onblur="compareQuantity(this, 23)" value="" />',
},]
Here is my full code
What I have tried:
I tried to get the value on alert to see if I can be able to get it. I do get the value on alert