How to perform calculation

I want to print subtotal from Line Total and want to show additon without using button and with using onchange but onchange() is not working,
Want to print addition of Line Total and print addition in subtotal and want to perform tax calculation and show the output in Total How to do?

<html>
<tr align="right">
      <td colspan="3" class="noBorder">
        
        <b><font size="4px;">Subtotal<br>Tax (%)
           </font></b>
      </td>
      
      <td valign="middle" align="center" width="100%">
        <input type="text" id="subtotal" name="subtotal" class="subtotal" value="0.00" onclick="result(this.form)" style="border:none;width: 100%;"/>
        <input type="text" id="tax" class="tax" name="tax" style="border:none;width: 100%;">
    </td>
    </tr>
</html>

<script>
function result(theForm)
{
var n1=parseInt(document.getElementById('linetotal1').selectedIndex)+1;
var n2=parseInt(document.getElementById('linetotal2').selectedIndex)+1;
var n3=parseInt(document.getElementById('linetotal3').selectedIndex)+1;
var n4=parseInt(document.getElementById('linetotal4').selectedIndex)+1;
var n5=parseInt(document.getElementById('linetotal5').selectedIndex)+1;

if (isNaN(n1)) n1=0;
if (isNaN(n2)) n2=0;
if (isNaN(n3)) n3=0; 
if (isNaN(n4)) n4=0;
if (isNaN(n5)) n5=0;
var subtotal=(n1+n2+n3+n4+n5);
document.getElementById("subtotal").value=subtotal;
}
</script>

Open in new window

Nikhil DangePHP Web DeveloperAsked:
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:
assuming you got elements like:

<select id="linetotal1">
..
<select id="linetotal2">
..
<select id="linetotal3">
...

Open in new window


then you should call that function by adding:

<select id="linetotal1" onchange="result(this.form)">

please also note that you actually are not using theForm in your function, you may consider to remove that from your function when necessary.
1
Leonidas DosasCommented:
Check this code without onclick atrr in the input elements.
<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->

<tr align="right">
      <td colspan="3" class="noBorder">
        
        <b><font size="4px;">Subtotal<br>Tax (%)
           </font></b>
      </td>
      
      <td valign="middle" align="center" width="100%">
        <input type="text" id="subtotal" name="subtotal" class="subtotal" value="1.00"       style="border:none;width: 100%;"/>
        <input type="text" id="tax" class="tax" name="tax" style="border:none;width: 100%;">
    </td>
  <td valign="middle" align="center" width="100%">
        <input type="text" id="subtotal" name="subtotal" class="subtotal" value="5.00"       style="border:none;width: 100%;"/>
        <input type="text" id="tax" class="tax" name="tax" style="border:none;width: 100%;">
    </td>
  <td valign="middle" align="center" width="100%">
        <input type="text" id="subtotal" name="subtotal" class="subtotal" value="a"       style="border:none;width: 100%;"/>
        <input type="text" id="tax" class="tax" name="tax" style="border:none;width: 100%;">
    </td>
  <td valign="middle" align="center" width="100%">
        <input type="text" id="subtotal" name="subtotal" class="subtotal" value="4.00"       style="border:none;width: 100%;"/>
        <input type="text" id="tax" class="tax" name="tax" style="border:none;width: 100%;">
    </td>
    </tr>
  
  <script>
    var subTotal=document.getElementsByClassName("subtotal");
var n=[];
for(var i=0;i<subTotal.length;i++){
  if(subTotal[i].value===''){
     subTotal[i].value=0;
   }  
   n.push(parseInt(subTotal[i].value));  
   subTotal[i].addEventListener('click',function(e){
    var total=0;
    for(var i in n) { total += n[i]; }
  
    alert('total is: '+total);
     
    });
  
}
  </script>
<!-- End your code here -->
</body>
</html>

Open in new window

1
Julian HansenCommented:
Code tags added.
Please use code tags for your code snippets - it makes your code easier to read and refer to. To add code tags
1. Highlight code
2. Click the CODE button in the toolbar
CodeTags.jpg
Please post more of your code - you have left out some key bits (the select's, the line items) these are important to solving the problem.

I expect that there is a much simpler solution to your problem - your JavaScript code is overly verbose - but to give you correct code we need a proper context.

If you have a link to a sample page that would be first prize.
1

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
Vijaya KumarCommented:
hope this helps

<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->

<table>
	<tr>
		<td>Quantity</td>
		<td>Unit Price</td>
		<td>Total</td>	
	</tr>
	<tr>
		<td>5</td>
		<td>5</td>
		<td class="val">25</td>
	</tr>
	<tr>
		<td>5</td>
		<td>5</td>
		<td class="val">25</td>
	</tr>
	<tr>
		<td>5</td>
		<td>5</td>
		<td class="val">25</td>
	</tr>
	<tr>
		<td colspan="2" id="tot" >Total</td>
	</tr>
  </table>
  <input type="button" name="abc" id="abc" value="click" onclick="calculate()" />
  <script>
  function calculate()
  {
	var html = document.querySelectorAll(".val");
	var tot = 0;
	    for (i = 0; i < html.length; ++i) {
			tot = tot + parseInt(html[i].innerHTML);
		}
		
	document.getElementById("tot").innerHTML = tot;
  }
	
  </script>
<!-- End your code here -->
</body>
</html>

Open in new window

1
Nikhil DangePHP Web DeveloperAuthor Commented:
It's working Thank you all
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
Web Development

From novice to tech pro — start learning today.