Javascript Calculation Help Needed Onselect

StefanRSA · November 6, 2012

I have a formula that calculate values of Selectbox fields to give a total value in the total field.

I am now a bit stuck and want to know how to add a selectbox or radio button that will multiply the total x1, x2, x3 end x4 if selected.

I am not sure how to change the formula to allow for multiply by radio button selection...

<input onclick="clickCh(this)" type="checkbox" name="h" value="<?=$priceh?>"> R <?=$priceh?>
<input onclick="clickCh(this)" type="checkbox" name="s" value="<?=$pprice?>"> $ <?=$pprice?>
<input onclick="clickCh(this)" type="checkbox" name="n" value="<?=$price?>"> $ <?=$price?>
<input onclick="clickCh(this)" type="checkbox" name="b" value="<?=$priceb?>"> $ <?=$priceb?>
//---------> The Multiply field or radio button I need help with and default will be one week
<input type="radio" name="number" value="1" checked="checked"> 1 week<br>
<input type="radio" name="number" value="2"> 2 weeks<br>
<input type="radio" name="number" value="3"> 3 weeks<br>
<input type="radio" name="number" value="4"> 4 weeks<br>
//<--------------------->
Total: R <input id="total" type="text" name="total" readonly="readonly" value="0.00">
<script language="Javascript" type="text/javascript">
var total = document.getElementById("total")
function clickCh(caller){
if(caller.checked){
add(caller)
} else {
subtract(caller)
}
}
function add(caller){ total.value = total.value*1 + caller.value*1}
function subtract(caller){ total.value = total.value*1 - caller.value*1}
</script>

Thanks for your help!

StefanRSA · November 6, 2012

I tried to do this but the calculation does not work out correctly.... Any Help?

function clickMl(caller){
if(caller.checked){
multi(caller)
} else {
devide(caller)
}
}
function multi(caller){ total.value = total.value*caller.value}
function devide(caller){ total.value = total.value/caller.value}

And the fields:

<input type="radio" onclick="clickMl(this)" name="number" value="1" checked="checked"> 1 week  
<input type="radio" onclick="clickMl(this)" name="number" value="2"> 2 weeks  
<input type="radio" onclick="clickMl(this)" name="number" value="3"> 3 weeks  
<input type="radio" onclick="clickMl(this)" name="number" value="4"> 4 weeks

Edited November 6, 2012 by StefanRSA

codefossa · November 6, 2012

Delimiters and parse your integers. You might have better luck then

I'll leave you with an example.

http://xaotique.no-ip.org/tmp/16

HTML

<b>Weeks:</b>
<input class="weeks" type="radio" name="weeks" value="1" checked /> 1
<input class="weeks" type="radio" name="weeks" value="2" /> 2
<input class="weeks" type="radio" name="weeks" value="3" /> 3
<input class="weeks" type="radio" name="weeks" value="4" /> 4
<br />
<b>Info:</b> <span id="info">$0.00 Per Week for 0 Weeks</span>
<br />
<b>Total:</b> <span id="result">$0.00</span>

Javascript

// Execute After Page Loads
window.addEventListener("load", function()
{
   // Variables and Input Tags
   var price = 9.32, weeks = 0, tag = window.document.getElementsByClassName("weeks");

   // Set Default Num Checked
   tag[0].checked = true;

   // Set Click Function
   for (var i in tag)
   {
       tag[i].onclick = getInfo;
   }

   // Calculate Info and Display It
   function getInfo()
   {
       // Check Which is Checked
       for (var i in tag)
       {
           if (tag[i].checked)
               weeks = parseInt(tag[i].value);
       }

       // Display Data
       window.document.getElementById("info").innerHTML = "$" + price + " Per Week for " + weeks + (weeks > 1 ? " Weeks" : " Week");
       window.document.getElementById("result").innerHTML = "$" + (price * weeks);
   }

   // Run To Display Default
   getInfo();
});

StefanRSA · November 7, 2012

Thanks for the reply...

Now I am a bit confused... (Very raw with JS)

How do I get the total selected into the price value?

