i've got a program that gets input from a user, and then stores it in a cookie. That bit is fine, what is a problem is that its just overwriting the data each time a new entry is made, i believed this to be something do do with it not being numbered entry's, so i added a number into the entry, but for some reason it wont add 1 to the number variable each time the function is called

Can anybody see why?

<html>
<head>
<title>Grader 101</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body,td,th {
	font-family: Calibri, Tahoma, Arial Narrow;
	font-size: 12pt;
}
-->
</style>
<script type="text/javascript">
var num = 0;
function WriteCookie()
{
	var allowed=/^[a-zA-Z]+$/;

	if(document.gradeAdd.studentName.value.match(allowed))
	{
	num = num+1;	
	student=escape(document.gradeAdd.studentName.value)+";";
	score=escape(document.gradeAdd.studentGrade.value)+";";
	document.cookie="Student" + num + "=" + student;
	document.cookie="Score" + num + "=" + score;
	}
	else
	{
		alert("Enter a valid name");
		return;
	}
}

function ReadCookie()
{

   var allcookies = document.cookie;
   alert("All Cookies : " + allcookies );

   cookiearray  = allcookies.split(';');

   for(var i=0; i<cookiearray.length; i++)
   {
      name = cookiearray[i].split('=')[0];
      value = cookiearray[i].split('=')[1];
   }
}
</script>

</head>
<body class="oneColFixCtrHdr">

<div id="container">
  <div id="header">
    <h1>Grader 101  </h1>
  </div>
  <div id="mainContent">
    <form name="gradeAdd" method="post" action="">
      <p>Please enter the student name and the number of marks achieved</p>
      <table width="1211" border="0">
        <tr>
          <td width="113">Student Name:</td>
          <td width="120"><input type="text" name="studentName" size="20"></td>
          <td width="15">&nbsp;</td>
          <td width="124">Student Grade:</td>
          <td width="120"><input type="text" name="studentGrade" size="20"></td>
          <td width="86"><label>
            <input type="submit" name="addItem" id="button" value="Add Details" onClick="WriteCookie()">
          </label></td>
          <td width="105"><label>
            <input type="submit" name="clearRecords" id="button2" value="Clear Records">
          </label></td>
          <td width="494">
          You have approximately   records
          </td>
        </tr>
      </table>
    </form>
    <hr>
    <p>Below are your options to: View the Marks, Show the Mean, Show the Standard Deviation, Show a Graph</p>
    <table width="550" border="0">
      <tr>
        <td><input type="button" name="showMarks" value="Show the Marks" onClick="ReadCookie()"></td>
        <td></td>
        <td><input type="button" name="showMean" value="Show the Mean"></td>
        <td>&nbsp;</td>
        <td><input type="button" name="showStdDev" value="Show the Standard Deviation"></td>
        <td>&nbsp;</td>
        <td><input type="button" name="showGraph" value="Show a Graph"></td>
      </tr>
    </table>
    <hr>
    <p>&nbsp;</p>
</div>
</div>
</body>
</html>

Recommended Answers

All 4 Replies

name = cookiearray[i].split('=')[0];
value = cookiearray[i].split('=')[1];

What is this supposed to do?
This would not read and store the cookies.
You would need to set a variable to the value like so:

name = cookiearray[i].split('=')[0];
value = cookiearray[i].split('=')[1];
window[name]=value;

Also, you would need to store how many have been entered so far in the WriteCookie code like so:

document.cookie="num="+num;

sorry, bit confused by your reply, can you explain a bit more?

ReadCookie did not get the cookies read for other functions to read. At least something must be done to set a variable in your code to the value that you just read, as window[name]=value; does -- it sets the property named name in the window object to be equal to value.
WriteCookie did not store the num as a cookie, and thus num always starts back from 0. The modification to ReadCookie would get num from the cookie, and override num, setting it to the last num saved.

<form name="gradeAdd" method="post" action="">

action="" would not actually work. The form would still be submitted when the submit button is clicked, after it has done the onsubmit code. You would need to change it to:

<form name="gradeAdd" method="post" onsubmit="return false;">

You can accumulate your names/scores in a cookie if you want to but it's not necessary unless you need to remember the values between user sessions - eg. when the user shuts down the computer and starts up the next day.

If you persist with the cookie, then you need to be aware that document.cookie=....; overwrites the entire cookie, so your cookie handling needs to be improved. Suggest you find a good example somewhere in the web (then code your own version of it).

If session-to-session memory is not a requirement then you can simply accumulate all the required values as Javascript variables and/or inset them into the DOM.

The easiest approach by far is, on each validated entry, to:

  • insert names & scores into a div using DOM method xxx.appendChild(.....) .
  • keep running totals in Javascript of N (the number of entries), Sigma-x (the running total score) and Sigma-x-squared (the running sum of squares). This allows you to plug these values straight into the formulae for mean and standard deviation. (which you will either know or can look up on the web).

I suggest you get this working before trying to do fancy stuff like using a cookie, which can then add to the basic functionality.

Airshow

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.