SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Addict anita_86's Avatar
    Join Date
    Aug 2010
    Location
    Nagpur, India
    Posts
    232
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:
    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>
    It's easy once you know how...

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by anita_86 View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict anita_86's Avatar
    Join Date
    Aug 2010
    Location
    Nagpur, India
    Posts
    232
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It may sound dumb, but I need to call getValues aswell.
    It's easy once you know how...

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by anita_86 View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict anita_86's Avatar
    Join Date
    Aug 2010
    Location
    Nagpur, India
    Posts
    232
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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().
    It's easy once you know how...

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by anita_86 View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Addict anita_86's Avatar
    Join Date
    Aug 2010
    Location
    Nagpur, India
    Posts
    232
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    It's easy once you know how...

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by anita_86 View Post
    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?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Addict anita_86's Avatar
    Join Date
    Aug 2010
    Location
    Nagpur, India
    Posts
    232
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    It's easy once you know how...

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by anita_86 View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Addict anita_86's Avatar
    Join Date
    Aug 2010
    Location
    Nagpur, India
    Posts
    232
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok.I will do the changes as you said and will try to find out the actual problem
    It's easy once you know how...

  12. #12
    SitePoint Addict anita_86's Avatar
    Join Date
    Aug 2010
    Location
    Nagpur, India
    Posts
    232
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    #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>
    It's easy once you know how...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •