Calculating totals in webpage using js.

Discussion in 'Javascript' started by aheywood, Apr 6, 2016.

  1. aheywood

    aheywood

    Joined:
    Apr 6, 2016
    Messages:
    1
    Likes Received:
    0
    Hi all,

    Please forgive me if I have missed something glaringly obvious...

    I am attempting to create a form that can calculate totals base on user selections in a form. The actual form that is to be calculated is more complex than the one below as I have quickly written this as a test. For some reason it is not completing as intended and I just cant see where the error is... Im not sure if it is just because I have reached the end of my tether! :mad:

    The HTML:
    HTML:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <script type="text/javascript" src="testjs.js"></script>
    </head>

    <body onLoad="hideTotal()">
    <div id="container">
    <form method="post" id="formID">
    <fieldset>
    <select name="dropName" id="dropID" form="formID" title="dropTitle" onChange="calculateTotal()">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
    </select>
    </fieldset>
    <div id="totalDIV"></div>
    </form>
    </div>
    </body>
    </html>
    The JS:
    Code (Javascript):
    var dropOptions new Array;
    dropOptions["1"]=10;
    dropOptions["2"]=20;

    function getdropOptions()
    {
    var dropOptionsValue=0;
    var theForm = document.forms["formID"];
    var selecteddropOptions = theForm.elements["dropID"];
    dropOptionsValue = dropOptions[selecteddropOptions.Value];
    return dropOptionsValue;
    }

    function calculateTotal()
    {
    var overallTotal = getdropOptions();
    var divobj = document.getElementById('totalDIV');
      divobj.style.display='block';
      divobj.innerHTML = "Total Price For the Cake $"+overallTotal;
    }

    function hideTotal()
    {
      var divobj = document.getElementById('totalDIV');
      divobj.style.display='none';
    }
    Again, its probably something pathetic lol but I would appreciate a fresh pair of eyes...

    Thanks in advance,
    Adam.
     
    aheywood, Apr 6, 2016
    #1
    1. Advertisements

  2. aheywood

    Exodus_AU

    Joined:
    May 8, 2016
    Messages:
    3
    Likes Received:
    0
    Hi,
    I wrapped up a simple form in bootstrap and added to drop down options which calculate based on options chosen in both.

    HTML:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Form Calculations</title>
    <!-- <script type="text/javascript" src="testjs.js"></script> onLoad="hideTotal()" -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">


    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    </head>

    <body onload='hideTotal()'>
    <div class="container">
      <h1>My Form Calculations</h1>
      <form class="form-horizontal" action="" id="formcalcs" onsubmit="return false;">
          <div class="form-group">
              <label for="userName" class="control-label col-xs-2">Name</label>
              <div class="col-xs-10">
                  <input type="text" class="form-control" id="userName" placeholder="Name">
              </div>
          </div>
          <div class="form-group">
            <label for="userGender" class="control-label col-xs-2">Gender</label>
            <div class="col-xs-10">
              <div class="radio">
                <label><input type="radio" name="optradio">Male</label>
              </div>

              <div class="radio">
                <label><input type="radio" name="optradio">Female</label>
              </div>
            </div>
          </div>
          <div class="form-group">
              <label for="userOptions1" class="control-label col-xs-2">Option 1</label>
              <div class="col-xs-10">
                <select class="form-control" id="userOptions1" name="userOptions1" onchange="calculateTotal()">
                  <option value="None">Select Option</option>
                  <option value="1">1 - $10</option>
                  <option value="2">2 - $20</option>
                  <option value="3">3 - $30</option>
                  <option value="4">4 - $40</option>
                </select>
              </div>
          </div>
          <div class="form-group">
              <label for="userOptions2" class="control-label col-xs-2">Option 2</label>
              <div class="col-xs-10">
                <select class="form-control" id="userOptions2" name="userOptions2" onchange="calculateTotal()">
                  <option value="None">Select Option</option>
                  <option value="5">5 - $50</option>
                  <option value="6">6 - $60</option>
                  <option value="7">7 - $70</option>
                  <option value="8">8 - $80</option>
                </select>
              </div>
          </div>
          <div class="form-group">
              <div class="col-xs-offset-2 col-xs-10">
                  <div class="checkbox">
                      <label><input type="checkbox"> Save as Favourite</label>
                  </div>
              </div>
          </div>

          <div class="form-group">
            <div id="totalPrice"></div>
          </div>

          <div class="form-group">
              <div class="col-xs-offset-2 col-xs-10">
                  <button type="submit" class="btn btn-primary" onclick="calculateTotal()">Submit</button>
              </div>
          </div>
      </form>
    </div>

    <script>
    var userOptions1_prices= new Array();
     userOptions1_prices["None"]=0;
     userOptions1_prices["1"]=10;
     userOptions1_prices["2"]=20;
     userOptions1_prices["3"]=30;
     userOptions1_prices["4"]=40;

    var userOptions2_prices= new Array();
     userOptions2_prices["None"]=0;
     userOptions2_prices["5"]=50;
     userOptions2_prices["6"]=60;
     userOptions2_prices["7"]=70;
     userOptions2_prices["8"]=80;

     function getuserOptions1Price()
    {
        var userOptions1Price=0;
        //Get a reference to the form id="formcalcs"
        var theForm = document.forms["formcalcs"];
        //Get a reference to the select id="userOptions1"
         var selectedOption = theForm.elements["userOptions1"];

        //set Price equal to value user chose
        //For example prices["1".value] would be equal to 10
        userOptions1Price = userOptions1_prices[selectedOption.value];

        //finally we return price
        return userOptions1Price;
    }

    function getuserOptions2Price()
    {
       var userOptions2Price=0;
       var theForm = document.forms["formcalcs"];
       var selectedOption2 = theForm.elements["userOptions2"];
       userOptions2Price = userOptions2_prices[selectedOption2.value];
       return userOptions2Price;
    }

    function calculateTotal()
    {
        //Here we get the total price by calling our function
        //Each function returns a number so by calling them we add the values they return together
        var totPrice = getuserOptions1Price() + getuserOptions2Price();

        //display the result
        var divobj = document.getElementById('totalPrice');
        divobj.style.display='block';
        divobj.innerHTML = "Total Price $"+totPrice;

    }

    function hideTotal()
    {
        var divobj = document.getElementById('totalPrice');
        divobj.style.display='none';
    }
    </script>

    </body>
    </html>

     
     
    Exodus_AU, May 9, 2016
    #2
    1. Advertisements

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.
Similar Threads
  1. Gary
    Replies:
    4
    Views:
    1,563
    Yan-Hong Huang[MSFT]
    Feb 24, 2004
  2. Guest
    Replies:
    2
    Views:
    754
    Guest
    Jul 2, 2004
  3. martijn@gamecreators.nl

    check if a webpage is forwarding to a other webpage

    martijn@gamecreators.nl, Sep 6, 2005, in forum: Python
    Replies:
    1
    Views:
    819
    garabik-news-2005-05@kassiopeia.juls.savba.sk
    Sep 6, 2005
  4. =?Utf-8?B?Um9iZXJ0IENoYXBtYW4=?=

    Running totals in gridview (when you have many totals required)

    =?Utf-8?B?Um9iZXJ0IENoYXBtYW4=?=, Feb 15, 2007, in forum: ASP .Net
    Replies:
    3
    Views:
    1,251
    Alexey Smirnov
    Feb 16, 2007
  5. Paul
    Replies:
    14
    Views:
    1,331
    Alexey Smirnov
    Jun 19, 2008
  6. isaac2004

    help with using shopping cart totals

    isaac2004, Feb 24, 2006, in forum: ASP General
    Replies:
    7
    Views:
    431
    Paxton
    Feb 25, 2006
  7. sifar
    Replies:
    5
    Views:
    842
  8. soren625
    Replies:
    2
    Views:
    829
    soren625
    Dec 12, 2006
Loading...