SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Florida
    Posts
    264
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hightlight Area & Round The Numbers

    This is the script I'm working on. When you click the checkbox, the addiontion charge for the item will appear and updating the sales tax, sub total, and total. Now what I'm looking to do is to highlight the extra feature with like a yellow color, just the <td></td> area, so the user knows it's been selected, and I would also like to round the totals. It's showing 15.8894 when it should be 15.89. My PHP script will determine the item cost, etc.. Here is a basic HTML version. Can anyone help me out? Thanks!

    HTML Code:
    <html>
    <head>
            <title>Our Products</title>
            <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
    
    <style type="text/css" id="vbulletin_css">
    <!--
    .tborder
    {
            background: #ffffff;
            color: #000000;
            border: 1px solid #AEB6CD;
    }
    .tcat
    {
            background: #334676;
            color: #FFFFFF;
            font: bold 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
    }
    .thead
    {
            background: #5C7099 url(http://www.vbhackers.com/forum/images/gradients/gradient_thead.gif) repeat-x top left;
            color: #FFFFFF;
            font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
    }
    .alt1, .alt1Active
    {
            background: #ffffff;
            color: #000000;
    }
    .alt2, .alt2Active
    {
            background: #F9F9F9;
            color: #000000;
    }
    -->
    </style>
    
    <script type="text/javascript">
    <!--
    
    function addItem(cb)
    {
    
            if(document.getElementById)
            {
                    var elAmt = document.getElementById('Amt');
                    var elExtra = document.getElementById('extraAmt');
                    var elSub = document.getElementById('subAmt');
                    var elTax = document.getElementById('taxAmt');
                    var elTotal = document.getElementById('totAmt');
                    var amount = parseFloat(elAmt.innerHTML);
    
                    if(cb.checked)
                    {
                            elExtra.innerHTML = "4.99";
                            elSub.innerHTML = amount + 4.99;
                            elTax.innerHTML = (amount + 4.99) * .06;
                            elTotal.innerHTML = ((amount + 4.99) * 1.06);
                    }
                    else
                    {
                            elExtra.innerHTML = "0.00"
                            elSub.innerHTML = "10.00"
                            elTax.innerHTML = "0.60"
                            elTotal.innerHTML = "10.60";
                    }
            }
    }
    
    
    -->
    </script>
    </head>
    
    <body>
    
    <table class="tborder" border="0" cellspacing="1" cellpadding="6" align="center" width="50%">
    <tr>
            <td class="thead">Product</td>
            <td class="thead">Ammount</td>
    </tr>
    <tr>
            <td class="alt2" width="80%">
                    <div><b>Item Title</b></div>
                    <div>Item Description</div>
            </td>
            <td class="alt2" width="20" align="right" id='Amt'>10.00</td>
    </tr>
    <tr>
            <td class="alt1" width="80%"><input type="checkbox" name="mType" onclick="addItem(this)" onclick="javascript:changeBG(2)" value="prod3">Add extra product for 4.99</td>
            <td class="alt1" width="20%" align="right" id='extraAmt'>0.00</td>
    </tr>
    <tr>
            <td class="alt2" width="80%" align="right"><b>Subtotal:</b></td>
            <td width="20%" align="right" id='subAmt'>10.00</td></tr>
    <tr>
            <td class="alt2" width="80%" align="right"><b>Sales Tax:</b></td>
            <td width="20%" align="right" id='taxAmt'>0.60</td>
    </tr>
    <tr>
            <td class="alt2" width="80%" align="right"><b>Grand Total:</b></td>
            <td width="20%" align="right" id='totAmt'>
            10.60
            <input style="font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px;" type="text" name="quicksearch" value="10.60" size="8" readonly="readonly" />
            </td>
    </tr>
    </table>
    </form>
    </body></html>

  2. #2
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    For rounding numbers as you need to, I've created (and actually tested..) a function that uses the internal Regex object to parse the integer value:

    Code:
    function currencyRound(value,seperator)
    {
            if (!seperator)
            {
                    // Default is dollar currency
                    seperator = '.';
            }
            var money_regex = /([0]*|[1-9]*)\.([0-9]{2})/;
            var result = money_regex.exec(value);
            if ( !result[1] && !result[2] )
            {
                    // Woh nelly!
                    return false;
            }
            else if (!result[1] && result[2])
            {
                    return (0 + seperator + result[2]);
            }
            else
            {
                    return (result[1] + seperator + result[2]);
            }
    }
    The seperator option is meant for countries that utilize ',' as a decimal seperator. It defaults to '.' for dollar based us currencies.

  3. #3
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Florida
    Posts
    264
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey thanks for the reply, worked perfect. Not I'll have to figure out how to get that table area to highlight and to place the total in a readonly input form.

  4. #4
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    HTML Code:
    onclick="addItem(this)" onclick="javascript:changeBG(2)"
    That's not quite going to work, you want this:

    HTML Code:
    onclick="addItem(this); changeBG(2);"
    Off Topic:


    btw, it's amount not ammount. I know this because I mispell that every time .

  5. #5
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Florida
    Posts
    264
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey thanks again Chris!

  6. #6
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh the irony.. I just realized I mis-spelt mis-spell...

    Websters, how I loathe you!


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
  •