如何在另一个框中显示两个文本框的总值 - Javascript

Question

I am new to javascript, I want to get two fees in text boxes and show sum of those two fees in another text box (which is disabled, so can't edit it, just for showing purpose) below is my html form.. result should show when entering in fee1 or fee2 not in submit button. How to do it?

<div class="row">
                                                
<div class="col-xl-4">

    <div class="form-group">
        <label class="gr"><b>Consulation Fees:</b><span class="text-danger">*</span></label><input type="number" class="form-control" id="fee1" name="fee1"  required min="0">
    </div>
</div>
<div class="col-xl-4">
    <div class="form-group">
        <label class="gr"><b>Other Charges:</b></label><input type="number" class="form-control" id="fee2" name="fee2" min="0">
    </div>
</div>

<div class="col-xl-4">
    <div class="form-group">
        <label class="gr"><b>Total Fee:</b></label><input type="number" disabled  class="form-control" id ="total_fee" name="total_fee" >
    </div>
</div>

Answer 1

use input event on fee1 and fee2 and then sum their values and put as value of total_fee. eg

const fee1 = document.getElementById("fee1");

const fee2 = document.getElementById("fee2");

const total_fee = document.getElementById("total_fee");

document.getElementById("fee1").addEventListener("input", sum);

document.getElementById("fee2").addEventListener("input", sum); 
  
function sum() {
  total_fee.value =  Number(fee1.value)+Number(fee2.value);
}

see in action https://jsbin.com/lizunojadi/edit?html,js,output

Answer 2

Basically you listen to input event on both of the controls, summing the values into the other input.

 document.querySelectorAll("#fee1, #fee2").forEach(function(elem) { elem.addEventListener("input", do_sum) }) function do_sum() { var total = 0 document.querySelectorAll("#fee1, #fee2").forEach(function(elem) { total += +elem.value; }) document.querySelector("#total_fee").value = total }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"> <div class="container"> <div class="row"> <div class="col-sm-4"> <div class="form-group"> <label class="gr"><b>Consulation Fees:</b><span class="text-danger">*</span></label><input type="number" class="form-control" id="fee1" name="fee1" required min="0"> </div> </div> <div class="col-sm-4"> <div class="form-group"> <label class="gr"><b>Other Charges:</b></label><input type="number" class="form-control" id="fee2" name="fee2" min="0"> </div> </div> <div class="col-sm-4"> <div class="form-group"> <label class="gr"><b>Total Fee:</b></label><input type="number" disabled class="form-control" id="total_fee" name="total_fee"> </div> </div> </div> </div>

Answer 3

Here is the simple solution for your code,

<div class="row">
                                                
<div class="col-xl-4">

    <div class="form-group">
        <label class="gr"><b>Consulation Fees:</b><span class="text-danger">*</span></label><input type="number" class="form-control" id="fee1" name="fee1"  required min="0" value="0">
    </div>
</div>
<div class="col-xl-4">
    <div class="form-group">
        <label class="gr"><b>Other Charges:</b></label><input type="number" class="form-control" id="fee2" name="fee2" min="0" value="0">
    </div>
</div>

<div class="col-xl-4">
    <div class="form-group">
        <label class="gr"><b>Total Fee:</b></label><input type="number" disabled  class="form-control" id ="total_fee" name="total_fee" >
    </div>
</div>

Here in the HTML code default value="0" , Now in Javascript,

const fee1 = document.getElementById('fee1');
const fee2 = document.getElementById('fee2');
const totalFee = document.getElementById('total_fee');

function doSum() {
  const fee1Value = parseInt(fee1.value);
  const fee2Value = parseInt(fee2.value);
  const totalFeeValue = fee1Value + fee2Value;
  totalFee.value = totalFeeValue;
}

fee1.addEventListener('input', doSum);
fee2.addEventListener('input', doSum);

doSum() function is executing oninput