Input in a text box still appear after page refresh for IE but not FF, Chrome, Opera

I want to keep the value of the user input (e.g. text box value) displayed after page refresh by a javascript.
The following test web page is used.
The alerts appear before and after the page refresh as expected on all browsers (FF, Chrome, Opera & IE).
The input value in a text box still appear after page refresh for IE but not FF, Chrome, Opera.
Please help to make it work for FF, Chrome, Opera.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>Cookie</title>
   </head>
   
   <body>
      <div>
         <br>
         Rows Per Page
         <input type="text" name="rowsPerPage" id="rowsPerPage" />
         <input type="submit" value="savevalue" onClick="savevalue()">
      </div>
      <script type="text/javascript" src="js/prototype.js"></script>
      <script type="text/javascript" src="js/Cookie.js"></script>
      <script type="text/javascript">
         Cookie.init({name: 'mydata'});

         function savevalue() {
            var rowsPerPageElem = document.getElementById("rowsPerPage");
            alert('rowsPerPageElem.value ' + rowsPerPageElem.value);
            Cookie.setData('rowsPerPage', rowsPerPageElem.value);

            window.location.reload(true);
            var rowsPerPage = Cookie.getData('rowsPerPage');

            alert(' rowsPerPage ' + rowsPerPage);

            var rowsPerPageElem = document.getElementById("rowsPerPage");
            rowsPerPageElem.value = rowsPerPage;
         }
      </script>
   </body>
</html>

When the page loads, you should check to see if a cookie exists with a value. if so, use the value to set the form input element. Do this before setting a value for the cookie, otherwise you clobber any value that might currently exist.

When you reload the web page, the browser doesn’t start executing the javascript again on the line it was at before. It starts completely over, at the top of your html file.

This still does not work:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>Cookie</title>
   </head>
   
   <body onload=init();>
      <div>
         <br>
         Rows Per Page
         <input type="text" name="rowsPerPage" id="rowsPerPage" />
         <input type="submit" value="savevalue" onClick="savevalue()">
      </div>
      <script type="text/javascript" src="js/prototype.js"></script>
      <script type="text/javascript" src="js/Cookie.js"></script>
      <script type="text/javascript">

         var rowsPerPage;

         var rowsPerPageElem = document.getElementById("rowsPerPage");
         if (rowsPerPageElem.value == '') {
	    rowsPerPage = Cookie.getData('rowsPerPage');
	    if (rowsPerPage != undefined && rowsPerPage != '')
	       rowsPerPageElem.value = rowsPerPage;
	 }
         alert('rowsPerPageElem.value ' + rowsPerPageElem.value);

         function init(v) {
	    Cookie.init({name: 'mydata4', expires: 90}); 
         }

         function savevalue() {
            var rowsPerPageElem = document.getElementById("rowsPerPage");
            alert('savevalue rowsPerPageElem.value ' + rowsPerPageElem.value);
            Cookie.setData('rowsPerPage', rowsPerPageElem.value);

            window.location.reload(true);
         }
      </script>
   </body>
</html>

Why are you having javascript refresh the page?

I use javascript “window.location.reload(true);” to refresh the page because I plan to use AJAX to poll a database periodically in the future. If new data is returned, then the page is updated, otherwise the page will not be updated.

Well… if you’re using AJAX you don’t need to refresh the page… do you? Just update the data with javscript. The true meaning of AJAX is that the page never has to be refreshed, content can be updated without refreshing.

I’d say you’re attacking the wrong problem here. Don’t refresh, use javascript to update the content.

I’m not familiar with prototype, nor your Cookie object, but, maybe you need to call init() before you try to read or write the cookie?