<input onclick="clickCh(this)" type="checkbox" name="h" value="30"> $ 30<br>
<input onclick="clickCh(this)" type="checkbox" name="s" value="50"> $ 50 <br>
<input onclick="clickCh(this)" type="checkbox" name="n" value="80"> $ 80<br>
<input onclick="clickCh(this)" type="checkbox" name="b" value="100"> $ 100<br>
//---------> The Multiply field or radio button I need help with and default will be one week<br>
<b>Weeks:</b>
<input class="weeks" type="radio" name="weeks" value="1" checked /> 1
<input class="weeks" type="radio" name="weeks" value="2" /> 2
<input class="weeks" type="radio" name="weeks" value="3" /> 3
<input class="weeks" type="radio" name="weeks" value="4" /> 4
<br />
<b>Info:</b> <span id="info">$0.00 Per Week for 0 Weeks</span>
<br />
<b>Total:</b> <span id="result">$0.00</span>
//<--------------------->
Total: R <input id="total" type="text" name="total" readonly="readonly" value="0.00">
<script language="Javascript" type="text/javascript">
var total = document.getElementById("total")
function clickCh(caller){
if(caller.checked){
add(caller)
} else {
subtract(caller)
}
}
function add(caller){ total.value = total.value*1 + caller.value*1}
function subtract(caller){ total.value = total.value*1 - caller.value*1}
// Execute After Page Loads
window.addEventListener("load", function()
{
 // Variables and Input Tags
 var price = !!!!!!!!!!total.value!!!!!!!!!!!!!, weeks = 0, tag = window.document.getElementsByClassName("weeks");

 // Set Default Num Checked
 tag[0].checked = true;

 // Set Click Function
 for (var i in tag)
 {
		 tag[i].onclick = getInfo;
 }

 // Calculate Info and Display It
 function getInfo()
 {
		 // Check Which is Checked
		 for (var i in tag)
		 {
				 if (tag[i].checked)
						 weeks = parseInt(tag[i].value);
		 }

		 // Display Data
		 window.document.getElementById("info").innerHTML = "$" + price + " Per Week for " + weeks + (weeks > 1 ? " Weeks" : " Week");
		 window.document.getElementById("result").innerHTML = "$" + (price * weeks);
 }

 // Run To Display Default
 getInfo();
});
</script>

StefanRSA · November 7, 2012

I have tried it other way around... I think? And this does not work either and I am sure its a basic error...?

Me still learning...

<input onclick="Calculate()" type="checkbox" name="h" id="h" value="30"> $ 30<br>
<input onclick="Calculate()" type="checkbox" name="s" id="s" value="50"> $ 50 <br>
<input onclick="Calculate()" type="checkbox" name="n" id="n" value="80"> $ 80<br>
<input onclick="Calculate()" type="checkbox" name="b" id="b" value="100"> $ 100<br>
//---------> The Multiply field or radio button I need help with and default will be one week<br>
<b>Weeks:</b>
<input class="weeks" onclick="Calculate()" type="radio" name="weeks" id="week" value="1" checked /> 1
<input class="weeks" onclick="Calculate()" type="radio" name="weeks" id="week" value="2" /> 2
<input class="weeks" onclick="Calculate()" type="radio" name="weeks" id="week" value="3" /> 3
<input class="weeks" onclick="Calculate()" type="radio" name="weeks" id="week" value="4" /> 4
<br />
//<--------------------->
<script type="text/javascript">

function Calculate() {
   var total = 0;
   var h = Number(document.getElementById("h").value) * 1;
   var s = Number(document.getElementById("s").value) * 1;
   var n = Number(document.getElementById("n").value) * 1;
   var b = Number(document.getElementById("b").value) * 1;
   var week = Number(document.getElementById("week").value) * 1;
   total = (h+s+n+B)*(week);
document.getElementById('outputDiv').innerHTML= 'Your TOTAL is: $' + Number(total).toFixed(2);
}
</script>
   <div id="outputDiv">
   </div>

codefossa · November 7, 2012

