javascript calculate total only working in IE

[fizmo]

hiya, I'm very new to how javascript works and have inherited a website that contains a form that uses the calculate total function...which only works in IE. I've searched all over the net trying to find a solution to get this working across all browsers but not having much luck (mostly due to lack of experience), I'd really appreciate some help getting this sorted out...

This is the script for the calculate total function:

function calculate()
{
 value = 0;
 if (document.form.dvdle1b.checked==true) { value=value+0.5; }
 if (document.form.dvdle2b.checked==true) { value=value+0.5; }
 if (document.form.dvdle3b.checked==true) { value=value+0.5; }
 if (document.form.dvdle4b.checked==true) { value=value+0.5; }
 if (document.form.dvdle5b.checked==true) { value=value+0.5; }
 if (document.form.subscribe.checked==true) {value=value+1; } //subscription is 60 but the rest are 30
 if (document.form.dvd1.checked==true) { value=value+1; } //the current month dvd is 60 but the rest are 30
 if (document.form.dvd9.checked==true) { value=value+0.5; }
 if (document.form.dvd10.checked==true) { value=value+0.5; }
 if (document.form.dvd11.checked==true) { value=value+0.5; }
 if (document.form.dvd12.checked==true) { value=value+0.5; }
 if (document.form.dvd13.checked==true) { value=value+0.5; }
 if (document.form.dvd14.checked==true) { value=value+0.5; }
 if (document.form.dvd15.checked==true) { value=value+0.5; }
 if (document.form.dvd16.checked==true) { value=value+0.5; }
 if (document.form.dvd17.checked==true) { value=value+0.5; }
 if (document.form.dvd18.checked==true) { value=value+0.5; }
 if (document.form.dvd19.checked==true) { value=value+0.5; }
 if (document.form.dvd20.checked==true) { value=value+0.5; }
 if (document.form.dvdvisual1.checked==true) { value=value+0.5; }
 if (document.form.christmasdvd.checked==true) { value=value+0.5; }
 if (document.form.pridedvd.checked==true) { value=value+0.5; }

 if (document.layers)
 {
  if (document.form.cccountry[0].checked==true)
  {
   document.form.total.value = (value*60)*1.15;
  }
  if (document.form.cccountry[1].checked==true)
  {
   if (document.form.vat_number.value=='')
   {
    document.form.total.value = (value*60)*1.15;
   }
   else
   {
    document.form.total.value = (value*60);
   }
  }
 }
 if (document.all)
 {
  if (document.form.cccountry[0].checked==true)
  {
   temptotal = (value*60)*1.15;
   document.form.total.value = temptotal.toFixed(2);
  }
  if (document.form.cccountry[1].checked==true)
  {
   if (document.form.vat_number.value=='')
   {
    temptotal = (value*60)*1.15;
    document.form.total.value = temptotal.toFixed(2);
   }
   else
   {
    temptotal = (value*60);
    document.form.total.value = temptotal.toFixed(2);
   }
  }
 } 
}

