如何使用 JavaScript 从数据库自动计算值

How to auto compute values from database using JavaScript

我想通过输入名为 used 的输入类型来自动计算库存中的剩余库存。我想要发生的是在 'Withdrawn' 中输入一个数字后,它应该减去数量,然后将结果显示给剩余库存。这些值来自数据库。

这是我所做的,但我没有工作我不知道为什么你能帮我吗?顺便说一句,我仍然是初学者,所以如果我的代码看起来不对,请更正我的代码。谢谢

list.php:

  <div class="modal fade" id="updatebtnmodal" role="dialog">
                    <div class="modal-dialog">
                        <!-- Modal content-->
                          <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">Update Used</h4>
                              <button type="button" class="close" data-dismiss="modal">&times;</button>
                              
                            </div>
                            <div class="modal-body">
                                <form id="myForm" action="<?php echo base_url().'admin/inventory/updateused/'.$inv['i_id'];?>" method="POST"
                    class="form-container mx-auto  shadow-container" style="width:80%" enctype="multipart/form-data">
                    <div class="form-group">
                                <input type="hidden" name="update_id" id="update_id">
                                <label for="cname">Category</label>
                                <input type="text" class="form-control my-2 
                                <?php echo (form_error('name') != "") ? 'is-invalid' : '';?>" name="cname" id="cname"
                                    placeholder="Enter Item name" value="<?php echo set_value('cname',$inv['cat_id']); ?>" readonly>
                                <?php echo form_error('cname'); ?> 
                                <span></span>
                            </div>
                              <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <input type="hidden" name="update_id" id="update_id">
                                <label for="name">Item Name</label>
                                <input type="text" class="form-control my-2 
                                <?php echo (form_error('name') != "") ? 'is-invalid' : '';?>" name="name" id="name"
                                    placeholder="Enter Item name" value="<?php echo set_value('name'); ?>" readonly>
                                <?php echo form_error('name'); ?> 
                                <span></span>
                            </div>
                              <div class="form-group">
                                <label for="d_date">Delivered Date</label>
                                <input type="text" class="form-control my-2
                                <?php echo (form_error('d_date') != "") ? 'is-invalid' : '';?>" id="d_date" name="d_date"
                                    placeholder="Delivered Date" value="<?php echo set_value('d_date'); ?>"readonly>
                                <?php echo form_error('d_date'); ?>
                                <span></span>
                            </div>
                            <div class="form-group">
                                <label for="used">Withdrawn</label>
                                <input type="number" class="form-control my-2
                                <?php echo (form_error('used') != "") ? 'is-invalid' : '';?>" id="used" name="used" class="used" onchange="calc()"
                                    placeholder="Enter No. Withdrawn Items" value="<?php echo set_value('used'); ?>">
                                <?php echo form_error('used'); ?>
                                <span></span>
                            </div>
                          
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="quantity">Quantity</label>
                                <input type="number" class="form-control my-2
                                <?php echo (form_error('quantity') != "") ? 'is-invalid' : '';?>" id="quantity" name="quantity" class="quantity"
                                    placeholder="Enter Quantity" value="<?php echo set_value('quantity'); ?>">
                                <?php echo form_error('quantity'); ?>
                                <span></span>
                            </div>
                             <div class="form-group">
                                <label for="exp_date">Expiration Date</label>
                                <input type="text" class="form-control my-2
                                <?php echo (form_error('e_date') != "") ? 'is-invalid' : '';?>" id="e_date" name="e_date" 
                                    placeholder="Expiration Date" value="<?php echo set_value('e_date'); ?>"readonly>
                                <?php echo form_error('e_date'); ?>
                                <span></span>
                            </div>
                            <div class="form-group">
                                <label for="rem_qty">Remaining Stock</label>
                                <input type="number" class="form-control my-2
                                <?php echo (form_error('rem_qty') != "") ? 'is-invalid' : '';?>" id="rem_qty" name="rem_qty" class="rem_qty"
                                    placeholder="Enter No. Remaining Stock" >
                                <?php echo form_error('rem_qty'); ?>
                                <span></span>
                            </div>
                        </div>
                       
                </div>
                
                    <button type="submit" name="updatedata" class="btn btn-primary ml-2">Make Changes</button>
                    <a href="<?php echo base_url().'admin/inventory/index'?>" class="btn btn-secondary">Back</a>
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                          </div>
                          
                        </div>
                      </div>

Js:

function calc() {
  var quantity = document.getElementById("quantity").innerHTML;
  var used = document.getElementById("used").value;
  var rem_qty = parseFloat(quantity) - used
  if (!isNaN(rem_qty))
    document.getElementById("rem_qty").innerHTML = rem_qty
}

试试这个 javascript 代码

function calc() {
    var quantity = document.getElementById("quantity").value;
    var used = document.getElementById("used").value;
    
    var rem_qty = 0;
    if(quantity >= used){
        rem_qty = parseFloat(quantity) - used;
    }

    if(rem_qty != 0){
        document.getElementById("rem_qty").value = rem_qty
    }    
}

希望这段代码能帮到你。