Question

在表单中，我想在rate（另一个文本输入）的值时插入amount（文本输入）的值。将插入金额的值是速率和数量的乘积。数量的值取自数据库。这里，rate的值将由用户插入。插入金额后，该值无法更改。我怎么能这样做？

我尝试过以下代码，但结果每次都显示为零：

查看

<div class="form-group">
  <label for="exampleInputPassword1">Rate</label>
  <input type="text" class="form-control" name="rate" placeholder="Rate" required>
</div>
<div class="form-group">
  <label>Quantity</label>
  <input type="text" class="form-control" name="quantity" placeholder="quantity" value="<?php echo $object['sheet'];  ?> " required readonly>
</div>
<div class="form-group">
  <label for="exampleInputPassword2">Amount</label>
  <?php
  $sheet = $object['sheet'];
  $rate = $this->input->post('rate');
  $amount = $sheet*$rate;
  echo $amount;
  }
  ?>
  <input type="text" class="form-control" name="amount" value="<?php echo $amount;?>" placeholder="Amount" required>
</div>

Answer 1

你可以使用jQuery来做到这一点：

$(document).ready(function() {
$('input[name="rate"]').on('change',function() {
   var amount = $(this).val()*$('input[name="quantity"]').val();
   $('input[name="amount"]').val(amount);
})
});

不要忘记包含jQuery api。此外，不要忘记在提交表单后验证金额，因为用户可以轻松操作输入的值。

Answer 2

使用Javascript进行计算。

我根据您的要求修改了您的代码。您只需要从数据库动态设置速率值。这是你的代码：

<div class="form-group">
  <label for="exampleInputPassword1">Rate</label>
  <input type="text" class="form-control" name="rate" placeholder="Enter Rate" id="rate" required>
</div>
<div class="form-group">
  <label>Quantity</label>
  <input type="text" class="form-control" name="quantity" placeholder="quantity" value="2" id="qnty" required readonly>
</div>
<div class="form-group">
  <label for="exampleInputPassword2">Amount</label>
  <input type="text" class="form-control" name="amount" value="" id="amt" placeholder="Amount" required>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"   integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="   crossorigin="anonymous"></script>
<script>
  $('#rate').keyup(function(){
    var rate = parseInt($('#rate').val());
    var qnty = parseInt($('#qnty').val());
    var amt = parseInt(rate*qnty);
    if(isNaN(amt)){
      $('#amt').val('Enter valid rate');
    } else {
      $('#amt').val(amt);
    }

  });

</script>

当另一个值被赋予另一个输入文本时，将值自动插入输入文本中

2 个答案: