Calculating the total in JavaScript

Question

OP, please replace this text with a detailed description of your problem. Your code is below.

I used document.getElementById but the math is not working. I need total to be calculated:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<script type = "text/javascript">
function a()
{

var q = document.getElementById('ad').value;
document.getElementById('s').value=q  + q;
}

</script>
</head>
<?php 
$con = mysql_connect("localhost","root","");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("form1", $con);


error_reporting(E_ALL ^ E_NOTICE);
$nam=$_GET['msg'];

 $row=mysql_query("select * from inv where Name='$nam'");
while($row1=mysql_fetch_array($row))
{ 
$Name=$row1['Name'];
  $Address =$row1['Address'];
  $City=$row1['City'];
    $Pincode=$row1['Pincode'];
  $No=$row1['No'];
  $Date=$row1['Date'];
  $DCNo=$row1['DCNo'];
  $DcDate=$row1['DcDate'];
  $YourOrderNo=$row1['YourOrderNo'];
  $OrderDate=$row1['OrderDate'];
  $VendorCode=$row1['VendorCode'];
  $SNo=$row1['SNo'];
  $descofgoods=$row1['descofgoods'];
  $Qty=$row1['Qty'];
  $Rate=$row1['Rate'];
  $Amount=$row1['Amount'];
}

?>
<body>
<form id="form1" name="form1" method="post" action="">
  <table width="846" border="0">
    <tr>
      <td width="411" height="113">&nbsp;</td>
      <td width="412">&nbsp;</td>
    </tr>
  </table>
  <table width="846" border="0">
    <tr>
      <td height="38">&nbsp;</td>
    </tr>
  </table>
  <table width="846" border="0">

    <tr>
      <td width="390" rowspan="4">&nbsp;</td>
      <td width="92" height="35">&nbsp;</td>
      <td width="136"><?php echo $No;?></td>
      <td width="36">&nbsp;</td>
      <td width="170"><?php echo $Date;?></td>
    </tr>
    <tr>
      <td height="37">&nbsp;</td>
      <td><?php echo $DCNo;?></td>
      <td>&nbsp;</td>
      <td><?php echo $DcDate;?></td>
    </tr>
    <tr>
      <td height="34">&nbsp;</td>
      <td><?php echo $YourOrderNo;?></td>
      <td>&nbsp;</td>
      <td><?php echo $OrderDate;?></td>
    </tr>
    <tr>
      <td height="29">&nbsp;</td>
      <td><?php echo $VendorCode;?></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
  <table width="845" border="0">
    <tr>
      <td height="38">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td width="34">&nbsp;</td>
      <td width="457">&nbsp;</td>
      <td width="104">&nbsp;</td>
      <td width="79">&nbsp;</td>
      <td width="149">&nbsp;</td>
    </tr>
      <?php $i=1;  
    $row=mysql_query("select * from inv where Name='$nam'");
while($row1=mysql_fetch_array($row))
{ 
$descofgoods=$row1['descofgoods'];
  $Qty=$row1['Qty'];
  $Rate=$row1['Rate'];
  $Amount=$row1['Amount'];
?>
            <tr>
              <td><?php echo $i;?></td>
              <td><?php echo $descofgoods;?></td>
              <td><?php echo $Qty;?></td>
              <td><?php echo $Rate;?></td>
              <td><input name="Amount" type = "text" id ="ad" value="<?php echo $Amount;?>" /></td>
            </tr>   


    <?php  $i++;} ?>
  </table>
  <table width="844" border="0">
    <tr>
      <td width="495" height="1065">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        <input type="text" name="textfield2" />        &nbsp; &nbsp; &nbsp; &nbsp; </td>
      <td width="191">&nbsp;</td>
      <td width="144"><input type="text" name="tot" id="s" onclick="a()"; /></td>
    </tr>

@DAFFODIL Please put more effort into your questions. 1) Please post code **here**, not on a 3rd party site. This question will be completely worthless for other people in a month when the code gets removed from dpaste. 2) Concentrate on the relevant parts of the code. 3) Describe the problem. "Is nt working" is nt a problem description. — deceze, May 27 '10 at 01:43

score 6 · Answer 1 · edited May 23 '17 at 12:11

6

You are probably getting the strings concatenated together, therefore getting 11 from 1 + 1. Try using parseInt() to convert the String to a Number, as follows:

var q = parseInt(document.getElementById('ad').value, 10);
document.getElementById('s').value = q + q;

UPDATE: As CMS noted in another answer, you are also generating multiple elements with the same ID, which is invalid, and apart from that getElementById() will return only one element. Check out CMS' answer for one approach to tackle this problem.

In addition, note that if you are adding decimal numbers together, you cannot use parseInt() as suggested above. You could use parseFloat() or the unary + operator to convert the String to a Number. Nevertheless you have to be careful with floating point arithmetic.

edited May 23 '17 at 12:11

Community

1
1

answered May 27 '10 at 01:33

Daniel Vassallo

337,827
72
505
443

Seems that the OP needs to sum monetary amounts, `parseFloat` or the unary plus operator would be a better option than `parseInt`. – Christian C. Salvadó May 27 '10 at 02:09
@CMS: Good point. +1 [your answer](http://stackoverflow.com/questions/2917928/calculating-the-total-in-javascript/2918041#2918041) for the in depth analysis. I didn't notice the multiple input elements with the same id. Good catch. – Daniel Vassallo May 27 '10 at 02:12

score 3 · Answer 2 · answered May 27 '10 at 02:05

Aside the type conversion issue that others have addressed, by looking at your code, I see are some issues:

You are generating invalid markup, by creating multiple input elements with the same id (id="ad") within your loop.
document.getElementById returns only one element.

I would recommend you to put a class name to identify the input elements you want to sum:

...
<td>
  <input class="amount" type="text" value="<?php echo $Amount;?>" />
</td>
...

Then you will be able to do it by this:

function getTotal() {
  var inputs = document.getElementsByTagName('input'),
      el, total = 0;

  for (var i = 0, n = inputs.length; i < n; i++) {
    el = inputs[i];
    if (el.className == "amount") {
      total += +el.value; // using the unary plus operator to convert to Number
    }
  }

  document.getElementById('s').value = total;
}

Check an example here.

score 1 · Answer 3 · answered May 27 '10 at 01:35

1

I see you have:

id ="ad" value="<?php echo $Amount;?>"

Make sure that a num is bieng echoed as a value.

if that doesnt work and you see that the value echoed is clearly a num, try forcing it by using:

var q = document.getElementById('ad').value * 1;

answered May 27 '10 at 01:35

Babiker

18,300
28
78
125

4

var q = document.getElementById('ad').value - 0; would work too. parseInt(string, radix) is the probably the proper way to do it though. – Craig May 27 '10 at 01:37

score 0 · Accepted Answer · answered May 27 '10 at 02:04

You can't use document.getElementById('ad') since that would only return you one single element (which works if only one row is returned by the SQL query).

Instead use document.getElementsByName('Amount') (note that the parameter is case-sensitive) since that will return you an array of multiple elements with the name Amount that you can iterate over and compute the total.

You'll need to change your Javascript function a(). see below.

function a()
{
    var q = document.getElementsByName('Amount');
    var count = 0;
    for (i = 0; i < q.length; i++)
        count += parseInt(q[i].value,10);
    document.getElementById('s').value = count;
}

Calculating the total in JavaScript

4 Answers4