Elements can't share an ID. You have to use a class for that, like I showed you. You could use the onclick method to get the one you chose, but that's up to you. It doesn't take much longer to cycle through a couple options which is why I did it to allow the default calculation too.

If you're gonna do all of them, you may as well cycle through a class to make it easier on yourself.

Example Page: http://xaotique.no-ip.org/tmp/17/

HTML

<input onclick="Calculate()" class="hsnb" type="checkbox" name="h" id="h" value="30.32"> $ 30<br />
<input onclick="Calculate()" class="hsnb" type="checkbox" name="s" id="s" value="50"> $ 50 <br />
<input onclick="Calculate()" class="hsnb" type="checkbox" name="n" id="n" value="80"> $ 80<br />
<input onclick="Calculate()" class="hsnb" type="checkbox" name="b" id="b" value="100"> $ 100<br />

<b>Weeks:</b>
<input onclick="Calculate()" class="weeks" onclick="Calculate()" type="radio" name="weeks" value="1" checked /> 1
<input onclick="Calculate()" class="weeks" onclick="Calculate()" type="radio" name="weeks" value="2" /> 2
<input onclick="Calculate()" class="weeks" onclick="Calculate()" type="radio" name="weeks" value="3" /> 3
<input onclick="Calculate()" class="weeks" onclick="Calculate()" type="radio" name="weeks" value="4" /> 4

<br /><br />

<div id="outputDiv"></div>

Javascript

function Calculate()
{
   var tag = window.document.getElementsByClassName("hsnb"), total = 0;

   for (var i in tag)
   {
       total += tag[i].checked && !isNaN(Number(tag[i].value)) ? Number(tag[i].value) : 0;
   }

   var tag = window.document.getElementsByClassName("weeks");

   for (var i in tag)
   {
       total *= tag[i].checked && !isNaN(Number(tag[i].value)) ? Number(tag[i].value) : 1;
   }

   window.document.getElementById("outputDiv").innerHTML = 'Your TOTAL is: $' + total.toFixed(2);
}

StefanRSA · November 7, 2012

Cool! Now it make sense!

Thanks Xaotique :happy-04:

StefanRSA · November 7, 2012

Last Q...

What do I have to change here:

window.document.getElementById("outputDiv").innerHTML = 'Your TOTAL is: $' + total.toFixed(2);

to make it rather update a field like this:

Total: $ <input type="text" name="total" value="0.00" id="outputDiv1">

StefanRSA · November 7, 2012

Never mind! :-)

By just changing it from:

window.document.getElementById("outputDiv").innerHTML = 'Your TOTAL is: $' + total.toFixed(2);

TO:

window.document.getElementById("outputDiv").value = 'Your TOTAL is: $' + total.toFixed(2);

Thanks for the help... Me being an idiot! ::)

StefanRSA · November 8, 2012

Ok, clever me tried something else...

I want the total days to display as well so I combined what we have worked on thus far and am not sure why it is a bit broken... It calculates but its as if the selection of the options are sometimes ignored and only the total days are ignored.

What am I doing wrong?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <title>Xaotique</title>
 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
 <script type="text/javascript">
  function Calculate()
  {
   var tag = window.document.getElementsByClassName("hsnb"), total = 0;

   for (var i in tag)
   {
 total += tag[i].checked && !isNaN(Number(tag[i].value)) ? Number(tag[i].value) : 0;
   }

   var tag = window.document.getElementsByClassName("weeks");

   for (var i in tag)
   {
 total *= tag[i].checked && !isNaN(Number(tag[i].value)) ? Number(tag[i].value) : 1;
   }

			    window.document.getElementById("outputDiv").value = '' + total.toFixed(2);
  }
 </script>
</head>

