• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 305
  • Last Modified:

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

0
sabregirl
Asked:
sabregirl
  • 2
2 Solutions
 
Ryan ChongCommented:
<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 ChongCommented:
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now