时间戳

首页 > 解决方案 > 如何在javascript中比较两个字段值

javascript - 如何在javascript中比较两个字段值

问题描述

订单页面我创建了一个 IMS。在那，在订单页面上，我必须验证产品数量，它不应允许输入超过可用数量。下面是我的代码（qty[] 是库存的可用数量，aqty[] 是创建订单时输入的数量）

<tr id="row_1">
                       <td>
                        <select class="form-control select_group product" data-row-id="row_1" id="product_1" name="product[]" style="width:100%;" onchange="getProductData(1)" required>
                            <option value=""></option>
                            <?php foreach ($products as $k => $v): ?>
                              <option value="<?php echo $v['id'] ?>"><?php echo $v['name'] ?></option>
                            <?php endforeach ?>
                          </select>
                        </td>
                        <td>
                          <input type="text" name="hsn[]" id="hsn_1" class="form-control" disabled autocomplete="off">
                          <input type="hidden" name="hsn_value[]" id="hsn_value_1" class="form-control" autocomplete="off">
                        </td>
                        <td><input type="text" name="rate[]" id="rate_1" class="form-control" required onkeyup="getTotal(1)"></td>
                         <td>
                             <input type="text" name="qty[]" id="qty_1" class="form-control" disabled autocomplete="off">
                             <input type="hidden" name="qty_value[]" id="qty_value_1" class="form-control" autocomplete="off">
                         </td>
                         <td><input type="text" name="aqty[]" id="aqty_1" class="form-control" required onkeyup="getTotal(1)"></td>
                            <td>
                          <input type="text" name="unit[]" id="unit_1" class="form-control" disabled autocomplete="off">
                          <input type="hidden" name="unit_value[]" id="unit_value_1" class="form-control" autocomplete="off">
                        </td>
                        <td>
                          <input type="text" name="amount[]" id="amount_1" class="form-control" disabled autocomplete="off">
                          <input type="hidden" name="amount_value[]" id="amount_value_1" class="form-control" autocomplete="off">
                        </td>
                        <td>
                          <input type="text" name="gst[]" id="gst_1" class="form-control" disabled autocomplete="off">
                          <input type="hidden" name="gst_value[]" id="gst_value_1" class="form-control" autocomplete="off">
                        </td>
                        <td>
                          <input type="text" name="gst_amount[]" id="gst_amount_1" class="form-control" disabled autocomplete="off">
                          <input type="hidden" name="gst_amount_value[]" id="gst_amount_value_1" class="form-control" autocomplete="off">
                        </td>
                        <td>
                          <input type="text" name="last_amount[]" id="last_amount_1" class="form-control" disabled autocomplete="off">
                          <input type="hidden" name="last_amount_value[]" id="last_amount_value_1" class="form-control" autocomplete="off">
                        </td>
                        <td><button type="button" class="btn btn-default" onclick="removeRow('1')"><i class="fa fa-close"></i></button></td>
                     </tr>

这就是我比较两个字段值的方式

$('#qty_value_1,#aqty_1').on('keyup', function() {
    var btn = $('button:contains("Submit")');
    if (parseFloat($('#qty_value_1').val()) >= parseFloat($('#aqty_1').val())) {
        btn.prop('disabled', false);
    } else {
        btn.prop('disabled', true);
    }
})

如果我输入第二个或更多产品，上述验证仅适用于第一个产品此逻辑不起作用

标签： javascriptjqueryhtml

解决方案

我玩了一点你的代码……</p>

  • 用classes 代替ids 来简化，
  • 使用一元运算+符代替parseFloat,
  • 更改了代码以使其适用于任何tr.

......并最终得到了那个工作片段：（
我已经删除了hidden能够使用这些值）

// Changed ids to classes
$('.qty, .aqty').on('keyup', function() {

  var btn = $('button:contains("Submit")');

  // Get tr elements
  var trs = $(this).closest('table').find('tbody tr');

  $(trs).each(function(i, elm) {
    var qty = $(elm).find('.qty');
    var aqty = $(elm).find('.aqty');

    btn.prop('disabled', false);           // Enabled by default
    if (+$(qty).val() < +$(aqty).val()) { // Using Unary +
      btn.prop('disabled', true);          // Disabled if qty < aqty
      return;                              // Exit
    }

  });

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>qty</th>
      <th>aqty</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" name="qty[]" id="qty_1" class="form-control" disabled autocomplete="off">
        <input name="qty_value[]" class="qty form-control" autocomplete="off">
      </td>
      <td><input type="text" name="aqty[]" class="aqty form-control" required></td>
    </tr>
    <tr>
      <td>
        <input type="text" name="qty[]" id="qty_2" class="form-control" disabled autocomplete="off">
        <input name="qty_value[]" class="qty form-control" autocomplete="off">
      </td>
      <td><input type="text" name="aqty[]" class="aqty form-control" required></td>
    </tr>
</table>
<button disabled>Submit</button>

随时对我发表任何评论。

希望能帮助到你！

推荐阅读