Results 1 to 3 of 3

Thread: How to make/find a price calculator?

  1. #1
    Join Date
    Mar 2012

    How to make/find a price calculator?

    I'm experimenting with ideas for a future website and I want something similar to this screenshot:


    The calculator:
    I am thinking of making the numbers rise to the prise tag instead of just showing it. It must have addition and subtraction abilities, as well as listing selected products in two places - one for overview and one for e-mail.

    Does anyone have good experience with this sort of coding, or is there a company doing this for a living and licencing their stuff?

    I have almost no experience in coding javascript myself.

  2. #2
    Join Date
    Dec 2005


    This example does not replicate your display, but it will act as a starting point for what you want to do.
    <!doctype html>
    <meta charset="utf-8" />
    <title> Checkbox Summation </title>
    <style type="text/css">
     .cbValue { }
    <div id="CostBox">
    <input type="checkbox" class="cbValue" value="9.99"  onclick="UpdateCost()">Product 1 ( 9.99)<br>
    <input type="checkbox" class="cbValue" value="19.99" onclick="UpdateCost()">Product 2 (19.99)<br>
    <input type="checkbox" class="cbValue" value="27.50" onclick="UpdateCost()">Product 3 (27.50)<br>
    <input type="checkbox" class="cbValue" value="45.65" onclick="UpdateCost()">Product 4 (45.65)<br>
    <input type="checkbox" class="cbValue" value="87.20" onclick="UpdateCost()">Product 5 (87.20)<br>
    <input type="text" id="totalcost" value="" size="6"> Total ($)
    <script type="text/javascript">
    function UpdateCost() {
      var sum = 0;
      var sel = document.getElementById('CostBox').getElementsByClassName('cbValue');
      for (i=0; i<sel.length; i++) {
        if (sel[i].checked) { sum += Number(sel[i].value); }
      document.getElementById('totalcost').value = sum.toFixed(2);
    Good Luck!

  3. #3
    Join Date
    Mar 2012
    Thank you.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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