This is the code for the checkbox areas (not including it all as it's basically the same for all of the checkboxes):

<tr>
      <td class="text2">May 2009 #299</td>
      <td><input type="checkbox" name="dvd20" value="#299 - May 2009" onclick="calculate()" /></td>
      <td class="text2">Apr 2009 #298</td>
      <td><input type="checkbox" name="dvd19" value="#298 - April 2009" onclick="calculate()" /></td>
      <td class="text2"><b>Mar 2009 #297</b></td>
      <td><input type="checkbox" name="dvd18" value="#297 - Mar 2009" onclick="calculate()" /></td>
      <td class="text2"><b>Feb 2009 #296</b></td>
      <td><input type="checkbox" name="dvd17" value="#296 - Feb 2009" onclick="calculate()" /></td>
    </tr>
    <tr>
      <td class="text2"><b>Jan 2009 #295</b></td>
      <td><input type="checkbox" name="dvd16" value="#295 - Jan 2009" onclick="calculate()" /></td>
      <td class="text2">Dec 2008 #294 </td>
      <td><input type="checkbox" name="dvd15" value="#294 - Dec 2008" onclick="calculate()" /></td>
      <td class="text2">Nov 2008 # 293 </td>
      <td><input type="checkbox" name="dvd14" value="#293 - Nov 2008" onclick="calculate()" /></td>
      <td class="text2">Oct 2008 # 292 </td>
      <td><input type="checkbox" name="dvd13" value="#292 - Oct 2008" onclick="calculate()" /></td>
    </tr>

and this is the code I have for where the total is supposed to show once the checkboxes are checked:

<td width="400"> 
<input type="text" name="total" size="8" style="font-family: Verdana; background-color: #C8FFC8; border-top: thin green solid; border-right: thin green solid; border-bottom: thin green solid; border-left: thin green solid" readonly="readonly"></td>

Hope someone can help....and thanks in advance

PS. Just to clarify, I didn't put together this code so please don't shoot me if it's truly awful!

[oakleymk]

Hello,

OK... at first glance, the problem is that the calculate function is only working under 2 conditions, the first document.layers for old Netscape, and the second document.all for Internet Explorer.

I’m not seeing anything in the document.all section that appears to be IE specific.

Try changeing the if (document.all){ to else{ .

I this fails to work let me know and I will take a closer look at it.

[essential]

Another Demo:

We'l just start with the first 4 cheboxes in your form, you can then continue adding those remaining checkboxes inside the table collection(s).

Here's the code :

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#ccs21" media="all"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Free Live Help!</title>
<style id="css21" type="text/css" media="all">
/* <![CDATA[ */
input[type="checkbox"] {
   display : block;
   margin : auto;
   border : 1px solid #ccc;
   color : #04c; }
input[type="text"] {
   display : block;
   margin : 0;
   vertical-align : middle;
   border : 1px solid #ccc;
   color : #04c; }
table {
   color : #778899;
   letter-spacing : 2px;
   border : none;
   border-collapse : collapse;
   background-color : #f6ffff;
   width : 100%; }
td:first-child {
   background-color : #fff;
   border-right : 1px solid #ccc;
   width : 15%;
   text-align : center;
   padding : 1% 0 1% 0; }
td {
   padding-left : 2%;
   border-top : 1px solid #ccc;
   border-bottom : 1px solid #ccc; }
td.total {
   padding-top : 2.5%;
   border : none;
   background-color : #fff; }
/* ]]> */

</style>
<script id="script15" type="text/javascript">
// <![CDATA[

var $value = 0;
var calc = function() {
   var overAll = (( document.getElementById ) ? document.getElementById("total") : document.all.total );

   (( this.checked ) ? 
   $value += 0.5 : $value -= 0.5 );
   overAll.value = $value;
   overAll.value = (( overAll.value === ( "0" || 0 )) ? "" : (( "$" ) + $value ));   
};

var calculate = function() {
   var form = (( document.getElementsByTagName ) ? document.getElementsByTagName("form")["testform"] : document.all.tags("form")["testform"] );
   checkBox = (( document.getElementsByTagName ) ? form.getElementsByTagName("input") : form.all.tags("input"));
   for ( var x = 0; x < checkBox.length; x++ ) {
      if ( checkBox[ x ].type === "checkbox" ) {
         try {  
            if ( window.addEventListener ) {
            checkBox[ x ].addEventListener( "click", calc, false );
            } else if ( window.attachEvent ) {
            checkBox[ x ].attachEvent( "onclick", calc );
            }
         } catch( e ) {
         checkBox[ x ].onclick = calc;   
         } continue;
      } return true;
   } alert( "Ooops! I think you should replace this browser" ); // Exit Function.
};

window.onload = calculate;
// ]]>
</script>
</head>
<body>
<div id="main">
<form id="testform" action="#" onsubmit="return false;">
<table id="table" frame="border" rules="none" summary="JavaScript :: Live Demo">
<tr>
<td><input type="checkbox" id="dvd20" name="dvd20" value="#299 - April 2009" /></td><td>April 2009 #299</td></tr>
<tr>
<td><input type="checkbox" id="dvd19" name="dvd19" value="#298 - May 2009" /></td><td>May 2009 #298</td></tr>
<tr>
<td><input type="checkbox" id="dvd18" name="dvd18" value="#297 - June 2009" /></td><td>June 2009 #297</td></tr>
<tr>
<td><input type="checkbox" id="dvd17" name="dvd17" value="#296 - May 2009" /></td><td>July 2009 #296</td></tr>
<tr><td class="total">Total :</td>
<td class="total"><input type="text" id="total" name="total" value="" size="8" readonly="readonly" />
</tr>
</table>
</form>
</div> 
</body>
</html>

Hope we've both get your needs...

[fizmo]

thanks to you both for the suggestions, it was oakleymk's that worked like a dream. Changed

if (document.all){ to  else{

and hey presto, everything working on all browsers.

Thank you so very much for your time and help

kate