AJAX (Jquery) help needed

Discussion in 'Web Design and Development' started by tominated, Nov 19, 2007.

  1. tominated macrumors 68000

    tominated

    Joined:
    Jul 7, 2006
    Location:
    Queensland, Australia
    #1
    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?
     
  2. tominated thread starter macrumors 68000

    tominated

    Joined:
    Jul 7, 2006
    Location:
    Queensland, Australia
    #2
    why doesn't anybody respond to my javascript questions?
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    I've never used Jquery or any of the other JavaScript libraries, and I don't want to learn Jquery just to help one person out. That's why. :D
     
  4. tominated thread starter macrumors 68000

    tominated

    Joined:
    Jul 7, 2006
    Location:
    Queensland, Australia
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    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.
     
  6. web_god61 macrumors regular

    web_god61

    Joined:
    May 14, 2004
    #6
    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>
    
     
  7. bootedbear macrumors 6502

    bootedbear

    Joined:
    Sep 13, 2004
    Location:
    Austin, TX
    #7
    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?
     
  8. bootedbear macrumors 6502

    bootedbear

    Joined:
    Sep 13, 2004
    Location:
    Austin, TX
    #8
    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.
     

Share This Page