How to calculate 3 textbox multiply values in real time?

I have aspx page which has 4 textbox.

txtAmount, txtExchangeRate, txtCharges, txtResult

When you input txtAmount, txtExchangeRate, txtCharges, then txtResult will show the calculated result.

e.g. 405 * 0.88 + 20 = result

As there are many rows in that listInput, how can it be done to show the result in real time?
techquesAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michel PlungjanIT ExpertCommented:
With straight JS I would do this - I hope this is NOT homework - it is it, next time please start the html and script yourself and ask if you are stuck:


<html>
  <head>
  <title></title>
<script type="text/javascript">
function calc(theForm) {
  var amount = parseFloat(theForm.txtAmount.value)
  if (isNaN(amount)) amount=0;
  var exchangeRate = parseFloat(theForm.txtExchangeRate.value)
  if (isNaN(exchangeRate)) exchangeRate=0;
  var charges = parseFloat(theForm.txtCharges.value)
  if (isNaN(charges)) charges=0;
  var result =  (amount * exchangeRate) + charges
  theForm.txtResults.value=result.toFixed(2);
}
</script>
  </head>
  <body>
<form>
<input type="text" name="txtAmount"       value="" onKeyUp="calc(this.form)" /> *
<input type="text" name="txtExchangeRate" value="" onKeyUp="calc(this.form)" /> +
<input type="text" name="txtCharges"      value="" onKeyUp="calc(this.form)" /> =
<input type="text" name="txtResults"      value="0.00" readonly="readonly" />
</form>
  </body>
</html>

Open in new window

0
havj123Commented:
Use this

<table>
        <tr>
            <td>
                <input type="text" id="txtAmount" name="txt1" />
                <input type="text" id="txtExchangeRate" name="txt2"/>
                <input type="text" id="txtCharges" onchange="calculate();" name="txt3" />
                <input type="text" id="txtResult" name="txt4"/>
            </td>
        </tr>
    </table>

javascript function:-

<script type="text/javascript">
        function calculate()
        {
            var amt, ex, ch, result;
            amt = document.getElementById("txtAmount").value;
            ex = document.getElementById("txtExchangeRate").value;
            ch = document.getElementById("txtCharges").value;
            result = document.getElementById("txtResult");
           
            if(amt != "" || ex != "" || ch != "" || amt != null || ex != null || ch != null)
            {
                result.value = parseInt(amt*ex)+parseInt(ch);
            }
        }
 </script>

Note: either make txtAmount, txtExchangeRate, txtCharges required or convert empty string to 0.
0
Michel PlungjanIT ExpertCommented:
Alternatively if you need to calculate rows of data, try this:

<html>
  <head>
  <title></title>
<script type="text/javascript">
function calc(theField) {
  var id = theField.name.split('_')[1]; // change this to find the common part of the names
  var theForm = theField.form;
  var amount = parseFloat(theForm.elements["txtAmount_"+id].value)
  if (isNaN(amount)) amount=0;
  var exchangeRate = parseFloat(theForm.elements["txtExchangeRate_"+id].value)
  if (isNaN(exchangeRate)) exchangeRate=0;
  var charges = parseFloat(theForm.elements["txtCharges_"+id].value)
  if (isNaN(charges)) charges=0;
  var result =  (amount * exchangeRate) + charges
  theForm.elements["txtResults_"+id].value=result.toFixed(2);
}
</script>
  </head>
  <body>
    <form>
      <input type="text" name="txtAmount_1"       value="" onKeyUp="calc(this)" /> *
      <input type="text" name="txtExchangeRate_1" value="" onKeyUp="calc(this)" /> +
      <input type="text" name="txtCharges_1"      value="" onKeyUp="calc(this)" /> =
      <input type="text" name="txtResults_1"      value="0.00" readonly="readonly" /><br />
      <input type="text" name="txtAmount_2"       value="" onKeyUp="calc(this)" /> *
      <input type="text" name="txtExchangeRate_2" value="" onKeyUp="calc(this)" /> +
      <input type="text" name="txtCharges_2"      value="" onKeyUp="calc(this)" /> =
      <input type="text" name="txtResults_2"      value="0.00" readonly="readonly" /><br />
    </form>
  </body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Michel PlungjanIT ExpertCommented:
erm 50 points, split and then an uncommented "B" grade???
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
.NET Programming

From novice to tech pro — start learning today.