如何根据Quantity输入值限制Damaged输入框的最大值

要让Damaged输入框允许的最大值小于Quantity输入框的数值，可通过以下步骤实现：

步骤1：为输入框添加唯一ID #

给Quantity和Damaged输入框添加ID，方便JavaScript精准定位元素。

步骤2：编写动态限制逻辑 #

添加事件监听，在Quantity输入值变化时，自动更新Damaged输入框的max属性，并实时验证Damaged的输入值是否符合限制。

修改后的完整代码 #

<div id="addtransaction" class="col-12" style="display:none">
  <div class="card  overflow-auto">
    <div class="card-body ">
      <div class="row">
        <h5 class="add-title text-center">Add Transaction</h5>

        <form method="POST" action="inv-add.php" id="form1" class="needs-validation" novalidate>
          <div class="row">
            <div class="col-md-3">
              <label for="customer" class="text-black"><strong>Customer</strong></label>
              <input class="form-control" type="text" name="customer" maxlength="10" required >
            </div>
            
            <div class="col-md-3">
              <label for="transaction" class="text-black"><strong>Transaction</strong></label>
              <select class="form-control" name="transaction" required>
                <option value="" disabled selected>Choose a transaction</option>
                <option value="1">Regular</option>
                <option value="2">Refill</option>
              </select>
            </div>
            <div class="col-md-3">
              <label for="item" class="text-black"><strong>Item</strong></label>
              <select class="form-control" name="item" required>
                <option value="" disabled selected>Choose an item</option>
                <option value="0">Slim</option>
                <option value="1">Round</option>
              </select>
            </div> 
          </div>
          

          <div class="row">
            <div class="col-md-3">
              <label for="quantity" class="text-black"><strong>Quantity</strong></label>
              <input class="form-control" type="number" min="0" oninput="this.value=this.value.slice(0,this.maxLength); updateDamagedMax()" maxlength="2" name="quantity" id="quantity" required>
            </div>

            <div class="col-md-3">                                    
              <label for="price" class="text-black"><strong>Price per galon</strong></label>                
              <input class="form-control" type="number" min="0" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength="4"  name="price" placeholder="₱ 0.00" required >
            </div>
            <div class="col-md-3">                                    
              <label for="returns" class="text-black"><strong>Gallons returned</strong></label>                
              <input class="form-control" type="number" min="0" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength="2"  name="returns">
            </div>
           

          <div class="col-md-2">
            <label for="damaged" class="text-black"><strong>Damaged</strong> </label>
            <input class="form-control" type="number" min="0" oninput="this.value=this.value.slice(0,this.maxLength); validateDamagedValue()" maxlength="2"  name="damaged" id="damaged">
          </div>
          </div>

          <div style="padding-top: 10px; display: flex; align-items: flex-end;">
           <button type="submit" name="add" id="add" class="btn btn-primary add">Confirm</button>
         </div>
        </form>

      </div>
     
    </div>
  </div>
</div>

<script>
// 更新Damaged输入框的最大值
function updateDamagedMax() {
  const quantityInput = document.getElementById('quantity');
  const damagedInput = document.getElementById('damaged');
  const quantityValue = parseInt(quantityInput.value) || 0;
  
  // 设置Damaged最大值为Quantity值减1，确保小于Quantity
  damagedInput.max = quantityValue - 1;
  
  // 同步验证当前Damaged值是否符合新限制
  validateDamagedValue();
}

// 验证Damaged输入值是否超出限制
function validateDamagedValue() {
  const damagedInput = document.getElementById('damaged');
  const maxValue = parseInt(damagedInput.max) || 0;
  const damagedValue = parseInt(damagedInput.value) || 0;
  
  if (damagedValue > maxValue) {
    damagedInput.value = maxValue;
  }
}

// 页面加载时初始化限制逻辑（处理预填值场景）
document.addEventListener('DOMContentLoaded', updateDamagedMax);
</script>

功能说明 #

• 当Quantity输入值变化时，自动将Damaged的最大值设为Quantity值减1，确保Damaged输入值始终小于Quantity。
• Damaged输入时会实时验证，若输入值超出最大值，自动调整为最大值。
• 页面加载时自动初始化，兼容存在预填数据的场景。

内容的提问来源于stack exchange，提问作者Faust