Hi, I am working on a order form using php, mysql & javascript. The problem I am facing is that while user input the quantity and rate of a product the js will auto calculate the total amount for the same. I am able to do this only for the 1st field, while on the consecutive entry it failed.
here is the code of the page -
<!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" xml:lang="en">
<head>
<title>BIMS ver 1.0</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<script language="javascript" type="text/javascript" src="datetimepicker.js"></script>
<script language="javascript" type="text/javascript" src="validation.js"></script>
<script language="JavaScript" type="text/javascript">
function res(obj_val)
{
if (window.XMLHttpRequest) {
AJAX=new XMLHttpRequest();
} else {
AJAX=new ActiveXObject("Microsoft.XMLHTTP");
}
var timestamp = new Date();
if (AJAX) {
AJAX.open("GET", "ajax/ajax-purchase.php?obj="+obj_val, false);
AJAX.send();
var test = AJAX.responseText;
//alert(test);
document.getElementById("changeble_id").innerHTML=test;
}
}
</script>
<script language="javascript" type="text/javascript">
function calcFields()
{
if(!IsNumeric(document.getElementById("rate").value) || document.getElementById("rate").value == "")
{
var val1 = 0;
}
else
{
var val1 = document.getElementById("rate").value;
}
document.getElementById("rate").value = val1;
if(!IsNumeric(document.getElementById("qty").value) || document.getElementById("qty").value == "")
{
var val2 = 0;
}
else
{
var val2 = document.getElementById("qty").value;
}
document.getElementById("qty").value = val2;
document.getElementById("amt").value = parseFloat(val1) * parseFloat(val2);
}
function IsNumeric(sText)
{
var ValidChars = "0123456789.";
var IsNumber=true;
var Char;
for (i = 0; i < sText.length && IsNumber == true; i++)
{
Char = sText.charAt(i);
if (ValidChars.indexOf(Char) == -1)
{
IsNumber = false;
}
}
return IsNumber;
}
</script>
</head>
<body onload="calcFields();">
<div id="header">
<div id="slogan">Billing & Inventory Management System</div>
<div id="logo"><a href="#">Gayen's</a></div>
<div id="menu">
<?php include('menu.php');?>
</div>
</div>
<form id="pform" name="pform" method="post" action="order_process.php">
Supplier Name/ID
<input name="field" id="field" type="text" onkeyup="res(this.value)" />
Bill No
<input name="bn" id="bn" type="text" />
Bill Date
<input name="bd" id="bd" type="text" />
Bill Total
<input name="bt" id="bt" type="text" />
<span id="changeble_id" style="display:">
<table align = left border="1" cellspacing="2" cellpadding="2">
<tr>
<th><font face="Arial, Helvetica, sans-serif">Supplier Id</font></th>
<th><font face="Arial, Helvetica, sans-serif">Name</font></th>
<th><font face="Arial, Helvetica, sans-serif">Address</font></th>
<th><font face="Arial, Helvetica, sans-serif">Contact</font></th>
<th><font face="Arial, Helvetica, sans-serif">Total Due</font></th>
<th><font face="Arial, Helvetica, sans-serif">Last Bill</font></th>
</tr>
</table>
</span>
<table width="100%" border="1" cellspacing="0" cellpadding="1">
<tr>
<td>Item</td>
<td>Rate</td>
<td>Quantity</td>
<td>Amount</td>
</tr><br />
<?php
include('db_connect.php');
$sql = "select * from item;";
$rs=mysql_query($sql);
$n = @mysql_num_rows($rs);
include ('db_connect.php');
$sql = "SELECT item_name FROM item ORDER BY item_name;";
$rs=mysql_query($sql);
$count = @mysql_num_rows($rs);
if($count > 0)
$i=0;
while ($i < $count) {
$item_name=mysql_result($rs,$i,"item_name");
?>
<tr>
<td>
<input type="checkbox" name="<?php echo $item_name; ?>" value="<?php echo $item_name; ?>" /> <?php echo $item_name; ?><br />
</td>
<td>
<input name="rate" id="rate" type="text" onkeyup="calcFields()" >
</td>
<td>
<input name="qty" id="qty" type="text" onkeyup="calcFields()" >
</td>
<td>
<input name="amt" id="amt" type="text" readonly="readonly" >
</td>
</tr>
<?php
$i++;
}
?>
</table>
</form>
<br class="clearfloat" />
<div id="footer">
<p></p>
</div>
</body></html>