Hi I am quite new to web developing and I am starting to struggling with this code. I am basically trying to enter a name along with a mark and store this in a javascript cookie. From this I want to create the mean and graph for up to 100 results.

This is the code:

<html>
	<head>
		<title>Class Marks Calculator</title>
		<link rel="stylesheet" type="text/css" href="site.css" />	
		
		<script type="text/javascript">
			var num = 0;
			
			function createcookie()
			{
				
					if(num<100)
					{
						num = num + 1;
						var name = escape(document.marks.name.value)+";";
						var mark = escape(document.marks.mark.value)+";";
						document.cookie[0]= "name = "+name+ " mark = "+mark;
						
					}
					else
					{
						alert("Max marks exceeded");
					}
			}
			
			function readCookie(name)
			{
				var nameEQ = name +"=";
				var ca = document.cookie.split(';');
				
				
				//for(var i=0;i<ca.length;i++)
				//{
					var i = 0;
					var c = ca[i];
					while(c.charAt(0)==' ') 
						document.write("value is "+ c.substring(nameEQ.length, c.length));	
					
				//}
				return null;
			}
			
			function eraseCookie()
			{
				createCookie(name,"",-1);
			}
		</script>
		
	</head>
	
	<body>
	
		<center>
							
			<div id="container">
					
				<div id="logo">
					<p align="left">
						<img src="logo.jpg" width="400" height="90" alt="logo" />
					</p>
				</div>
				
			<center>	
			<div id="linksContainer">	
				<a href="page1.htm">Graphs and Charts</a>&nbsp;|&nbsp;<a href="page2.htm">Statistics</a>&nbsp;|&nbsp;<a href="page3.htm">Previous Calculations</a>
			</div>
   
			</center>
		
			<div id="textContainer">
				<h1><p align="left">Home Page</p></h1>
				<br />
				
				<p>Please enter the name of student and the mark they achieved:</p>
				
					<form name="marks">
						<table>
							<tr><td>Student Name:</td><td><input type="text" name="name" size="20" /></td></tr>
							<tr><td>Student Mark:</td><td><input type="text" name="mark" size="20" /></td></tr>
							<tr><td><input type="button" value="Create Cookie" onclick="createcookie()" /></td></tr>
							<tr><td><input type="button" value="Get Cookie" onclick="readCookie('bob')" /></td></tr>
						</table>
					</form>
						<br />			
			</div>
			
			</div>
		</center>
	
	</body>
</html>

I have been working on this for hours and do not understand where I am going wrong.

Thanks in advance

Recommended Answers

All 5 Replies

The problem is at line 17

document.cookie[0]= "name = "+name+ " mark = "+mark;

To store a cookie you will have to use document.cookie and not document.cookie[0]
i.e. use

document.cookie= "name = "+name+ " mark = "+mark;

If you want to have multiple names you can use

document.cookie= "name1 = "+name+ " mark1 = "+mark;
document.cookie= "name2 = "+name+ " mark2 = "+mark;
.....

This appends the string 'name2' in cookie and not does not replace 'nam1'.

Here is a nice tutorial on cookies in Javascript
http://www.quirksmode.org/js/cookies.html

Thank you for your help! is there a better way of doing it than my code as I may have to add up to 100 entries?

Thanks again

There are many ways to store data but the best one depends on the usage scenario.
You can enter the data, store it in database and use it later to show graph. But for this you will need server side processing like PHP, ASP, JSP etc. as javascript is seldom used for server side scripting.
You can even use session/request objects to store the data entered if you are not going to use any d/b but are going to use server side scripting.
If you are using only HTML and Javascript than storing data in cookie seems a good option. But there are also pros and cons of using cookie to store data

Generally you can't get a client browser to store more than 20 cookies from the same website.

Generally you can't get a client browser to store more than 20 cookies from the same website.

In RFC-compliant browsers you can make each of the [minimum of] 20 cookies per domain quite large (4096 bytes, including overhead).

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.