Javascript event to reflect the change as per selection of drop down

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>

When you update the subtotal, you will need to run the tot() function to recalculate those other parts of the form.

It may sound dumb, but I need to call getValues aswell.

That’s not dumb at all, it is something that I have always assumed is called.
When getValues is called, it changes some of the values. That is why the getValues function should always at the end of it call the tot() function, which will allow the totals to then be recalculated.

Thats really nice of you paul_wilkins.But as for now, I need to call getvalues() and get totals and then calculate vat amount and grand total based on subtotal got from getvalues() through tot().

Yes, so when the getValues() function updates the subtotal, at the end of that function is when it should call the tot() function to recalculate those other parts of the form.

You mean like this:

<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>

It is working far better now.Thanks for the guidance.But still the grand total is not coming correct unless I press tab :confused:

May I see a test page where the problem can be experienced?

Sorry for delay.Please have a look at the page.
http://itechsystem.co.cc/Demo/sitepoint.php

As you can see,when I change values in qty or rate, the grand total changes.Though if I press tab, the value changes again.

You are getting the vat amount from the page, working out the total, and then changing the vat amount. That results in problems for you.

Change your variable names to more expressive ones, and that will help you to see where the problem occurs.

For example, changing:


var i=st-y;

to:


var vatAmount = subTotal - netSalesPrice;

Aside from that though, the fundamental problem that you have is that it’s not appropriate to work out the total price before you’ve worked out the amount of VAT.

Using variables whose context can be understood at a glance helps you to discover such problems.

Ok.I will do the changes as you said and will try to find out the actual problem

#1.You are getting the vat amount from the page, working out the total, and then changing the vat amount. That results in problems for you.

#2.Change your variable names to more expressive ones, and that will help you to see where the problem occurs.

#3.Aside from that though, the fundamental problem that you have is that it’s not appropriate to work out the total price before you’ve worked out the amount of VAT.

Absolutely correct!!After changing the function a little bit, the code works like magic now :smiley:

Here is my new code:


<script type="text/javascript">

function tot() {
var d=document.getElementById("total").value;
var subTotal = Number(d);
var f=document.getElementById("cash_discount").value;
var cashDiscount = Number(f);
var g=document.getElementById("vat").value;
var vatPercent=Number(g);


var vatPlusHundred = vatPercent+100;
var netSalesPrice =(subTotal*100)/vatPlusHundred;
var vatAmount = subTotal - netSalesPrice;
var result=Math.round(vatAmount*100)/100;  //returns 28.45
document.getElementById("vat_amt").value =result;

var grandTotal=(subTotal+result)-cashDiscount;
document.getElementById("amount").value = Math.ceil(grandTotal);
}

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>