比较两个文本字段，一个被禁用，另一个是手动输入

Question

我在表单中有一个表，行内的行和数据是从后端自动生成的。那么所有列都被禁用，因此用户无法编辑它，但可以编辑一列。提交时，比较可编辑列中的值和quanity列中的值，如果editable的值更大，则显示警告消息。

function validateAvaliable(){
  var aproducts = document.getElementById("available-quanity").value;
  var sproducts = document.getElementById("send-quanity").value;
  console.log(aproducts);
  console.log(sproducts );
  if (aproducts < sproducts) {
    alert("send products are more");
    return false;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="container-fluid">
            <form onsubmit="validateAvaliable()" class="available-products-table" id="available-products-table"  name="available-products">
        <table class="table">
            <fieldset>
            <legend>Avaliable Products</legend>
                <thead>
                    <tr>
                      <th>S.no</th>
                      <th>Product Name</th>
                      <th>Product ID</th>
                      <th>Quanity</th>
                      <th>Brand</th>
                      <th>Color</th>
                      <th>Status</th>
                      <th>Quanity</th>
                    </tr>
                </thead>
                <tbody>
                  <tr>
                    <td><input type="text" name="available-sno" id="available-sno" disabled value="1"></td>
                    <td><input type="text" name="available-name" id="available-name" disabled value="shoes"></td>
                    <td><input type="text" name="available-id" id="available-id" disabled value="123"></td>
                    <td><input type="number" name="available-quanity" id="available-quanity" disabled value="50"></td>
                    <td><input type="text" name="available-brand" id="available-brand" disabled value="adidas"></td>
                    <td><input type="text" name="available-color" id="available-color" disabled value="black"></td>
                    <td><input type="checkbox" name="product-status" id="product-status"></td>
                    <td><input type="number" name="send-quanity" id="send-quanity" required></td>
                  </tr>
                  
                  <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>Enter Franchise ID</td>
                    <td><input type="number" name="send-franchise-is" id="product-status" required></td>
                    <td><input type="submit" name="submit" value="submit" class="btn btn-primary"></td>
                    
                  </tr>
                </tbody>
            </fieldset>
        </table>
        </form>
        </div>

当我尝试调试它时，它获取了值但if语句正在跳过。 我需要javascript或Jquery中的代码。 在此先感谢

Answer 1

添加了parseInt()，它就是诀窍：

function validateAvaliable() {
  var aproducts = parseInt(document.getElementById("available-quanity").value);
  var sproducts = parseInt(document.getElementById("send-quanity").value);
  console.log(aproducts);
  console.log(sproducts);
  if (aproducts < sproducts) {
    alert("send products are more");
    return false;
  }
  return true;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="container-fluid">
  <form onsubmit="return validateAvaliable()" class="available-products-table" id="available-products-table" name="available-products">
    <table class="table">
      <fieldset>
        <legend>Avaliable Products</legend>
        <thead>
          <tr>
            <th>S.no</th>
            <th>Product Name</th>
            <th>Product ID</th>
            <th>Quanity</th>
            <th>Brand</th>
            <th>Color</th>
            <th>Status</th>
            <th>Quanity</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input type="text" name="available-sno" id="available-sno" disabled value="1"></td>
            <td><input type="text" name="available-name" id="available-name" disabled value="shoes"></td>
            <td><input type="text" name="available-id" id="available-id" disabled value="123"></td>
            <td><input type="number" name="available-quanity" id="available-quanity" disabled value="50"></td>
            <td><input type="text" name="available-brand" id="available-brand" disabled value="adidas"></td>
            <td><input type="text" name="available-color" id="available-color" disabled value="black"></td>
            <td><input type="checkbox" name="product-status" id="product-status"></td>
            <td><input type="number" name="send-quanity" id="send-quanity" required></td>
          </tr>

          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>Enter Franchise ID</td>
            <td><input type="number" name="send-franchise-is" id="product-status" required></td>
            <td><input type="submit" name="submit" value="submit" class="btn btn-primary"></td>

          </tr>
        </tbody>
      </fieldset>
    </table>
  </form>
</div>