如何将输入字段值限制为一定数量

Question

I have an HTML table inside which i have a column AcceptedQty which is input field

Total i have 5 columns Code , Item Name , unitcode , Quantity and AcceptedQty two of them Quantity and AcceptedQty have same values but AcceptedQty is input field so user can input any number inside that and i have made that type="number" to enter only numbers

What i am trying to do

• when user input any number inside the input field it should not allow him to enter greater number to the corresponding quantity
• suppose for code 1326 Quantity is 3 so while editing AcceptedQty i want to restrict user not to enter any number greater then 3
• here i have a HTML table and so many rows that's why finding it dificult to do

Snippet

 var tableDataDraft = [{ "Code": "1326", "Item Name": "PINEAPPLE KG", "unitcode": "NOS", "Quantity": "3.0000", "AcceptedQty": "3.0000" }, { "Code": "1494", "Item Name": "2D CAKE CHARGES PER KG", "unitcode": "NOS", "Quantity": "3.0000", "AcceptedQty": "3.0000" } ] function addTableDraft(tableDataDraft) { var col = Object.keys(tableDataDraft[0]); var countNum = col.filter(i => !isNaN(i)).length; var num = col.splice(0, countNum); col = col.concat(num); var table = document.createElement("table"); var tr = table.insertRow(-1); for (var i = 0; i < col.length; i++) { var th = document.createElement("th"); th.innerHTML = col[i]; tr.appendChild(th); tr.classList.add("text-center"); tr.classList.add("head") } for (var i = 0; i < tableDataDraft.length; i++) { tr = table.insertRow(-1); for (var j = 0; j < col.length; j++) { let tabCell = tr.insertCell(-1); var hiddenField = document.createElement("input"); //creating input field hidden hiddenField.style.display = "none"; var tabledata = tableDataDraft[i][col[j]]; if (tableDataDraft[i]['Code'] === tableDataDraft[i][col[j]]) { //now setting html attributes tabCell.innerHTML = tabledata; hiddenField.setAttribute('name', 'Item_Code'); hiddenField.setAttribute('value', tabledata); tabCell.appendChild(hiddenField); } if (tableDataDraft[i]['Item Name'] === tableDataDraft[i][col[j]]) { tabCell.innerHTML = tabledata; hiddenField.setAttribute('name', 'Item_Name'); hiddenField.setAttribute('value', tabledata); tabCell.appendChild(hiddenField); } if (tableDataDraft[i]['unitcode'] === tableDataDraft[i][col[j]]) { tabCell.innerHTML = tabledata; hiddenField.setAttribute('name', 'Unit_code'); hiddenField.setAttribute('value', tabledata); tabCell.appendChild(hiddenField); } if (col[j] === 'Quantity') { tabCell.innerHTML = tabledata; hiddenField.setAttribute('name', 'Quantity'); tabCell.appendChild(hiddenField); } if (col[j] === 'AcceptedQty') { var quantityField = document.createElement("input"); quantityField.style.border = "none"; quantityField.style["text-align"] = "right"; quantityField.setAttribute("name", "AcceptedQty"); quantityField.setAttribute("autocomplete", "on"); quantityField.setAttribute("value", tabledata); quantityField.setAttribute("type", "number"); quantityField.setAttribute("required", "required"); quantityField.classList.add("dataReset"); quantityField.toLocaleString('en-IN'); tabCell.appendChild(quantityField); } if (j > 1) tabCell.classList.add("text-right"); } } var divContainer = document.getElementById("table"); divContainer.innerHTML = ""; divContainer.appendChild(table); table.classList.add("table"); table.classList.add("table-striped"); table.classList.add("table-bordered"); table.classList.add("table-hover"); } addTableDraft(tableDataDraft) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <div class="table-responsive" id="commonDvScroll"> <table id=table></table> </div> 

Answer 1

and i have made that type="tel" to enter only numbers

Use type="number" ( "tel" is a telephone number ) and the min and max attributes (and reflected properties) of the HTMLInputElement (and step if you don't want fractional values). Probably also include an input handler to handle browsers without HTML5 field features.

See the *** commented lines:

 var tableDataDraft = [{ "Code": "1326", "Item Name": "PINEAPPLE KG", "unitcode": "NOS", "Quantity": "3.0000", "AcceptedQty": "3.0000" }, { "Code": "1494", "Item Name": "2D CAKE CHARGES PER KG", "unitcode": "NOS", "Quantity": "3.0000", "AcceptedQty": "3.0000" } ] function addTableDraft(tableDataDraft) { var col = Object.keys(tableDataDraft[0]); var countNum = col.filter(i => !isNaN(i)).length; var num = col.splice(0, countNum); col = col.concat(num); var table = document.createElement("table"); var tr = table.insertRow(-1); for (var i = 0; i < col.length; i++) { var th = document.createElement("th"); th.innerHTML = col[i]; tr.appendChild(th); tr.classList.add("text-center"); tr.classList.add("head") } for (var i = 0; i < tableDataDraft.length; i++) { tr = table.insertRow(-1); for (var j = 0; j < col.length; j++) { let tabCell = tr.insertCell(-1); var hiddenField = document.createElement("input"); //creating input field hidden hiddenField.style.display = "none"; var tablerow = tableDataDraft[i]; // *** var tabledata = tablerow[col[j]]; // *** if (tableDataDraft[i]['Code'] === tableDataDraft[i][col[j]]) { //now setting html attributes tabCell.innerHTML = tabledata; hiddenField.setAttribute('name', 'Item_Code'); hiddenField.setAttribute('value', tabledata); tabCell.appendChild(hiddenField); } if (tableDataDraft[i]['Item Name'] === tableDataDraft[i][col[j]]) { tabCell.innerHTML = tabledata; hiddenField.setAttribute('name', 'Item_Name'); hiddenField.setAttribute('value', tabledata); tabCell.appendChild(hiddenField); } if (tableDataDraft[i]['unitcode'] === tableDataDraft[i][col[j]]) { tabCell.innerHTML = tabledata; hiddenField.setAttribute('name', 'Unit_code'); hiddenField.setAttribute('value', tabledata); tabCell.appendChild(hiddenField); } if (col[j] === 'Quantity') { tabCell.innerHTML = tabledata; hiddenField.setAttribute('name', 'Quantity'); tabCell.appendChild(hiddenField); } if (col[j] === 'AcceptedQty') { var quantityField = document.createElement("input"); quantityField.style.border = "none"; quantityField.style["text-align"] = "right"; quantityField.setAttribute("name", "AcceptedQty"); quantityField.setAttribute("autocomplete", "on"); quantityField.setAttribute("value", tabledata); quantityField.setAttribute("type", "number"); quantityField.min = 0; // *** quantityField.max = tablerow.Quantity; // *** quantityField.setAttribute("required", "required"); quantityField.classList.add("dataReset"); quantityField.toLocaleString('en-IN'); tabCell.appendChild(quantityField); } if (j > 1) tabCell.classList.add("text-right"); } } var divContainer = document.getElementById("table"); divContainer.innerHTML = ""; divContainer.appendChild(table); table.classList.add("table"); table.classList.add("table-striped"); table.classList.add("table-bordered"); table.classList.add("table-hover"); } addTableDraft(tableDataDraft) 

 input:invalid { color: #d00; border: 1px solid #d00 !important; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <div class="table-responsive" id="commonDvScroll"> <table id=table></table> </div> 

Note that the user will still be able to enter a higher number, but the form won't validate. See this tutorial on MDN.

Answer 2

As @TJ Crowder mentioned, make use of the input type number

That input type allows you to set a max value, which is based of the previous columns value

Additionally, you'll want to add an event listener to the input to "listen" / detect changes to the input, so that you can act upon any changes, restricting the input value as you see fit

---

 var tableDataDraft = [{ "Code": "1326", "Item Name": "PINEAPPLE KG", "unitcode": "NOS", "Quantity": "3.0000", "AcceptedQty": "3.0000" }, { "Code": "1494", "Item Name": "2D CAKE CHARGES PER KG", "unitcode": "NOS", "Quantity": "3.0000", "AcceptedQty": "3.0000" } ] function addTableDraft(tableDataDraft) { var col = Object.keys(tableDataDraft[0]); var countNum = col.filter(i => !isNaN(i)).length; var num = col.splice(0, countNum); col = col.concat(num); var table = document.createElement("table"); var tr = table.insertRow(-1); for (var i = 0; i < col.length; i++) { var th = document.createElement("th"); th.innerHTML = col[i]; tr.appendChild(th); tr.classList.add("text-center"); tr.classList.add("head") } for (var i = 0; i < tableDataDraft.length; i++) { tr = table.insertRow(-1); for (var j = 0; j < col.length; j++) { let tabCell = tr.insertCell(-1); var hiddenField = document.createElement("input"); //creating input field hidden hiddenField.style.display = "none"; var tabledata = tableDataDraft[i][col[j]]; if (tableDataDraft[i]['Code'] === tableDataDraft[i][col[j]]) { //now setting html attributes tabCell.innerHTML = tabledata; hiddenField.setAttribute('name', 'Item_Code'); hiddenField.setAttribute('value', tabledata); tabCell.appendChild(hiddenField); } if (tableDataDraft[i]['Item Name'] === tableDataDraft[i][col[j]]) { tabCell.innerHTML = tabledata; hiddenField.setAttribute('name', 'Item_Name'); hiddenField.setAttribute('value', tabledata); tabCell.appendChild(hiddenField); } if (tableDataDraft[i]['unitcode'] === tableDataDraft[i][col[j]]) { tabCell.innerHTML = tabledata; hiddenField.setAttribute('name', 'Unit_code'); hiddenField.setAttribute('value', tabledata); tabCell.appendChild(hiddenField); } if (col[j] === 'Quantity') { tabCell.innerHTML = tabledata; hiddenField.setAttribute('name', 'Quantity'); tabCell.appendChild(hiddenField); } if (col[j] === 'AcceptedQty') { var quantityField = document.createElement("input"); quantityField.style.border = "none"; quantityField.style["text-align"] = "right"; quantityField.setAttribute("name", "AcceptedQty"); quantityField.setAttribute("autocomplete", "on"); quantityField.setAttribute("value", tabledata); quantityField.setAttribute("type", "number"); quantityField.setAttribute("required", "required"); quantityField.setAttribute("max", parseInt(tableDataDraft[i]["Quantity"])); quantityField.setAttribute("min", 0); quantityField.setAttribute("step", 0.1); quantityField.addEventListener("change", function() { let max = parseFloat(this.getAttribute('max')); let min = parseFloat(this.getAttribute('min')); let val = parseFloat(this.value) val = val > max ? max : val; val = val < min ? min : val; if (val != this.value) { alert("Input is incorrect"); this.focus(); } this.value = val; }); quantityField.setAttribute("min", 0); quantityField.classList.add("dataReset"); quantityField.toLocaleString('en-IN'); tabCell.appendChild(quantityField); } if (j > 1) tabCell.classList.add("text-right"); } } var divContainer = document.getElementById("table"); divContainer.innerHTML = ""; divContainer.appendChild(table); table.classList.add("table"); table.classList.add("table-striped"); table.classList.add("table-bordered"); table.classList.add("table-hover"); } addTableDraft(tableDataDraft) 

 input:invalid { outline: 1px solid red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <div class="table-responsive" id="commonDvScroll"> <table id=table></table> </div>