Question

我的表格中有readonly的可用数量值和用户输入的数量。我检查可用数量是否超过用户输入的数量。如果用户输入的值大于可用数量，我告诉用户输入小于可用数量的值。第一个输入的数量值得到正确验证。当用户输入第二个数量时，我遇到问题。我怎么解决这个问题？我使用availableQuantity和quantity作为id's

这是我的代码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代码

<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>

Answer 1

id属性指定HTML元素的唯一ID，它必须在HTML文档中是唯一的。尝试使用id连接“＆list”列表中的唯一值。变量。或者通过＆＃39; $ {list.quantity}＆＃39;这个功能。

       <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中

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

Answer 2

每页只能有一个ID。制定名称方案，使您在页面上没有两个或更多id="availableQuantity"或id="quantity"。例如：

<tr>
  <td>${list.partNumber}</td>
  <td>${list.itemDescription}</td>
  <td>${list.compitableDevice}</td>
  <td><input type="text" id="avaliableQuantity-1" 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="quantity-1" name="quantity" class="form-control" onblur="compareQuantity()" value="" /></td>
</tr>
<tr>
  <td>${list.partNumber}</td>
  <td>${list.itemDescription}</td>
  <td>${list.compitableDevice}</td>
  <td><input type="text" id="avaliableQuantity-2" 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="quantity-2" name="quantity" class="form-control" onblur="compareQuantity()" value="" /></td>
</tr>

Answer 3

1）文档每个ID只应包含一个元素，因此您可能希望使用类或data-属性来查找可用数量。例如，您可以添加＆＃39; data-available-quantity＆＃39;在元素上，然后您可以使用this.dataset.availableQuantity进行检查。

2）你不需要查找元素，因为你可以在调用onBlur时传递它，比如

<input type="text" onblur="checkQuantity(this)" data-available-quantity="25" name="quantity" ...

然后你的功能看起来像

function checkQuantity(element) {
  if (parseInt(element.dataset.availableQuantity) < parseInt(element.value()))
    // this is where you add a message

（编辑：添加了parseInt以确保它们是所有整数）

将只读值与用户输入的值进行比较

3 个答案: