Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    Regular Coder
    Join Date
    Nov 2010
    Location
    Washington DC
    Posts
    341
    Thanks
    22
    Thanked 1 Time in 1 Post

    Adding tax to an invoice and performing a bind

    Good day all:

    I have an editable invoice that I have added a sales tax option with a js function doMath(). Prior to my modification with the sales tax option all worked well. the invoice which code is the following:

    Code:
         <textarea id="address" rows="6" cols="38" disabled="true">Website:
    Email:
    TaxID:
    </textarea >
             <div id="vehicleid"><label><strong><u>Vehicle Information</u></strong></label><p>Year: <?php echo $edit_caryear?></p><p>Type: <?php echo $dhtmlgoodies_categoryupdate?></p><p>Make: <?php echo $dhtmlgoodies_subcategoryupdate?></p><p>ClientID# <?php echo $edit_clientID?></p><p>Current Mileage <?php echo $edit_mileage?></p></div>
     
     
            <!--</div>-->
                  <!--<div id="logo">
     
                  <div id="logoctr">
                    <a href="javascript:;" id="change-logo" title="Change logo">Change Logo</a>
                    <a href="javascript:;" id="save-logo" title="Save changes">Save</a>
                    |
                    <a href="javascript:;" id="delete-logo" title="Delete logo">Delete Logo</a>
                    <a href="javascript:;" id="cancel-logo" title="Cancel changes">Cancel</a>
                  </div>
     
                <div id="logohelp">
                    <input id="imageloc" type="text" size="50" value="" /><br />
                    (max width: 540px, max height: 100px)
                  </div>
                  <img id="image" src="images/logo.png" alt="logo" width="280" height="33" />
                </div>-->
     
            </div>
     
            <div style="clear:both"></div>
            <br>
            <div id="customer">
               <?php echo $edit_firstname ?> <?php echo $edit_lastname?><p><?php echo $edit_address?></p><p><?php echo $edit_city?>, <?php echo $edit_state?>, <?php echo $edit_zipcode?></p>
                           </div>
     
    <div id=invoicehead>
                <table id="meta">
                    <tr>
                        <td class="meta-head">Invoice #</td>
                        <td><textarea style="background: transparent;" name="invoicenum" id="invoicenun" disabled="true"><?php
    srand(time());
    $random = (rand()%1000000);
    print("$random");
    ?></textarea></td>
                    </tr>
                    <tr>
     
                        <td class="meta-head">Date</td>
                        <td><textarea name="date" id="date">December 15, 2009</textarea></td>
                    </tr>
                    <tr>
                        <td class="meta-head">Amount Due</td>
                        <td><div name="due" class="due">$0.00</div></td>
                    </tr>
     
                </table>
     
            </div>
     
            <table id="items">
     
              <tr>
                  <th>Item</th>
                  <th>Description</th>
                  <th>Unit Cost</th>
                  <th>Quantity</th>
                  <th>Price</th>
              </tr>
     
              <tr class="item-row">
                  <td class="item-name"><div class="delete-wpr">
                            <!--<label for=\"dhtmlgoodies_category\">Make:</label>-->
                    <?php echo $edit_servicearea?><br>
                    <!--<SELECT NAME="edit_servicearea">
                            <OPTION>Select One
                            <OPTION>Air Intake
                            <OPTION>Brake
                            <OPTION>Clutch
                            <OPTION>Cooling System
                            <OPTION>Driveshaft & Axle
                            <OPTION>Engine Mechanical
                            <OPTION>Exhaust
                            <OPTION>Steering
                            <OPTION>Suspension
                            <OPTION>Transmission
                            <OPTION>Other
                            </SELECT>-->
    <a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
        <td class="description">
     
    <textarea name="servicedesc" cols="255" rows="20"><?php echo str_replace('<br/>', "\n", "$inputbox");?></textarea></td>
                  <td><textarea name="cost" class="cost">$0.00</textarea></td>
                  <td><textarea name="qty" class="qty">1</textarea></td>
                  <td><span name="price" class="price">$0.00</span></td>
              </tr>
     
              <tr class="item-row">
                  <td class="item-name"><div class="delete-wpr">
                    <textarea name="Labor rate" cols="20" rows="3">Labor</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
     
                  <td class="description" wrap=virtual><textarea>Labor rate for the performance of work --excluding cost for parts.</textarea></td>
                  <td><textarea class="cost">$75.00</textarea></td>
                  <td><textarea class="qty" rows="2" cols="10">0</textarea></td>
                  <td><span class="price">$0.00</span></td>
              </tr>
     
              <tr id="hiderow">
                <td colspan="5"><a id="addrow" href="javascript:;" title="Add a row">Add a row</a></td>
              </tr>
     
              <tr>
                  <td colspan="2" class="blank"> </td>
                  <td colspan="2" class="total-line">Subtotal</td>
                  <td class="total-value"><div id="subtotal">$0.00</div></td>
              </tr>
                           <tr>
                    <td colspan="2" class="blank"> </td>
                  <td colspan="2" class="tax-line" style="text-align: left" valign="top">INCLUDE TAX? <input type = "checkbox" id = "taxbox" onclick = "doMath()"><br>DC 
                    5.576%</td>
                   <td class="total-value"><textarea class="tax" id="tax" >$0.00</textarea></td>            </tr>
                 <tr>
     
                  <td colspan="2" class="blank"> </td>
                  <td colspan="2" class="total-line">Total</td>
                  <td class="total-value"><div id="total">$0.00</div></td>
              </tr>
    <tr>
                  <td colspan="2" class="blank"> </td>
                  <td colspan="2" class="total-line">Amount Paid</td>
                  <td class="total-value"><textarea id="paid">$0.00</textarea></td>
              </tr>
              <tr>
                  <td colspan="2" class="blank"> </td>
                  <td colspan="2" class="total-line balance">Balance Due</td>
                  <td class="total-value balance"><div class="due">$0.00</div></td>
              </tr>
     
            </table>
            </div>
     
     
        <!--<div id="terms">
              <h5>Terms</h5>
              <textarea>NET 30 Days. Finance Charge of 1.5% will be made on unpaid balances after 30 days.</textarea>
            </div>-->
     
        </div>
        <div>
    <SCRIPT LANGUAGE="JavaScript">
    document.write('<form><input type=button value="Refresh" onClick="history.go()"></form>')
    </script>
    </div><br>
     
        <div id="option">
        <input type="button" id="button" value="Return to Main Menu" onclick="window.location='/andy/addentry.php' " />
        <input type="hidden" name="servicedesc" value="<?php echo $_POST['servicedesc']; ?>">
         <br>
    &nbsp;<p> 
         <! I added this button, so that it returns us to the main Menu.> 
         <INPUT TYPE="button" onClick="window.print()" value="Print" /><br>
    &nbsp;</p>
        <p><! The above button Clears all the Field's contents ><input type="submit" name="submit" value="Save Changes">
     </div>
    </form>
    the section of the code higlighted in red is where my problem arises. To achieve the desired results(at least so that I thought), I included the following fuction in my js fuction file which is as follows:

    Code:
    function update_total() {
    	var total = 0;
      $('.price').each(function(i){
        price = $(this).html().replace("$","");
        if (!isNaN(price)) total += Number(price);
          });
          
      total =roundNumber(total,2);
    
      $('#subtotal').html("$"+total);
      $('#total').html("$"+total);
      //$('#tax').html("$"+total);
    
      
      update_balance();
    }
    var taxRate = .0575;
    function doMath(){
         //var subtotal =  0.00;//$('.price').each(function(i);
       var subtotal = ('#subtotal');//.html("$"+total);
      if (document.getElementById("taxbox").checked) {
    tax = subtotal* taxRate;  //DC 5.576%
    tax = roundNumber(tax,2);//the 2 represent the number of digits to round numbers to after decimal point
    //tx = " Incl. 5.576%";
    }
    document.getElementById("tax").value = "$" +tax;
    }function update_balance() {
      var due = $("#total").html().replace("$","") - $("#paid").val().replace("$","");
      due = roundNumber(due,2);
      
      $('.due').html("$"+due);
    }
    function update_price() {
      var row = $(this).parents('.item-row');
      var price = row.find('.cost').val().replace("$","") * row.find('.qty').val();
      price = roundNumber(price,2);
      isNaN(price) ? row.find('.price').html("N/A") : row.find('.price').html("$"+price);
      
      update_total();
    }
    
    function bind() {
      $(".cost").blur(update_price);
      $(".qty").blur(update_price);
    
    }
    
    $(document).ready(function() {
    
      $('input').click(function(){
        $(this).select();
      });
     
      $("#paid").blur(update_balance);
       
      $("#addrow").click(function(){
        $(".item-row:last").after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><SELECT NAME="edit_servicearea"><option>Select One<option>Air Intake<option>Brakes<option>Clutch<option>Cooling System<option>Driveshaft & Axle<option>Engine Mechanical<option>Exhaust<option>Steering<option>Suspension<option>Transmission<option>Other</select><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td class="description"><textarea>Description</textarea></td><td><textarea class="cost">$0</textarea></td><td><textarea class="qty">0</textarea></td><td><span class="price">$0</span></td></tr>');
        if ($(".delete").length > 0) $(".delete").show();
        bind();
      });
      
      $(".tax").blur(update_total);//binding tax
      //bind();
        
      bind();
      
      $(".delete").live('click',function(){
        $(this).parents('.item-row').remove();
        update_total();
        if ($(".delete").length < 2) $(".delete").hide();
      });
      
      $("#cancel-logo").click(function(){
        $("#logo").removeClass('edit');
      });
      $("#delete-logo").click(function(){
        $("#logo").remove();
      });
      $("#change-logo").click(function(){
        $("#logo").addClass('edit');
        $("#imageloc").val($("#image").attr('src'));
        $("#image").select();
      });
      $("#save-logo").click(function(){
        $("#image").attr('src',$("#imageloc").val());
        $("#logo").removeClass('edit');
      });
      
      $("#date").val(print_today());
      
    });
    Again, here my sales tax is highlighted in red. My problem specifically is that I'm unable to:
    1.) get the sales tax rate to calculate based on the value of the subtotal, and
    2.) on selection for including taxes, to bind the sale tax amount to the total.

    I trust someone can provide some guidance!
    Mossa
    Last edited by mbarandao; 11-15-2010 at 09:58 PM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,233
    Thanks
    80
    Thanked 4,456 Times in 4,421 Posts
    Ummm...shouldn't that be
    Code:
       var subtotal = $('#subtotal').value;
    ???

    (1) You omitted the $ selector
    (2) $(xxx) gets an *OBJECT REFERNCE*. If you want a property of that reference, you must name the propery. In this case, .value

    No?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Regular Coder
    Join Date
    Nov 2010
    Location
    Washington DC
    Posts
    341
    Thanks
    22
    Thanked 1 Time in 1 Post
    I have tried that as well when the check box is selected, I get the following results :"$NaN.00"

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,233
    Thanks
    80
    Thanked 4,456 Times in 4,421 Posts
    And why do you sometimes use jQuery and sometimes not???

    Why
    Code:
    document.getElementById("taxbox").checked
    instead of
    Code:
    $("#taxbox").checked
    ???

    And, finally, your roundNumber( ) function is really unneeded.

    Code:
    function doMath()
    {
        var tax = 0; // default
        if ( $("taxbox").checked) 
        {
           tax = taxRate * $('#subtotal').value;
        }
        $("tax").value = "$" +tax.toFixed(2);
    }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,233
    Thanks
    80
    Thanked 4,456 Times in 4,421 Posts
    Well, DEBUG!
    Code:
    function doMath()
    {
        var tax = 0; // default
        if ( $("taxbox").checked) 
        {
           alert("DEBUG subtotal is " + $('#subtotal').value ); // remove when all works
           tax = taxRate * $('#subtotal').value;
        }
        $("tax").value = "$" +tax.toFixed(2);
    }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Regular Coder
    Join Date
    Nov 2010
    Location
    Washington DC
    Posts
    341
    Thanks
    22
    Thanked 1 Time in 1 Post
    Thanks Old Pedant, I'll attempt you suggested solution and advise of the outcome shortly. Thank you for your time.

  • #7
    Regular Coder
    Join Date
    Nov 2010
    Location
    Washington DC
    Posts
    341
    Thanks
    22
    Thanked 1 Time in 1 Post
    The debugging with the with the doMath() seems to be unresponsive when the check box is selected. No errors are displayed either! any ideas?
    I disgarded the previous function and used thefollowing:
    Code:
    function doMath(){
    var taxRate = .0575;
        var tax = 0; // default
        if ( $("taxbox").checked) 
        {
        alert("DEBUG subtotal is " + $('#subtotal').value ); 
       tax = taxRate * $('#subtotal').value;
        }
        $("tax").value = "$" +tax.toFixed(2);
    }

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,233
    Thanks
    80
    Thanked 4,456 Times in 4,421 Posts
    Show the page live. If you aren't getting the alert when the taxbox is checked, then something is is wrong.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Regular Coder
    Join Date
    Nov 2010
    Location
    Washington DC
    Posts
    341
    Thanks
    22
    Thanked 1 Time in 1 Post
    Ok, I tried the debugging with the my previous doMath function and got an error. the function which you advised against:
    Code:
    function doMath(){
    var taxRate = .0575;
         //var subtotal =  0.00;//$('.price').each(function(i);
       var subtotal = $('#subtotal').value;//('#subtotal');//.html("$"+total);
      $("#taxbox").checked
      alert("DEBUG subtotal is " + $('#subtotal').value ); // remove when all works
      //if (document.getElementById("taxbox").checked) {
    tax = subtotal* taxRate;  //DC 5.576%
    tax = roundNumber(tax,2);//the 2 represent the number of digits to round numbers to after decimal point
    document.getElementById("tax").value = "$" +tax;
    }
    the error was : "subtotal is undefined".

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    To get and set the value of a textbox in jQuery, you use .val()

    Code:
    var taxRate = 0.0575;
    function doMath(){
       var tax = 0;
      if ($("#taxbox").attr('checked')) {
         tax = $("#subtotal").val() * taxRate;       
      }
      $("#tax").val("$" + tax.toFixed(2));
    }
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #11
    Regular Coder
    Join Date
    Jul 2006
    Posts
    399
    Thanks
    33
    Thanked 7 Times in 7 Posts
    Code:
    if($("input[name=anonym]").is(':checked')){
    
    }
    to evaluate the is or not checked, use
    Code:
    is(':checked')
    .

  • #12
    Regular Coder
    Join Date
    Nov 2010
    Location
    Washington DC
    Posts
    341
    Thanks
    22
    Thanked 1 Time in 1 Post
    Thanks sybil6 and glenngv for your replies. However, still unsuccesfull! Glenngv, I have tried replacing my existing doMath() with your suggestion, the outcome is that the checkbox when selected, nothing happens. I tried to debug using:
    Code:
    alert("DEBUG subtotal is " + $('#subtotal').val() );
    I get "DEBUG subtotal is (blank)". When I debugged earlier with "$('#subtotal').value, it came out with a message" DEBUG subtotal is undefined". Any thoughts on this?

    Sybil6, on your suggestion, I'm affraid, I need more clarity --can you elaborate!

    Mossa

  • #13
    Regular Coder
    Join Date
    Jul 2006
    Posts
    399
    Thanks
    33
    Thanked 7 Times in 7 Posts
    If you cant get the val maybe you need to parsefloat it

    ex:
    Code:
    var  total_prix= parseFloat($('#prix').val()) * initVal;

    edit: that's just an example change it according to your variable names
    Last edited by sybil6; 11-16-2010 at 03:13 PM.

  • #14
    Regular Coder
    Join Date
    Nov 2010
    Location
    Washington DC
    Posts
    341
    Thanks
    22
    Thanked 1 Time in 1 Post
    I'm getting
    Code:
    Uncaught ReferenceError: initVal is not defined
    .
    how is this defined?

    used in this manner:
    Code:
       var subtotal = parseFloat($('#subtotal').val())* initVal;

  • #15
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    If you parseFloat or parseInt a blank string, it returns a NaN. It's better to use Number().

    Code:
    var taxRate = 0.0575;
    function doMath(){
       var tax = 0;
      if ($("#taxbox").attr('checked')) {
         tax = Number($("#subtotal").val()) * taxRate;       
      }
      $("#tax").val("$" + tax.toFixed(2));
    }
    Edit
    I didn't realize that subtotal looks like this - <div id="subtotal">$0.00</div> - I thought it was a textbox
    The function should be like this then
    Code:
    var taxRate = 0.0575;
    function doMath(){
       var tax = 0;
      if ($("#taxbox").attr('checked')) {
         var subtotal = Number($("#subtotal").text().replace(/\$/, ""));
         tax = subtotal  * taxRate;       
      }
      $("#tax").val("$" + tax.toFixed(2));
    }
    Last edited by glenngv; 11-16-2010 at 06:48 PM.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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