<body>
 <input onclick="Calculate()" class="hsnb" type="checkbox" name="h" id="h" value="30"> $ 30<br />
 <input onclick="Calculate()" class="hsnb" type="checkbox" name="s" id="s" value="50"> $ 50 <br />
 <input onclick="Calculate()" class="hsnb" type="checkbox" name="n" id="n" value="80"> $ 80<br />
 <input onclick="Calculate()" class="hsnb" type="checkbox" name="b" id="b" value="100"> $ 100<br />
 <b>Weeks:</b>
 <input onclick="Calculate()" class="weeks" onclick="Calculate()" type="radio" name="weeks" value="1" checked /> 1
 <input onclick="Calculate()" class="weeks" onclick="Calculate()" type="radio" name="weeks" value="2" /> 2
 <input onclick="Calculate()" class="weeks" onclick="Calculate()" type="radio" name="weeks" value="3" /> 3
 <input onclick="Calculate()" class="weeks" onclick="Calculate()" type="radio" name="weeks" value="4" /> 4
 <br /><br />
Total: R <input type="text" name="total" value="0.00" readonly="readonly" id="outputDiv">
<span id="result">7</span>
 <script type="text/javascript">
// Execute After Page Loads
window.addEventListener("load", function()
{
    // Variables and Input Tags
    var weeks = 0, tag = window.document.getElementsByClassName("weeks");

    // Set Default Num Checked
    tag[0].checked = true;

    // Set Click Function
    for (var i in tag)
    {
		    tag[i].onclick = getInfo;
    }

    // Calculate Info and Display It
    function getInfo()
    {
		    // Check Which is Checked
		    for (var i in tag)
		    {
				    if (tag[i].checked)
						    weeks = parseInt(tag[i].value);
		    }

		    // Display Data
		    window.document.getElementById("result").innerHTML = + (7 * weeks);
    }

    // Run To Display Default
    getInfo();
});
 </script>
</body>
</html>

StefanRSA · November 8, 2012

:happy-04:

So proud of myself!!!!

Thanks for your help Xaotique!!!!!!!!!!!!!!!!!!!!!!!!!!!

My complete code is below...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <title>Xaotique</title>
 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
 <script type="text/javascript">
  function Calculate()
  {
   var tag = window.document.getElementsByClassName("hsnb"), total = 0;

   for (var i in tag)
   {
 total += tag[i].checked && !isNaN(Number(tag[i].value)) ? Number(tag[i].value) : 0;
   }

   var tag = window.document.getElementsByClassName("weeks");

   for (var i in tag)
   {
 total *= tag[i].checked && !isNaN(Number(tag[i].value)) ? Number(tag[i].value) : 1;
   }

			    window.document.getElementById("outputDiv").value = '' + total.toFixed(2);

    var week = window.document.getElementsByClassName("weeks"), weeks = 0;

   for (var i in week)
   {
 weeks += tag[i].checked && !isNaN(Number(tag[i].value)) ? Number(tag[i].value) : 0;
   }			   
			    window.document.getElementById("result").innerHTML = + (7 * weeks);
  }
 </script>
</head>

<body>
 <input onclick="Calculate()" class="hsnb" type="checkbox" name="h" id="h" value="30.00"> $ 30<br />
 <input onclick="Calculate()" class="hsnb" type="checkbox" name="s" id="s" value="50"> $ 50 <br />
 <input onclick="Calculate()" class="hsnb" type="checkbox" name="n" id="n" value="80"> $ 80<br />
 <input onclick="Calculate()" class="hsnb" type="checkbox" name="b" id="b" value="100"> $ 100<br />
 <b>Weeks:</b>
 <input onclick="Calculate()" class="weeks" onclick="Calculate()" type="radio" name="weeks" value="1" checked /> 1
 <input onclick="Calculate()" class="weeks" onclick="Calculate()" type="radio" name="weeks" value="2" /> 2
 <input onclick="Calculate()" class="weeks" onclick="Calculate()" type="radio" name="weeks" value="3" /> 3
 <input onclick="Calculate()" class="weeks" onclick="Calculate()" type="radio" name="weeks" value="4" /> 4
 <br /><br />
Total: R <input type="text" name="total" value="0.00" readonly="readonly" id="outputDiv">
<span id="result">7</span>

</body>
</html>

codefossa · November 8, 2012

You're welcome, but rather than doing an extra cycle of the weeks class, it would make more sense to just get both values at once.

Javascript

var tag = window.document.getElementsByClassName("weeks");

