Click here to Skip to main content
15,887,214 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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


JavaScript
<pre>  // 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'); })
               
            })
            // 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 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 }],


                });
            }
			 // 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' class='select' >" + (target == '#selectedHOStockToOrder' ? 'Remove' : 'Add') + "</button>"
                        }
                    }],
                     columns: [{
                        data: "part no"
                    },  {
                        data: "quantity"
                    },
                    { data: null }],

                });
            }
			// 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;
			}
			/*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--*/
			
			function validateQuantity(){
			  var quantity = document.getElementsByName("quantity")[0].value;			  
 			  alert (quantity);
			}
								
            // function to move rows
            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();				
            }
			// end function to move rows
			
            
           //pull data from object compatibility
            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
Posted
Updated 3-Aug-17 5:54am
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900