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

anita_86 · #1 (**permalink**) 03-07-12, 11:46 AM

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>