Calculating totals in webpage using js.

aheywood · Apr 6, 2016

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!

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.

Exodus_AU · May 9, 2016

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>

Using JS to verify registration info?	1	Mar 19, 2020
I want to Display Excel As HTML In js	2	Feb 24, 2023
How do I fix this issue in sqaurespace code block?	1	Jul 2, 2024
How to check the validation of js files or html files including js?	6	Jan 12, 2020
Check forms With JavaScript	1	Mar 28, 2023
Need Help, Both submit button works same, i need both submit button works differently, the one button override other button	3	Nov 9, 2022
Add recipes using JavaScript in table	20	Apr 17, 2023
My sliding panel in React Js with graphs on it renders nothing but a blank screen--need help	0	Dec 9, 2019

Calculating totals in webpage using js.

aheywood

Exodus_AU

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads