SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member josephman1988's Avatar
    Join Date
    Mar 2005
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Automatic calculations

    Hello,

    I've got a site, and working in XHTML Transitional, i've got to a page in which i want to add an automatic calculation which stays fixed on the bottom edge of the window. I've added a form that contains dropdown choices and text areas.

    Thorough explanation:
    This is a DVD creation business, for personal occasions, business conferenece slideshows, school presentations etc.
    For each picture they wish to use will cost them, lets say, 15p, they access the dropdown menu and tick that they want, say 30 pictures, once they select this, the calculation will automatically update and show the total price.
    (15p*30p = 4.50 obviously)

    Thanks in advance,

    Regards,
    Joe

  2. #2
    SitePoint Enthusiast panthro's Avatar
    Join Date
    Dec 2006
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Hi Joe

    I'd use an onBlur event on your inputs to trigger a re-calculation function.

    I've not debuged this code or added validation, but shows the theory of how you could build a form like you described:

    Code:
    function formCalc() {
        var quantity = document.getElementByID('quantity').value;
        var price = document.getElementByID('price').value;
        document.getElementByID('total').value = quantity * price;
    }
    
    <select onBlur="formCalc();" id="quantity">
        <option value="1">1 Picture</option>
        <option value="2">2 Pictures</option>
        <option value="3">3 Pictures</option>
    </select>
    
    <input type="text" id="price" value="10.00"  onBlur="formCalc();">
    
    <input type="text" id="total" value="">


    Things to do When Bored

    My List of Classic Kids TV - Includes links to fansites

  3. #3
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    document.getElementById
    Code:
    <script type="text/javascript">
    
    function formCalc() {
        var quantity = document.getElementById('quantity').value;
        var price = document.getElementById('price').value;
        document.getElementById('total').value = quantity * price;
    }
    </script>
    
    <select onchange="formCalc();" id="quantity">
        <option value="1">1 Picture</option>
        <option value="2">2 Pictures</option>
        <option value="3">3 Pictures</option>
    </select>
    
    <input type="text" id="price" value="10.00"  onBlur="formCalc();">
    
    <input type="text" id="total" value="">

  4. #4
    SitePoint Member josephman1988's Avatar
    Join Date
    Mar 2005
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that, that's helped alot.

    How about adding another drop box with different values?

    Thanks again,

    regards,
    joe.

  5. #5
    SitePoint Enthusiast panthro's Avatar
    Join Date
    Dec 2006
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Joe, you would simply take the same principle and expand the function (see example below).

    If you wanted to make this re-usable, I would make a generic class that you feed the names of the inputs into, but this should give you an idea (I've also put the price as a hidden fields, as the users shouldn't really be changing your prices!!, not sure why I did that lol)

    Code:
    <script type="text/javascript">
    
    function formCalc() {
        var quantity1 = document.getElementById('quantity1').value;
        var quantity2 = document.getElementById('quantity2').value;
        var price = document.getElementById('price').value;
    
        document.getElementById('total').value = (quantity1 + quantity2 )* price;
    }
    </script>
    
    <select onchange="formCalc();" id="quantity1">
        <option value="1">1 Picture</option>
        <option value="2">2 Pictures</option>
        <option value="5">5 Pictures</option>
        <option value="10">10 Pictures</option>
    </select>
    
    <select onchange="formCalc();" id="quantity2">
        <option value="1">1 Picture</option>
        <option value="2">2 Pictures</option>
        <option value="5">5 Pictures</option>
        <option value="10">10 Pictures</option>
    </select>
    
    <input type="hidden" id="price" value="0.15">
    
    <input type="text" id="total" value="">
    Also thanks to muazzez for correcting my syntax, I didn't have time to check it through at the time.


    Things to do When Bored

    My List of Classic Kids TV - Includes links to fansites


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
  •