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

**anita_86** · Mar 7, 2012 11:24

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:

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>

**paul_wilkins** · Mar 7, 2012 16:14

Originally Posted by anita_86

if I change values in qty,rate or amount, the other values are not changing.Can experts over here tell me why?[CODE]

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

**anita_86** · Mar 8, 2012 06:16

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

**paul_wilkins** · Mar 8, 2012 06:19

Originally Posted by anita_86

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.

**anita_86** · Mar 8, 2012 09:48

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().

**paul_wilkins** · Mar 8, 2012 13:57

Originally Posted by anita_86

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.

**anita_86** · Mar 9, 2012 00:47

You mean like this:

Code:

<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

**paul_wilkins** · Mar 9, 2012 00:51

Originally Posted by anita_86

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

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

**anita_86** · Mar 10, 2012 01:56

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.

**paul_wilkins** · Mar 10, 2012 07:38

Originally Posted by anita_86

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:

Code javascript:

var i=st-y;

to:

Code javascript:

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.

**anita_86** · Mar 11, 2012 11:44

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

**anita_86** · Mar 13, 2012 00:41

#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

Here is my new code:

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>

User Tag List

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

Thread Tools

Display

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

Bookmarks

Bookmarks

Posting Permissions