読み取り値とユーザーが入力した値との比較

Question

readonlyの利用可能な数量値とユーザーによって入力された数量を持つ表があります。利用可能数量がユーザが入力した数量以上であるかどうかを確認します。ユーザーが入力した値が使用可能な数量を超えている場合は、使用可能な数量未満の値を入力するようにユーザーに指示します。最初に入力された数量値が正しく検証されます。ユーザーが2番目の数量を入力すると問題が発生します。どのように私はこれに取り組むことができますか？私は私のid's

としてavailableQuantityとquantityを使用ここでは、1ページあたり1つのIDを持っていることが私のコードを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'変数の一意の値を連結して使用してみてください。または、関数に '$ {list.quantity}'を渡します。

 <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="availableQuantity"またはid="quantity"が2つ以上ないような名前体系を作成します。例えば：

<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）文書が唯一ので、多分あなたが利用可能数量を見つけるために、クラスやdata-属性を使用する場合は、各IDを持つ一つの要素を持っている必要があります。たとえば、要素に 'data-available-quantity'を追加すると、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を追加）