Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

AJAX (Jquery) help needed

tominated

tominated

macrumors 68000
Original poster
Jul 7, 2006
1,723
0
Queensland, Australia
I've started to make a profit management system for my mum, which recently got involved with vending machines, so I decided to make it using jquery. I think most of my code it right, but can someone check it out to see what's wrong.

Code: 
<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<script src="jquery-1.2.1.js" type="text/javascript" charset="utf-8"></script>
	<script src="typewatch1.1.js" type="text/javascript" charset="utf-8"></script>
	
	<script type="text/javascript" charset="utf-8">
		$(function(){
			
			// Set Variables
				// Text field variables
				var NoOfPacks
				var SnacksPerPack
				var PackPrice
				var SnackSellPrice
				var SnacksSold
				
				// Eval Variables
				var TotalSnacks = eval("NoOfPacks*SnacksPerPack");
				var TotalPrice = eval("NoOfPacks*PackPrice");
				var SingleSnackPrice = eval("PackPrice/SnacksPerPack");
				var Revenue = eval("SnackSellPrice*SnacksSold");
				var Profit = eval("Revenue-TotalPrice");
			
			
			// Detect change in "packs" input and set variable
			$('input[name="packs"]').change(function(){
				NoOfPacks = $('input[name="packs"]').val();
				$('input[name="revenue"]').val(Revenue);
				$('input[name="profit"]').val(Profit);
			});
			
			// Detect change in "perpack" input and set variable
			$('input[name="perpack"]').change(function(){
				SnacksPerPack = $('input[name="perpack"]').val();
				$('input[name="revenue"]').val(Revenue);
				$('input[name="profit"]').val(Profit);
			});
			
			// Detect change in "packprice" input and set variable
			$('input[name="packprice"]').change(function(){
				PackPrice = $('input[name="packprice"]').val();
				$('input[name="revenue"]').val(Revenue);
				$('input[name="profit"]').val(Profit);
			});
			
			// Detect change in "sellprice" input and set variable
			$('input[name="sellprice"]').change(function(){
				SnackSellPrice = $('input[name="sellprice"]').val();
				$('input[name="revenue"]').val(Revenue);
				$('input[name="profit"]').val(Profit);
			});
			
			// Detect change in "itemssold" input and set variable
			$('input[name="itemssold"]').change(function(){
				SnacksSold = $('input[name="itemssold"]').val();
				$('input[name="revenue"]').val(Revenue);
				$('input[name="profit"]').val(Profit);
			});
			
		});
	</script>
	
	<title>Vending Profit Calculator</title>
	
</head>

<body>

	<div id="container">
	
		<h1>Vending Machine Profit Calculator</h1>
		
		<div id="options">
			<label for="packs">How Many Packs? </label><input type="text" name="packs" /><br/>
			<label for="perpack">How Many Snacks/Drinks Per Pack: </label><input type="text" name="perpack" /><br/>
			<label for="packprice">Pack Price: $</label><input type="text" name="packprice" /><br/>
			<label for="sellprice">Snack/Drink Selling Price: $</label><input type="text" name="sellprice" /><br/>
			<label for="itemssold">Snacks/Drinks Sold: </label><input type="text" name="itemssold" /><br/><br/>
		</div>
		
		<div id="results">
			<label for="revenue">Total Revenue: </label><input type="text" name="revenue" /><br/>
			<label for="profit">Total Profit: </label><input type="text" name="profit" />
		</div>
	
	</div>

</body>
</html>

What's wrong, is that when a change is detected, instead of filling the revenue and profit boxes with their respective numbers, it fills them with "NaN." Can someone please tell me why this is happening and what I need to do to stop it?
 
OK, I took a little more serious look at the code. I personally don't use the eval function too much so not sure how it works. Just in case you weren't aware, NaN means Not a Number. I think the math being done is trying to treat your numbers as strings. To remedy this you can use functions like parseInt and parseFloat. Example:
HTML: 
var Revenue = parseFloat(SnackSellPrice) * parseFloat(SnacksSold);
Also, in your text field variables section it would be better to do,
HTML: 
var NoOfPacks = 0;
...
I know JavaScript doesn't require initializing variables or using semicolons at the end of lines, but it's still good practice. Initializing them may make them seen as numbers rather than strings later too.
 
Ive never used jQuery, but if your just going to be adding, multi..... simple math. Your code looks very complicated, or maybe im just a bad coder, anyway heres a simple javascript script that adds 2 numbers, im sure you can easily adapt it to fit your needs.

HTML: 
<html>
<head>
<script type="text/javascript" charset="utf-8">

function calc(){
//pulling data from form
var num1 = document.getElementById('num1').value;
var num2 = document.getElementById('num2').value;

//turning string to int
var num1 = parseInt(num1);
var num2 = parseInt(num2);

//calculation
var answer = num1+num2;

//diplay in div tag called disp
document.getElementById('disp').innerHTML = answer;
}
</script>

</head>
<body>
<form>
Num1:
<input type="text" id="num1"><br>
+<br>
Num2:
<input type="text" id="num2"><br>
=
<div id="disp"></div><br>
<input type="button" value="Calculate" onClick="calc();">

</form>
</body>
</html>
 
Your jQuery usage looks fine, but what's up with all the eval's? They are completely unnecessary.

You are also computing values for variables such as TotalSnacks before the variables it depends upon are set. So it's no surprise you are getting NaN's.

P.S. There is no Ajax component to your code, why include it in the title?
 
P.S. If you want quicker answers to questions, the HTML/Javascript forum at saloon.javaranch.com/ is a good resource for JavaScript questions and there are at least a few people who frequent it (myself included) who are highly jQuery-savvy.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back