for (var i in tags)
{
   if (tag[i].checked && !isNaN(Number(tag[i].value)))
   {
       var weeks = Number(tag[i].value);
       var days  = weeks * 7;

       total *= weeks;
   }
}

StefanRSA · November 9, 2012

Ah... Spanner in the works!

I display the price value next to each checkbox....

How do I then go about (I understand its got to be in a div with an id) to change those prices then also as per display depending on the week selection?

I dont need to change the value of the fields as I will do it in script after post.... I am sure changing the values of each field will just restart my nightmare!

Thanks

codefossa · November 9, 2012

Put the value on the page (the 4 prices) in a span, then give it a class. Use an array for each week, like [ 30, 60, 90, 120 ] then just use a function that will loop through and set them. Pick the form, find the first input [0] and set the value to array[0], then find the first span set innerHTML to array[0], and continue.

for (var i in array) then array will be the price. You'll be setting this price to getElementsByTagName("input") and the span the same way (or use classes so it don't interfere with anything else you may add).

If you need more help than that, post what you've got so far. Also, when you want more help, please untick the topic as solved because I overlook the solved ones.

StefanRSA · November 12, 2012

Thanks Xaotique,

I might be a bit confused here... Why does this not work?

I have added this and put the price onscreen in a div:

    var price = window.document.getElementsByClassName("hsnb"), total = 0;
   for (var i in price)
   {
 tprice += !isNaN(Number(price[i].value)) ? Number(price[i].value) : 0;
   }	 
			    window.document.getElementsByClassName("nprice").innerHTML = + (tprice * weeks);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <title>Xaotique</title>
 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
 <script type="text/javascript">
  function Calculate()
  {
   var tag = window.document.getElementsByClassName("hsnb"), total = 0;

   for (var i in tag)
   {
 total += tag[i].checked && !isNaN(Number(tag[i].value)) ? Number(tag[i].value) : 0;
   }

   var tag = window.document.getElementsByClassName("weeks");

   for (var i in tag)
   {
 total *= tag[i].checked && !isNaN(Number(tag[i].value)) ? Number(tag[i].value) : 1;
   }

			    window.document.getElementById("outputDiv").value = '' + total.toFixed(2);

    var week = window.document.getElementsByClassName("weeks"), weeks = 0;

   for (var i in week)
   {
 weeks += tag[i].checked && !isNaN(Number(tag[i].value)) ? Number(tag[i].value) : 0;
   }			   
			    window.document.getElementById("result").innerHTML = + (7 * weeks);
			    window.document.getElementById("result_top").innerHTML = + (7 * weeks);
			    window.document.getElementById("dayfield").value = + (7 * weeks);
    var price = window.document.getElementsByClassName("hsnb"), total = 0;
   for (var i in price)
   {
 tprice += !isNaN(Number(price[i].value)) ? Number(price[i].value) : 0;
   }	 
			    window.document.getElementsByClassName("nprice").innerHTML = + (tprice * weeks);

  }
 </script>
</head>

<body>
  <b>Weeks:</b>
 <input onclick="Calculate()" class="weeks" type="radio" name="weeks" value="1" checked="Checked"> 1 Week
   
 <input onclick="Calculate()" class="weeks" type="radio" name="weeks" value="2"> 2 Weeks
   
 <input onclick="Calculate()" class="weeks" type="radio" name="weeks" value="3"> 3 Weeks
   
 <input onclick="Calculate()" class="weeks" type="radio" name="weeks" value="4"> 4 Weeks
 <br /><br />
 <input onclick="Calculate()" class="hsnb" type="checkbox" name="h" id="h" value="30.00"> $ <div class="nprice" style="display:inline;">30</div><br>
 <input onclick="Calculate()" class="hsnb" type="checkbox" name="s" id="s" value="50"> $ <div class="nprice" style="display:inline;">50</div><br>
 <input onclick="Calculate()" class="hsnb" type="checkbox" name="n" id="n" value="80"> $ <div class="nprice" style="display:inline;">80</div><br>
 <input onclick="Calculate()" class="hsnb" type="checkbox" name="b" id="b" value="100"> $ <div class="nprice" style="display:inline;">100</div><br>

