Hi all.This is part of my code which I am using to edit the record from database.Initially the input boxes show the values from database and if any one of the value is changed, I want to reflect the change according to the changes made in the fields.The code works fine but if I change values in qty,rate or amount, the other values are not changing.Can experts over here tell me why?Here is my code:

<html>
<head>
<script type="text/javascript">

function tot() {
var d=document.getElementById("total").value;
var st=Number(d); 
var e=document.getElementById("vat_amt").value;
var tx=Number(e); 
var f=document.getElementById("cash_discount").value;
var ad=Number(f); 
var g=document.getElementById("vat").value;
var vat=Number(g); 

var h=(st+tx)-ad;
document.getElementById("amount").value = Math.ceil(h);

var z=vat+100;
var y=(st*100)/z;
var i=st-y;
var result=Math.round(i*100)/100;  //returns 28.45
document.getElementById("vat_amt").value =result;

}

var total = 0;
function getValues() {
var qty = 0;
var rate = 0;
var obj = document.getElementsByTagName("input");
      for(var i=0; i<obj.length; i++){
         if(obj[i].name == "qty[]"){var qty = obj[i].value;}
         if(obj[i].name == "rate[]"){var rate = obj[i].value;}
         if(obj[i].name == "amt[]"){
          		if(qty > 0 && rate > 0){obj[i].value = qty*rate;total+=(obj[i].value*1);}
          				else{obj[i].value = 0;total+=(obj[i].value*1);}
          		}
         	 }
        document.getElementById("total").value = total*1;
        total=0;
}

</script>
</head>
<body>
<table width="23%" cellpadding="0" cellspacing="0" class="normal-text" border="0" style="margin-top:0px; padding-top:0px; margin-bottom:0px; padding-bottom:0px;">
<tr>
<td>Qty</td>
<td>Rate</td>
<td>Amount</td>
</tr>
<tr>
<td class="forhead"><input type="text"  name="qty[]"  onkeyup="getValues()" style="width:120px;" value="<?PHP echo "$row3[qty]" ?>" class="text medium"></td>
<td class="forhead"><input type="text"  name="rate[]" onKeyUp="getValues()" style="width:120px;" value="<?PHP echo "$row3[rate]" ?>" class="text medium"></td>
<td class="forhead"><input type="text"  name="amt[]" style="width:120px;"
onKeyUp="getValues()" class="text medium" value="<?PHP echo "$row3[amt]" ?>"></td>
</tr>
<tr>
<td class="dt" colspan="2">Sub Total:</td>
<td class="forhead"><input type="text"  id="total" name="total" style="width:120px;" value="<?PHP echo "$row[total]" ?>" class="text medium"></td>
</tr>
<tr>
<td class="dt" colspan="2">Vat:</td>
<td class="forhead"><?PHP
$query5=mysql_query("SELECT * FROM vat");
echo "<select name='vat' id='vat' style='width:120px; border: 1px solid #BFBFBF;' onChange='tot()'>";
echo "<option value='0'>
Select</option>";

while($row5=mysql_fetch_array($query5))
{?>
<option value= <?PHP echo $row5[vat]; ?> <?PHP echo($row5[vat]==$row[vat])?'selected':''?>> <?PHP echo $row5[vat]; ?> </option>
<?PHP }
echo "</select>";
?></td>
</tr>
<tr>
<td class="dt" colspan="2">Vat Amt :</td>
<td class="forhead"><input type="text"  id="vat_amt" name="vat_amt" style="width:120px;" value="<?PHP echo "$row[vat_amt]" ?>" class="text medium" onKeyUp="tot()"></td>
</tr>
<tr>
<td class="dt" colspan="2">Cash Discount :</td>
<td class="forhead"><input type="text"  id="cash_discount" name="cash_discount" style="width:120px;" value="<?PHP echo "$row[cash_discount]" ?>" class="text medium" onKeyUp="tot()"></td>
</tr>
<tr>
<td class="dt" colspan="2">Total :</td>
<td class="forhead"><input type="text"  name="amount" id="amount" style="width:120px;" class="text medium" onKeyUp="tot()" value="<?PHP echo "$row[amount]" ?>"></td>
</tr>
</table>
</body>
</html>

The only thing I am seeing is on line 73 your option values is missing quotes.

value="<?PHP echo $row5[vat]; ?>"

Is it producing any errors?

Thanks for your reply GliderPilot.No the code is not producing any error.It works fine except when I change qty,rate or amount column.

What is outputted? can you copy the page source for me?

Ok.This is part of my actual page source.Forgot to tell you that I changed the code and calling the tot() at end of getvalues.Now it is working much better except the grand total is not coming correct.

<html>
<head>
<script type="text/javascript">

function tot() {
var d=document.getElementById("total").value;
var st=Number(d); 
var e=document.getElementById("vat_amt").value;
var tx=Number(e); 
var f=document.getElementById("cash_discount").value;
var ad=Number(f); 
var g=document.getElementById("vat").value;
var vat=Number(g); 

var h=(st+tx)-ad;
document.getElementById("amount").value = Math.ceil(h);

var z=vat+100;
var y=(st*100)/z;
var i=st-y;
var result=Math.round(i*100)/100;  //returns 28.45
document.getElementById("vat_amt").value =result;

}

