Help with javascript calculator returning "NaN"

PlugComputers · March 2, 2007

Hello all, thought maybe I could get a little help with a problem I was having with some Javascript on this forum.

I recently posted about adding some type of script to my page that calculated a customers custom computer system price by assigning each form option a dollar value. I have done so, with a script that seems like it would work, but am having some problems. I feel that I have the script correctly in place, but when the user selects their computer options a total of "NaN" returns at the bottom of the page.

You can see what I mean here: www.plugcomputers.com/amdscheduletest.php

I only have dollar amounts applied to the "Processors" section, but it should work with just those values.

Here is the important html of the page (where i think the problem lies...), check to see if I'm missing something obvious, or give me a reason why this isn't working out:

<?php echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?".">"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="JavaScript" type="text/javascript">
<!--Hide script from old browsers

function newWindow(newContent)
{
  winContent = window.open(newContent, 'nextWin', 'right=0, top=20,width=650,height=775, toolbar=no,scrollbars=yes, resizable=no')		 
}

//Stop hiding script from old browsers -->

function submitForm() {
	if(document.theForm.name.value.length < 1) {
		alert("Please enter your name.");
		document.theForm.name.focus();
		return;
	} else if(document.theForm.email.value.length < 4) {
		alert("Please enter a valid e-mail address.");
		document.theForm.email.focus();
		return;
	}
	document.theForm.submit();
}
</script>
<script language="JavaScript" type="text/javascript">
function getTotal(){
var form=document.theForm;
var inputs=form.getElementsByTagName('input');
var length=inputs.length;
var total='0';

for(i=0;i<length-1;i++){
  if(inputs[i].type=='radio'){
  var checked=inputs[i].checked?1:0;
if(checked){
var value=inputs[i].value.split("~~")[0];
total-=-value;
}
  }
}
document.getElementById('totalspan').innerHTML="$"+total
total='1200';
}
</script>
<link rel="stylesheet" type="text/css" href="default.css"/>
<title>Plug Computers - Customize Your AMD Build</title>
</head>
<body bgcolor="#FFFFFF"><div class="main">
<div class="gfx"> 
  <h1><font color="#67696D"><strong><font size="+3" face="Trebuchet MS"><a href="http://www.plugcomputers.com">Plug 
Computers</a></font></strong><br />
<font size="4"><a href="http://www.plugcomputers.com">http://www.PlugComputers.com</a></font></font></h1>
  <h1 align="left"><font color="#67696D"> <br />
<br />
<font color="#999999" size="5"><strong>Schedule Your Build!</strong> </font></font></h1>
</div>
<div class="menu"> 
  <div align="center"><a href="index.html"><strong>Home</strong></a> <a href="portfolio.html"> 
<strong>Portfolio</strong></a> <a href="schedule.php"><strong>Schedule Your 
Build!</strong></a><a href="newtechnology.html" id="last"><strong>New Technology</strong></a> 
  </div>
</div><div class="content">
<div class="item"> 
  <h1>Schedule Your AMD Build</h1>
  <p>So you are interested in contacting Plug Computers to receive a consultations 
regarding a custom build for you or your business? Excellent. There are a 
few ways to go about doing so in order to make your experience the easiest. 
Every system we create has the ability to be 100% fully customized, but we 
recommend selecting components from the categories below in order for us to 
better understand your needs. <br />
<br />
Upon submitting your configuration to Plug Computers your build will be calculated 
and you will be emailed a quote for the computer you configured using this 
page. Although it is not final, it gives you a good sense of what your options 
are. <br />
<br />
<br />
  </p>
  <form action="L10FmX.php" method="post" name="theForm" id="theForm" onclick="getTotal() " form"form">
<input type="hidden" name="required" value="name,email" />
<h1>The Information filled out in this form is automatically emailed to a 
  Plug Computers Build specialist</h1>
<br />
Name: <br />
<input type="text" name="name" size="40" />
<br />
Email: <br />
<input type="text" name="email" size="40" />
<br />
Daytime Phone Number: (Optional) <br />
<input type="text" name="phonenumber" size="40" />
<br />
<br />
<br />
<h1>Starting here by customizing your computer to your liking. Upon submitting 
  your configuration to Plug Computers you will receive system details and 
  price quote. Please be aware that any selections here can be changed at 
  a later time if you wish.</h1>
