How to make a click function in javascript loop through all records instead of just the first record-CodePudding

I have a feeling this problem I've having trouble with is pretty simple but I am new to all this and don't know all the ins and outs of html, javascript, etc. yet. The javascript functions is what's really difficult to learn for me. Anyways, I have an item cart where the users add whatever products they want to order. I'm trying to implement a function where when the user clicks the "Proceed To Checkout" button it checks to make sure whatever qty they are ordering does not exceed the amount we have in stock. If it does then display an alert message. I have a function working perfectly at the moment, but it is only checking the first record and not looping through anything. Any thoughts or insight on what I can do would be greatly appreciated. Here is my code:

   @foreach (var item in (List<Item>)Session["cart"])
    {
        <tr>
          <td>
            @item.Pr.Product_Code
          </td>
          <td>
            @item.Pr.Description<br />
            <span  id="errmsg"></span>
          </td>
          <td>
            <img src="~/Images/@item.Pr.ImageUrl" width="100" height="80" />
          </td>
          <td>
            <input type="text" value="@item.Qty" id="quantity" name="quantity"  /><br />
            <input type="text" value="@item.Pr.Qty_Available" id="qty-avbl" name="qty-avbl"  hidden />
          </td>
          <td >
            <button >
               <i ></i>
               @Html.ActionLink("Remove", "Delete", "ItemCart", new { id = item.Pr.ProductID },
                           new { onclick = "return confirm ('Are you sure you want to delete this item?');", @class = "remove" })
            </button>
            </td>
            <td></td>
         </tr>
      }
    </table>
         <div></div>
         <hr />
         <p >
            <input type="submit"  value="Proceed To Checkout" id="checkQty" />
         </p>
         <p >
            @Html.ActionLink("Continue Shopping", "ProductCatalog", "Products", "", new { @class = "shopping-link" })
         </p>
      }@*End of form*@
    }@*End of if session*@

and my function I have for this is:

<script type="text/javascript">
    $(document).ready(function () {
        $("#checkQty").click(function (event) {
            // Get the value of the input field with id
            let qty = document.getElementById("quantity").value;
            let avbl = document.getElementById("qty-avbl").value;
            let text;
                if (qty > avbl) {
                    event.preventDefault();
                    text = "There is not enough stock to order this amount";
                    document.getElementById("errmsg").innerHTML = text;
                    return false;
                }
                else {
                    text = "";
                }           
        });
    });
</script>

CodePudding user response：

Try this, I hope it will solve your problem based on what you described.

<script type="text/javascript">
$(document).ready(function () {
    $("#checkQty").click(function (event) {
        // Get the value of the input field with id
        let qtys = document.querySelectorAll('input[name="quantity"]');
        let avbls = document.querySelectorAll('input[name="qty-avbl"]');
        let text;
        
        // assumming the quantity and available quantity inputs will be adjacent and equal in number
        for(let i=0; i < qtys.length; i  ){
            let qty = qtys[i].value;
            let avbl = avbls[i].value;

            if (qty > avbl) {
                event.preventDefault();
                text = "There is not enough stock to order this amount";
                document.getElementById("errmsg").innerHTML = text;
                return false;
            }
            else {
                text = "";
            }     
        }
  
    });
});

Here you can use for-of or foreach loop as well to iterate over all the inputs.