将只读值与用户输入的值进行比较 [英] Comparing readonly value with a value entered by a user

问题描述

我有一个表格，其中包含只读的可用数量值以及用户输入的数量。我检查可用数量是否超过用户输入的数量。如果用户输入的数值大于可用数量，则告诉用户输入小于可用数量的数值。第一次输入的数量值得到正确验证。当用户输入第二个数量时，我会遇到问题。我该如何解决这个问题？我使用 availableQuantity 和数量作为我的 id's

I have table which have available quantity value of a readonly and a quantity entered by a user. I check if the available quantity is more than what the user entered. If value entered by user is more than available quantity I tell the user to enter value less than available quantity. The first entered quantity value gets validated correctly. I get problem when the user enter second quantity. How can I tackle this? I use availableQuantity and quantity as my id's

这是我的代码HTML

Here is my code HTML

<div id="makeOrders">
    <table id="myDatatable" class="display datatable">
        <thead>
            <tr>
                <th>Part No</th>
                <th>Description</th>
                <th>Model No</th>
                <th>Available QTY</th>
                <th>Tick To Order</th>
                <th>Quantity</th>
                <!-- <th>Edit</th> -->
            </tr>
        </thead>
        <tbody>
            <!-- Iterating over the list sent from Controller -->
            <c:forEach var="list" items="${compatibility}">

                <tr>
                    <td>${list.partNumber}</td>
                    <td>${list.itemDescription}</td>
                    <td>${list.compitableDevice}</td>
                    <td><input type="number" id="avaliableQuantity"
                        name="avaliableQuantity" class="form-control" readonly="readonly"
                        value="${list.quantity}"></td>
                    <td><input type="checkbox" class="form-group"
                        id="checkedOrder" name="selectedItem"
                        value="${list.partNumber},${list.compitableDevice},${list.itemDescription}"></td>
                    <td><input type="number" id="quantity" name="quantity"
                        class="form-control" onblur="compareQuantity()" value="" /></td>
                </tr>

            </c:forEach>
        </tbody>
    </table>

</div>

这是我的JavaScript代码

This my JavaScript code

<script type="text/javascript">
        /*Compare available quantity with entered quantity*/
        function compareQuantity() {

            var ourAvaliableQuantity = document.getElementById("avaliableQuantity").value; 
            var yourQuantity = document.getElementById("quantity").value;           
            if ( ourAvaliableQuantity  > yourQuantity ) {
                alert("Your quantity (" +yourQuantity+ ") is less or equal to available quantity (" + ourAvaliableQuantity+ ") order.\n You can now place your order"); 
                console.log("True,",yourQuantity + " is less than " + ourAvaliableQuantity);
                console.log("Place an Order");
            }else if(ourAvaliableQuantity < yourQuantity) {
                alert("Your order quantity (" +yourQuantity+ ") can not be greater than available quantity (" + ourAvaliableQuantity+ "). \n Please enter less quantity");
                document.getElementById("quantity").value = "";
                console.log("False,",ourAvaliableQuantity + " is small than " + yourQuantity);
                console.log("You can not place an order, enter less quantity");
                console.log("Enter value between 1 till " +ourAvaliableQuantity+ " not more than " +ourAvaliableQuantity);
            } 
        } 
</script>

推荐答案

id属性为HTML元素指定一个唯一的ID它必须在HTML文档中是唯一的。尝试使用id连接来自'list'变量的唯一值。或者将'$ {list.quantity}'传递给函数。

The id attribute specifies a unique id for an HTML element, it must must be unique within the HTML document. try use the id concatenating an unique value from the 'list' variable. Or pass the '${list.quantity}' to the function.

       <c:forEach var="list" items="${compatibility}">

            <tr>
                <td>${list.partNumber}</td>
                <td>${list.itemDescription}</td>
                <td>${list.compitableDevice}</td>
                <td><input type="text" id="${list.partNumber}_avaliableQuantity"
                    name="avaliableQuantity" class="form-control" readonly="readonly"
                    value="${list.quantity}"></td>
                <td><input type="checkbox" class="form-group"
                    id="checkedOrder" name="selectedItem"
                    value="${list.partNumber},${list.compitableDevice},${list.itemDescription}"></td>
                <td><input type="text" id="${list.partNumber}_quantity" name="quantity"
                    class="form-control" onblur="compareQuantity(this, ${list.quantity})" value="" /></td>
            </tr>

        </c:forEach>

并在您的javascript中

And in your javascript

function compareQuantity(element, availableQuantity) {
  if (availableQuantity >= element.value){
....

这篇关于将只读值与用户输入的值进行比较的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！