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"> </td>
<td width="412"> </td>
</tr>
</table>
<table width="846" border="0">
<tr>
<td height="38"> </td>
</tr>
</table>
<table width="846" border="0">
<tr>
<td width="390" rowspan="4"> </td>
<td width="92" height="35"> </td>
<td width="136"><?php echo $No;?></td>
<td width="36"> </td>
<td width="170"><?php echo $Date;?></td>
</tr>
<tr>
<td height="37"> </td>
<td><?php echo $DCNo;?></td>
<td> </td>
<td><?php echo $DcDate;?></td>
</tr>
<tr>
<td height="34"> </td>
<td><?php echo $YourOrderNo;?></td>
<td> </td>
<td><?php echo $OrderDate;?></td>
</tr>
<tr>
<td height="29"> </td>
<td><?php echo $VendorCode;?></td>
<td> </td>
<td> </td>
</tr>
</table>
<table width="845" border="0">
<tr>
<td height="38"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td width="34"> </td>
<td width="457"> </td>
<td width="104"> </td>
<td width="79"> </td>
<td width="149"> </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">
<input type="text" name="textfield2" /> </td>
<td width="191"> </td>
<td width="144"><input type="text" name="tot" id="s" onclick="a()"; /></td>
</tr>
4 answers
solution1
6 2010-05-27 01:33:56
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 .
solution2
3 2010-05-27 02:05:27
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
inputelements with the same id (id="ad") within your loop. -
document.getElementByIdreturns 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 .
solution3
1 2010-05-27 01:35:06
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;
solution4
0 ACCPTED 2010-05-27 02:04:45
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.