var total = 0;
function getValues() {
var qty = 0;
var rate = 0;
var obj = document.getElementsByTagName("input");
      for(var i=0; i<obj.length; i++){
         if(obj[i].name == "qty[]"){var qty = obj[i].value;}
         if(obj[i].name == "rate[]"){var rate = obj[i].value;}
         if(obj[i].name == "amt[]"){
          		if(qty > 0 && rate > 0){obj[i].value = qty*rate;total+=(obj[i].value*1);}
          				else{obj[i].value = 0;total+=(obj[i].value*1);}
          		}
         	 }
        document.getElementById("total").value = total*1;
        total=0;
		
				tot();

}

</script>
</head>
<body>
<table class="normal-text" style="margin-top: 4px; padding-top: 0px; margin-bottom: 0px; padding-bottom: 0px;" width="53%" border="0" cellpadding="0" cellspacing="0">
<tbody><tr><!--<td width="58">&nbsp;</td>-->
<td class="dt" width="147">Item</td>
<td class="dt" width="145">Description</td>
<td class="dt" width="121">Qty</td>
<td class="dt" width="118">Rate</td>
<td class="dt" width="269">Amount</td>

</tr>
</tbody></table>
<table id="dataTable" class="normal-text" style="margin-top: 0px; padding-top: 0px; margin-bottom: 0px; padding-bottom: 0px;" border="0" cellpadding="0" cellspacing="0">

<tbody><tr>
<td class="forhead"><!--<input type="checkbox" name="chk[]"/>--></td>
<td class="forhead" width="100">
<select name="item_name[]" style="border: 1px solid rgb(191, 191, 191);" class="text medium"><option value="0">
Select</option><option value="5" selected="selected"> Acer- 5750G </option>
<option value="6"> Dell-Vostro 1450  </option>
<option value="8"> DELL Inspiron 580 </option>

</select></td>
<td class="forhead"><input name="desc[]" class="text medium" value="0" type="text"></td>

<td class="forhead"><input name="qty[]" onkeyup="getValues()" style="width: 120px;" value="1" class="text medium" type="text"></td>
<td class="forhead"><input name="rate[]" onkeyup="getValues()" style="width: 120px;" value="100" class="text medium" type="text"></td>
<td class="forhead"><input name="amt[]" style="width: 120px;" onkeyup="getValues()" class="text medium" value="100" type="text"></td>
</tr>
<input name="sales_dy_id[]" value="1" type="hidden">

			
<tr>
<td class="forhead"><!--<input type="checkbox" name="chk[]"/>--></td>
<td class="forhead" width="100">
<select name="item_name[]" style="border: 1px solid rgb(191, 191, 191);" class="text medium"><option value="0">
Select</option><option value="5"> Acer- 5750G </option>

<option value="6" selected="selected"> Dell-Vostro 1450  </option>
<option value="8"> DELL Inspiron 580 </option>
</select></td>
<td class="forhead"><input name="desc[]" class="text medium" value="0" type="text"></td>

<td class="forhead"><input name="qty[]" onkeyup="getValues()" style="width: 120px;" value="2" class="text medium" type="text"></td>
<td class="forhead"><input name="rate[]" onkeyup="getValues()" style="width: 120px;" value="100" class="text medium" type="text"></td>
<td class="forhead"><input name="amt[]" style="width: 120px;" onkeyup="getValues()" class="text medium" value="200" type="text"></td>
</tr>
<input name="sales_dy_id[]" value="2" type="hidden">

			
</tbody></table>

<table class="normal-text" style="margin-top: 0px; padding-top: 0px; margin-bottom: 0px; padding-bottom: 0px;" width="53%" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<!--<td class="forhead" width="58">&nbsp;</td>-->
<td class="dt" width="532">Sub Total:</td>
<td class="forhead" width="120"><input id="total" name="total" style="width: 120px;" value="300" class="text medium" onkeyup="getValues()" type="text"></td>
</tr>
<tr>
<!--<td class="forhead">&nbsp;</td>
--><td class="dt">Vat:</td>
<td class="forhead"><select name="vat" id="vat" style="width: 120px; border: 1px solid rgb(191, 191, 191);" onchange="getValues()"><option value="0">
Select</option><option value="5" selected="selected"> 5 </option>
</select></td>

</tr>
<tr>
<!--<td class="forhead">&nbsp;</td>
--><td class="dt">Vat Amt :</td>
<td class="forhead"><input id="vat_amt" name="vat_amt" style="width: 120px;" value="14.29" class="text medium" onkeyup="getValues()" type="text"></td>
</tr>
<tr>
<!--<td class="forhead">&nbsp;</td>
--><td class="dt">Cash Discount :</td>
<td class="forhead"><input id="cash_discount" name="cash_discount" style="width: 120px;" value="0" class="text medium" onkeyup="getValues()" type="text"></td>
</tr>
<tr>
<!--<td class="forhead">&nbsp;</td>
--><td class="dt">Total :</td>

<td class="forhead"><input name="amount" id="amount" style="width: 120px;" class="text medium" onchange="getValues()" value="315" type="text"></td>
</tr>
</tbody></table>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.