Total: R <input type="text" name="total" value="0.00" readonly="readonly" id="outputDiv">
(<span id="result">7</span> Days)
<br>
<input type="hidden" name="total" value="7" id="dayfield">

</body>
</html>

codefossa · November 12, 2012

Without using jQuery, you cannot set the html of a list of things. Like, you selected all elements with that class, which is an array of elements in one, so you can't set .innerHTML unless you either loop through them, or pick which one you want in the array.

If you want the first of the class, it would be window.document.getElementsByClassName("class")[0].innerHTML = "w/e";

StefanRSA · November 12, 2012

Uhm... Not sure why... But this is not working:

    var price = window.document.getElementsByClassName("hsnb"), total = 0;
   for (var i in price)
   {
 tprice += !isNaN(Number(price[i].value)) ? Number(price[i].value) : 0;
   }	 
			    window.document.getElementsByClassName("nprice")[0].innerHTML = (nprice * weeks);
			    window.document.getElementsByClassName("nprice")[1].innerHTML = (nprice * weeks);
			    window.document.getElementsByClassName("nprice")[2].innerHTML = (nprice * weeks);
			    window.document.getElementsByClassName("nprice")[3].innerHTML = (nprice * weeks);
			    window.document.getElementsByClassName("nprice")[4].innerHTML = (nprice * weeks);

StefanRSA · November 12, 2012

Xaotique,

I am going to skip the last idea of updating the totals for display as I just cannot get my head around it... Tried a few ways but my head hurts of all the banging against the wall... What I like to know otherwise...

How to go about if I want to give a discount for more than one week...

1 Week, full price,

2 Weeks 10% discount

3 weeks 12.5% discount and

4 Weeks 15% discount...

codefossa · November 13, 2012

Probably just stick it in an array.

var total = 13.58;

var weeks = 3;

var discount = {
   1: 0,
   2: 10,
   3: 12.5,
   4: 15
};

alert(total - (total * discount[weeks] / 100));

StefanRSA · November 13, 2012

I got the totals per week to display depending on the week selected... Almost gave up!

Now....

I used the sample you gave, but not sure where to put it or how to use it in the current forlmula.

Please have a look and tell me what I am doing wrong?

   var discount = {
    1: 0,
    2: 10,
    3: 12.5,
    4: 15
};

   var tag = window.document.getElementsByClassName("weeks");

   for (var i in tag)
   {
 total *= tag[i].checked && !isNaN(Number(tag[i].value)) ? Number(tag[i].value) : 1;
   }

			    window.document.getElementById("outputDiv").value = + total - (total * discount[weeks] / 100).toFixed(2);

I only get NaN output in the field.

Thanks

StefanRSA · November 13, 2012

Also, my code now works lekker (Very Nice)....

Two things.... I am still not sure about the discounts I spoke about...

And why does .toFixed(2) not work in the following: (I get the value from a span... Might that be the reason?)

 var nb = document.getElementById('b').value;
 window.document.getElementById("nb").innerHTML = + ((nb * weeks).toFixed(2));

Full code now looks as follow:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Xaotique</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript">
function Calculate()
{
var tag = window.document.getElementsByClassName("hsnb"), total = 0;

for (var i in tag)
{
 total += tag[i].checked && !isNaN(Number(tag[i].value)) ? Number(tag[i].value) : 0;
}

var discount = {
 1: 0,
 2: 10,
 3: 12.5,
 4: 15
};

var tag = window.document.getElementsByClassName("weeks");

for (var i in tag)
{
 total *= tag[i].checked && !isNaN(Number(tag[i].value)) ? Number(tag[i].value) : 1;
}

			 window.document.getElementById("outputDiv").value = + total.toFixed(2);

 var week = window.document.getElementsByClassName("weeks"), weeks = 0;

for (var i in week)
{
 weeks += tag[i].checked && !isNaN(Number(tag[i].value)) ? Number(tag[i].value) : 0;
}			
			 window.document.getElementById("result").innerHTML = + (7 * weeks);
			 window.document.getElementById("result_top").innerHTML = + (7 * weeks);
			 window.document.getElementById("dayfield").value = + (7 * weeks);
 var nu = document.getElementById('u').value;
 window.document.getElementById("nu").innerHTML = + ((nu * weeks).toFixed(2));
 var nh = document.getElementById('h').value;
 window.document.getElementById("nh").innerHTML = + ((nh * weeks).toFixed(2));
 var ns = document.getElementById('s').value;
 window.document.getElementById("ns").innerHTML = + ((ns * weeks).toFixed(2));
 var nn = document.getElementById('n').value;
 window.document.getElementById("nn").innerHTML = + ((nn * weeks).toFixed(2));	
 var nb = document.getElementById('b').value;
 window.document.getElementById("nb").innerHTML = + ((nb * weeks).toFixed(2));

	 }