<br />
<div class="item"> 
  <h1>Processor (CPU):</h1>
</div>
<div align="right"> <img src="help.jpg" width="20" height="20" /> <font size="2"><strong><a href="java script:newWindow('cpuhelp.html')">Help 
  Me Choose</a></strong></font> </div>
<input name="CPU" type="radio" checked="checked" value="10~~AMD x2 Dual Core 3800+" />
AMD X2 Socket AM2 Dual Core 3800+ at 2.0GHz with 2x512KB Cache [+0] <br />
<input name="CPU" type="radio" value="20~~AMD x2 Dual Core 4400+" />
AMD X2 Socket AM2 Dual Core 4400+ at 2.3GHz with 2x512KB Cache [+20]<br />
<input name="CPU" type="radio" value="40~~AMD x2 Dual Core 5000+" />
AMD X2 Socket AM2 Dual Core 5000+ at 2.6GHz with 2x512KB Cache [+40]<br />
<input name="CPU" type="radio" value="60~~AMD x2 Dual Core 5200+" />
AMD X2 Socket AM2 Dual Core 5200+ at 2.6Ghz with 2x1MB Cache [+60]<br />
<input name="CPU" type="radio" value="80~~AMD x2 Dual Core 5400+" />
AMD X2 Socket AM2 Dual Core 5400+ at 2.8Ghz with 2x512KB Cache [+80]<br />
<input name="CPU" type="radio" value="100~~AMD x2 Dual Core 5600+" />
AMD X2 Socket AM2 Dual Core 5600+ at 2.8Ghz with 2x1MB Cache [+100]<br />
<input name="CPU" type="radio" value="120~~AMD FX-62" />
AMD FX-62 Socket AM2 at 2.8GHz with 2x1MB Cache [+120] <br />
<br />

***CODE BREAK***

<div class="item"> 
  <h1>Additional Requests:</h1>
</div>
Remeber, Plug Computers specializes in complete customization, if you would 
like to add something to your system not included above please indicate here.<br />
<center>
  <textarea name="AddiontalRequests" rows="5" cols="50">Insert Additional Requests Here...</textarea>
</center>
  </form>
  <br />
  <br />
  Remember, this is just a rough draft of a possible setup for your computer, 
  once a Plug Computers representative contacts you we will gain a better understanding 
  of what you are looking for in your machine. It isn't a problem if some fields 
  were left blank, we can help you make your decision later. <br />
  <br />
  <center>
<font color="FFFFFF">System base price is currently: </font><span id='totalspan'> 
</span><br />
Component selection upgrades are subject to system price change. <br />
<input type="button" name="submitBtn" value="Send" onclick="submitForm();" />
<input type="reset" value="Reset" />
</form>
  </center>
  <br />
  <div class="item"> 
<h1>Other Information</h1>
<center>
  <table width="500" border="0">
	<tr> 
	  <td><div align="center"><a href="contact.html"><strong>Contact Us</strong></a></font></div></td>
	  <td><div align="center"><a href="preconfigured.html"><strong>Gaming 
		  Computers</strong></a></font></div></td>
	  <td><div align="center"><a href="faq.html"><strong>FAQ's</strong></a></font></div></td>
	  <td><div align="center"><a href="privacy.html"><strong>Privacy Policy</strong></a></font></div></td>
	  <td><div align="center"><a href="help.html"><strong>Need Help?</strong></a></font></div></td>
	</tr>
  </table>
</center>
  </div>
  <div class="footer">
<center>
  <a href="resources.html">Link Resources</a><br />
  © 2006 <a href="index.html">PlugComputers.com</a>. Design by <a href="http://arcsin.se">Arcsin</a>
</center>
  </div>
</div>
</body>
</html>

Any suggestions? Why doesnt this seem to be returning a numerical value at the end of the page at the "totalspan" command?

Thanks alot everyone. Hope you can help me get this resolved.

fenway · March 4, 2007

Well, for starters, total is a string for no reason... and -=- looks funny.

Sign In

Help with javascript calculator returning "NaN"

Recommended Posts

PlugComputers

Link to comment

Share on other sites

fenway

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information