jquery - 使用jquery在keyup上减去值

Question

我的表单中有以下输入。total(input name) 和(input name) 的值balance相同。当任何用户将paid_amount 的值放入输入时，我想自动从总数中减去paid_amount 值并将结果作为balance输入值。

你能告诉我如何使用jquery来做到这一点。

谢谢

<input type="text" name="total" id="total" value="<?php echo $total;?>" />

<input type="text" name="paid_amount" id="paid_amount" value="" />

<input type="text" name="balance" id="balance" value="<?php echo $total;?>" />

Answer 1

$('#paid_amount').on('keyup', function() {
   if($.trim(this.value).length) {
     var balance = parseFloat($('#total').val()).toFixed(2) - 
                   parseFloat(this.value).toFixed(2);
     $('#balance').val(balance);
   }
});

Answer 2

$("#paid_amount").on("keyup", function() {
    var val = +this.value || 0;
    $("#balance").val($("#total").val() - val);
});​

演示：http: //jsfiddle.net/f6Ggk/

---

要设置精度，您可以使用toFixed()：

$("#paid_amount").on("keyup", function() {
    var val = +this.value || 0;
    var result = $("#total").val() - val;
    $("#balance").val(result.toFixed(2));
});​

演示：http: //jsfiddle.net/f6Ggk/1/

Answer 3

正常价格减去折扣后的销售价格

    $('#product_row').find('#r_price,#p_discount').on('keyup',function (e) {
             $regular_price = $('#r_price').val() ;
             $sale_discount = $('#p_discount').val() ; 
             $sale_price = ( $regular_price - $sale_discount ) ;
             $('#s_price').val($sale_price);
             console.log($sale_price); 
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="product_row">
                                  
                                    <div class="form-group">
                                        <label>
                                           Price
                                          <b class="text-danger">*</b>
                                        </label> 
                                        <input
                                          id="r_price"
                                          type="number"
                                          name="regular_price"
                                          class="form-control"
                                          required
                                          placeholder="0"
                                        />
                              
                                      </div>
                                 
                                      <div class="form-group">
                                          <label> Discount </label>
                                          <input
                                           id="p_discount"
                                            type="number"
                                            name="discount"
                                            class="form-control"
                                            placeholder="0"
                                          />
                                        </div>                        
                              
                                    <div class="form-group">
                                        <label>
                                          Sale Price
                                          <b class="text-danger">*</b>
                                        </label>
                                        <input
                                          id="s_price"
                                          type="number"
                                          name="sale_price"
                                          class="form-control"
                                          readonly
                                        />
                              
                                      </div>
                          
                                 </div>