</script>
</head>

<body>
(<span id="result_top">7</span> Days)
<b>Weeks:</b>
<input onclick="Calculate()" class="weeks" type="radio" name="weeks" value="1" checked="Checked"> 1 Week
  
<input onclick="Calculate()" class="weeks" type="radio" name="weeks" value="2"> 2 Weeks
  
<input onclick="Calculate()" class="weeks" type="radio" name="weeks" value="3"> 3 Weeks
  
<input onclick="Calculate()" class="weeks" type="radio" name="weeks" value="4"> 4 Weeks
<br /><br />
<input onclick="Calculate()" class="hsnb" type="checkbox" name="u" id="u" value="15"> $ <span id="nu">30</span><br>
<input onclick="Calculate()" class="hsnb" type="checkbox" name="h" id="h" value="30"> $ <span id="nh">30</span><br>
<input onclick="Calculate()" class="hsnb" type="checkbox" name="s" id="s" value="50"> $ <span id="ns">50</span><br>
<input onclick="Calculate()" class="hsnb" type="checkbox" name="n" id="n" value="80"> $ <span id="nn">80</span><br>
<input onclick="Calculate()" class="hsnb" type="checkbox" name="b" id="b" value="100"> $ <span id="nb">100</span><br>

Total: R <input type="text" name="total" value="0.00" readonly="readonly" id="outputDiv">
(<span id="result">7</span> Days)
<br>
<input type="hidden" name="days" value="7" id="dayfield">

</body>
</html>

Edited November 13, 2012 by StefanRSA

StefanRSA · December 4, 2012

Hi Xaotique

Wonder if you can help me here...

Regarding the script I worked on... I now get an error in IE stating the following:

SCRIPT438: Object doesn't support property or method 'getElementsByClassName'

What is the best solution regarding this?

Everything works fine in Safari, FF & Chrome... Just IE is the usual pain...

Please help urgently

codefossa · December 4, 2012

From what I've heard, getElementsByClassName() isn't supported in IE8. You can recreate the function or switch it out for querySelectorAll().

StefanRSA · December 4, 2012

Hi Xaotique.

In fact no.... I tried it today.... No luck... Not IE8 nor IE9

What does work is the following... (Think Admin must make it a Sticky!) :thumb-up:

Add this to the top of the script:

 if (!document.getElementsByClassName) {
document.getElementsByClassName = function (cn) {
 var rx = new RegExp("(?:^|\\s)" + cn+ "(?:$|\\s)");
 var allT = document.getElementsByTagName("*"), allCN = [],ac="", i = 0, a;
  while (a = allT[i=i+1]) {
 ac=a.className;
 if ( ac && ac.indexOf(cn) !==-1) {
   if(ac===cn){ allCN[allCN.length] = a; continue;   }
   rx.test(ac) ? (allCN[allCN.length] = a) : 0;
 }
  }
 return allCN;
}
}

Thanks for your reply!

codefossa · December 4, 2012

I meant from IE8 on to whatever version is around now, like IE10 I think. I'm a Linux user, and I don't keep up on IE versions too much unless someone comes to me with a problem.

But yes, that's pretty much recreating the function. You could have also just done this:

var tag = window.document.querySelectorAll(".className");

Sign In

Javascript Calculation Help Needed Onselect

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information