Calculating totals in webpage using js.


Joined
Apr 6, 2016
Messages
1
Reaction score
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:
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.
 
Ad

Advertisements

Joined
May 8, 2016
Messages
4
Reaction score
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>
 

Ask a Question

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. After that, you can post your question and our members will help you out.

Ask a Question

Top