时间戳

首页 > 解决方案 > 文本框值未更新

javascript - 文本框值未更新

问题描述

我正在尝试制作一个可以计算退款金额的脚本，计算公式为：total = (tax * quantity)。

总额和税值存储在隐藏的文本框中，我希望在更改数量时更改退款值，我的 JavaScript 函数是：

  function refund(){
  var number = document.getElementsByName("value");
  for (i = 0; i < number.length; i++) { 
      var tax = document.getElementsByName("tax")[i].value;
      var total = document.getElementsByName("total")[i].value;
      var quan = document.getElementsByName("quantity")[i].value;
      var final = +total + (+tax * +quan);
      document.getElementsByName("value")[i].value = final;

    }
}

它看起来像这样的屏幕截图是这样的：

在此处输入图像描述

因此，它的工作原理是值正确并且填充了文本框，但是当我更新数量字段时，值没有改变。我确定我遗漏了一些明显的东西，但由于 JavaScript 对我来说是新的，我无法发现它。

编辑

以下是整个表格、表单和 JavaScript 代码的示例：

 <table class="list" style="table-layout: auto;width: 65%;margin-left: auto;margin-right: auto;text-align: center;">
      <thead>
        <tr>
          <td>Product</td>
          <td>Quantity</td>
          <td>Value</td>
          <td>Refund</td>
        </tr>
      </thead>
<?php foreach($missing_products as $missing){?>
  <?php $total = $missing['total'] + ($missing['tax'] * $missing['quantity']);?>
  <input type="hidden" name="tax" value="<?php echo $missing['tax']; ?>">
  <input type="hidden" name="total" value="<?php echo $missing['total']; ?>">
  <tr>
    <td><?php echo $missing['name']; ?></td>
    <td><input type="number" onclick="refund();" name="quantity" min="1" max="<?php echo $missing['quantity'];?>" value="<?php echo $missing['quantity'];?>"></td>
    <td><input type="text" id="value" name="value" value=""></td>
  </tr>
<?php }?>     
    </table>

<script>
function refund(){
  var number = document.getElementsByName("value");
  for (i = 0; i < number.length; i++) { 
      var tax = document.getElementsByName("tax")[i].value;
      var total = document.getElementsByName("total")[i].value;
      var quan = document.getElementsByName("quantity")[i].value;
      var refund = +total + (+tax * +quan);
      document.getElementsByName("value")[i].value = refund;

    }
}
</script>

标签： javascripthtml

解决方案

我在 jsfiddle 中试过这个，它有点工作。

试试这个小提琴https://jsfiddle.net/3kyux1j0/

只需确认当您更改Quantity方法时是否一直调用该方法。您可以使用简单的Console.log(). 有关更多详细信息，请参见小提琴。

推荐阅读