JavaScript表单库存管理：平衡计算与验证逻辑优化实践

function findTotal() {
  // 1. 精确获取库存总量，并确保其为数值类型
  // 使用 getElementById 直接获取元素，并获取其值
  var stockValue = document.getElementById('stock').value;
  var stock = parseInt(stockValue) || 0; // 转换为整数，如果转换失败则默认为0

  // 2. 获取并计算出库项总和
  var arr = document.querySelectorAll('[name="vala"], [name="valb"], [name="valc"]');
  var tot = 0;

  for (var i = 0; i < arr.length; i++) {
    if (parseInt(arr[i].value)) {
      tot += parseInt(arr[i].value);
    }
  }
  document.getElementById('total').value = tot; // 更新总计显示

  // 3. 验证出库总和是否为50的倍数
  if ((tot % 50) == 0) {
    document.getElementById('new').value = "correct";
  } else {
    document.getElementById('new').value = "incorrect";
  }

  // 4. 计算并更新余额
  // 确保在所有计算和DOM更新完成后再执行 return 语句
  var bal = stock - tot;
  document.getElementById('balance').value = bal;

  // 这里的 return bal; 实际上不会被 ValidateTotal 使用，
  // 因为 ValidateTotal 会再次调用 findTotal 来获取 tot
  // 但是为了保持函数返回一个有意义的值，可以返回余额或总计
  // 考虑到 ValidateTotal 只需要 tot，这里可以返回 tot，
  // 或者让 findTotal 只负责更新DOM，不返回任何值，
  // 然后 ValidateTotal 重新读取 total 字段的值。
  // 为了简化，我们让 findTotal 返回 tot，同时确保余额已更新。
  return tot; // 返回总计，供 ValidateTotal 使用
}

function ValidateTotal() {
  // 再次调用 findTotal，以确保获取最新的总计
  var y = findTotal();
  if ((y % 50) == 0) {
    return true;
  } else {
    alert("Total Must be in multiples of 50");
    return false;
  }
}

<form class="contact100-form validate-form" onsubmit="return ValidateTotal(this)" method="post" action="portal.php" class="simple-form">
  <span class="contact100-form-title">
    Portal <br><span style="color:red;"><span style="font-size: 80%"> Data Submission for '.$datadate.' </red></span></span>
  </span>

  <div class="wrap-input100 validate-input" data-validate="Value 1">
    <input class="input100" onblur="findTotal()" type="number" step="1" name="vala" id="vala" placeholder="Value A">
  </div>
  <div class="wrap-input100 validate-input" data-validate="Value 2">
    <input class="input100" onblur="findTotal()" type="number" step="1" name="valb" id="valb" placeholder="Value B">
  </div>
  <div class="wrap-input100 validate-input" data-validate="Value 3">
    <input class="input100" onblur="findTotal()" type="number" step="1" name="valc" id="valc" placeholder="Value C">
  </div>

  <!-- Value D not included in total calculation, but shown for context -->
  <div class="wrap-input100 validate-input" data-validate="Value 4">
    <input class="input100" type="number" step="1" name="vald" id="vald" placeholder="Value D not in total">
  </div>

  <div class="wrap-input100 validate-input" data-validate="Total">
    <input class="input100" type="number" step="1" name="total" id="total" placeholder="Total ABC" readonly>
  </div>
  <div class="wrap-input100 validate-input" data-validate="stock">
    <input class="input100" onblur="findTotal()" type="number" step="1" name="stock" id="stock" placeholder="Total Stock">
  </div>
  <div class="wrap-input100 validate-input" data-validate="balance">
    <input class="input100" onblur="findTotal()" type="number" step="1" name="balance" id="balance" placeholder="balance" readonly>
  </div>

  <span style="color:red;">Total :
    <input type="text" name="total_display" id="total_display" size="2" readonly="readonly">
    Validations :
    <input type="text" name="new" id="new" size="5" readonly="readonly">
  </span>

  <div class="container-contact100-form-btn">
    <button class="contact100-form-btn">
      Submit
    </button>
  </div>
</form>