Calculate number without button

Hi.  I 'm creating a simple form that type in an amount and tax rate and adds up automatically, showing the result in the textbox, without clicking a button.  If I don't enter numbers, it shows alert.
When I had a button, it was working fine.  But when I remove a button and just type in numbers and let it calculate the total amount, it doesn't work. The alert is still working though.   I'm very new in JavaScript and I don't know what part is not working properly...

My guess is that I am not setting up my variable, "var mathResult" properly, but with my limited knowledge, I'm not sure how the code let it work properly.

I appreciate if someone can give me a hint or two.  Thank you in advance.
<script type="text/javascript">  
  function checkAmount()
  {
	if (isNaN(document.getElementById("amount").value))
	  {
		  alert("I'm sorry but you must input the exact amount before calculating your total.");
		  document.getElementById("amount").value = 0;
	  }
	  
	  if (isNaN(document.getElementById("tax").value))
	  {
		  alert("I'm sorry but you must input the exact tax rate before calculating your total.");
		  document.getElementById("tax").value = 0;
	  }  
  }
  
  function addNumbers()
  {
	  var taxRate;
	  taxRate=parseFloat(document.getElementById("tax").value) /100;
	  
	  var mathResult;
	  mathResult=parseFloat(document.getElementById("amount").value) + (parseFloat(document.getElementById("amount").value) * taxRate);
	  parseFloat(document.getElementById("total").value) = mathResult.toFixed(2);
  }
</script>
</head>

<body>
<h1>THANK YOU FOR YOUR ORDER!</h1>
<P>Your order will be placed in one more step!<br />
To ensure our quality services, please enter the proper numbers in the following columns.  <br />
We'll calculate the total for you.<br />
<br />
</P>
<div class ="field">
<form id="form" form action="" >
  <table width="500 px" cellpadding="8px">
    <tr>
      <td><label for="amount">Order amount: $</label>
        <input type="text" name="amount" id="amount" value="" onchange="checkAmount()" /></td>
      </tr>
    <tr>
      <td><label for "tax">Tax rate: %</label>
        <input type="text" name="tax" id="tax" value="" onchange="checkAmount()" /></td>
      </tr>
    <tr>
      <td><label for="total">Total amount: $</label>
        <input type="text" name="total" id="total" value="" onchange="addNumbers()" readonly="readonly"  />
        </td>
      </tr>
  </table>
</form>
 
</div>

</body>

Open in new window

sabregirlAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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.

Ryan ChongBusiness Systems Analyst , ex-Senior Application EngineerCommented:
<script type="text/javascript">  
  function checkAmount()
  {

      if ((document.getElementById("amount").value=="") || (isNaN(document.getElementById("amount").value)))
        {
              alert("I'm sorry but you must input the exact amount before calculating your total.");
              document.getElementById("amount").value = 0;
              return;
        }
        
        if ((document.getElementById("tax").value=="") || (isNaN(document.getElementById("tax").value)))
        {
              alert("I'm sorry but you must input the exact tax rate before calculating your total.");
              document.getElementById("tax").value = 0;
              return;
        }  
      addNumbers();
  }
 
  function addNumbers()
  {
        var taxRate;
        taxRate=parseFloat(document.getElementById("tax").value) /100;
        
        var mathResult;
        mathResult=parseFloat(document.getElementById("amount").value) + (parseFloat(document.getElementById("amount").value) * taxRate);
        document.getElementById("total").value = mathResult.toFixed(2);
  }
</script>
</head>

<body>
<h1>THANK YOU FOR YOUR ORDER!</h1>
<P>Your order will be placed in one more step!<br />
To ensure our quality services, please enter the proper numbers in the following columns.  <br />
We'll calculate the total for you.<br />
<br />
</P>
<div class ="field">
<form id="form" form action="" >
  <table width="500 px" cellpadding="8px">
    <tr>
      <td><label for="amount">Order amount: $</label>
        <input type="text" name="amount" id="amount" value="" onchange="checkAmount()" /></td>
      </tr>
    <tr>
      <td><label for "tax">Tax rate: %</label>
        <input type="text" name="tax" id="tax" value="" onchange="checkAmount()" /></td>
      </tr>
    <tr>
      <td><label for="total">Total amount: $</label>
        <input type="text" name="total" id="total" value="" readonly="readonly"  />
        </td>
      </tr>
  </table>
</form>
 
</div>

</body>
0
Ryan ChongBusiness Systems Analyst , ex-Senior Application EngineerCommented:
use onkeyup event may be is a better approach.

like:

.......

<form id="form" form action="" >
  <table width="500 px" cellpadding="8px">
    <tr>
      <td><label for="amount">Order amount: $</label>
        <input type="text" name="amount" id="amount" value="" onkeyup="checkAmount()" /></td>
      </tr>
    <tr>
      <td><label for "tax">Tax rate: %</label>
        <input type="text" name="tax" id="tax" value="0" onkeyup="checkAmount()" /></td>
      </tr>
    <tr>
      <td><label for="total">Total amount: $</label>
        <input type="text" name="total" id="total" value="" readonly="readonly"  />
        </td>
      </tr>
  </table>
</form>

...
0
TheAmeobaCommented:
The adNumbers() function is only being called when the total field is changed (onchange="addNumbers()") but as this field is readonly, that is not going to occur.

You should probably have the addNumbers function called on change of the other fields, perhaps merge the two function together so when either of the first fields are changed the values are checked and the total updated.
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
sabregirlAuthor Commented:
Thank you for both ryancys who wrote a sample code for me and TheAmeoba who told me why the code is not working.
I don't have a coding brain, but I try to do my best.
Thank you again,
sabregirl
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
JavaScript

From novice to tech pro — start learning today.