'How to parse the entered input value from one datatable to another datatable
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 supplied when you order. I do a check to see if user enter quantity which is not more than available quantity onblur which works fine. I than let the user add the line item to order if quantity is provided.
I have been battling to get this to work, but now I get the entered quantity and displayed on the provided qty on the Selected Lime Item to order, now the problem is that the entered value when the button is clicked only show on the first row of the table.
What is wrong in my code?
My updated JavaScript code
// startup and initialize empty tables for appearance
$(function ($) {
createDataTableForAvailableHOstock("#availableHOstockForOrder", null);
createDataTableSelectedHOStock('#selectedHOStockToOrder', null);
// set up event handlers for both directrions
$('#selectedHOStockToOrder').on("click", "tbody button", function (evt) { moveRow(evt, '#selectedHOStockToOrder', '#availableHOstockForOrder'); })
$('#availableHOstockForOrder').on("click", "tbody button", function (evt) { moveRow(evt, '#availableHOstockForOrder', '#selectedHOStockToOrder'); })
})//end startup and initialize empty tables for appearance
// create data table for createDataTableForAvailableHOstock.
function createDataTableForAvailableHOstock(target, data) {
$(target).DataTable({
info: true,
searching:true,
paging: true,
data: list,
columnDefs: [{
targets: [-1], render: function () {
return "<button type='button' onclick='saveEneteredQuantity();'>" + (target == '#selectedHOStockToOrder' ? 'Remove' : 'Add') + "</button>"
}
}],
columns: [{
data: "part no"
}, {
data: "description"
}, {
data: "model no"
}, {
data: "avalaible qty"
}, {
data: "quantity"
},
{ data: null }],
});
}//end create data table for createDataTableForAvailableHOstock.
//Check saveEneteredQuantity
function saveEneteredQuantity(){
var quantity;
var getEnteredQuantity;
quantity = document.getElementsByName('quantity')[0].value;
document.getElementsByName('quantityEntered')[0].value = quantity;
for (var i = 0; i < quantity.length; ++i) {
var getEnteredQuantity = quantity[i];
console.log("See whats on the loop :",getEnteredQuantity);
}
getEnteredQuantity = quantity;
console.log("Entered Quantity: ",getEnteredQuantity);
}// end Check saveEneteredQuantity
// create data table for createDataTableSelectedHOStock.
function createDataTableSelectedHOStock(target, data) {
$(target).DataTable({
info: true,
searching:true,
paging: true,
columnDefs: [{
targets: [-1], render: function () {
return "<button type='button'>" + (target == '#selectedHOStockToOrder' ? 'Remove' : 'Add') + "</button>"
}
}],
columns: [
{
data: "part no"
},
{
data: "avalaible qty"
},
{
data: "quantityEntered"
},
{ data: null }],
});
} // end create data table for createDataTableSelectedHOStock.
//Compare available quantity with entered quantity
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);
}
}
//End Compare available quantity with entered quantity
// Accept alphanumeric characters only -->
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 to move rows
function moveRow(evt, fromTable, toTable, getEnteredQuantity) {
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();
}//end startup and initialize empty tables for appearance
// this is JavaScript code written in the JSP to access the compatibility HO stock
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="quantity" name="quantity" class="form-control" onkeypress="return isNumber(event)" onblur="compareQuantity(this, 23)" value="" />',
"quantityEntered": '<input type="text" id="CLT-C659S/SEE_quantity" name="quantityEntered" class="form-control" onkeypress="return isNumber(event)" readonly value="" />'
},
]
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|