Javascript alert: Page cannot be refreshed without resending the information?

Hi All,

Please make changes in the below code. Below code does
1. On page load, it will display current week, month and year in the dropdowns and start date and end date.
2. User can select any week and month and click on submit button, will display the selected weeks start date and end date and also  retain the selection.

Please make changes in the attached code so that same functionality will still work and alert popup will be gone.

EVERYTHING IS WORKING FINE
PROBLEM: After form submit, if User refreshes the page , javascript alert will popup and its saying "page cannot be refreshed without resending the information."

Please make changes in the code so that this alert will be gone away.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script src="cookie.js" type="text/javascript"></script>
 
<script type="text/javascript">
/* Set weeks in month script
   Copyright (c) 2003-2009 Michel Plungjan "javascripts (a) plungjan.name" - comments welcome
   If you found it useful, please visit http://plungjan.name/reward.html
   or help an artist/musician at http://talent-aid.org/
*/
 
// Change the values below if needed:
var adjustYears=true; // fix the year drop down to be around now. If false, years must be hardcoded in form
var yearAdjustment=0; // how many years prior to this year
var numberOfYears =10; // how many years in the dropdown
var yearsDescending = true; // count down = true, up = false
var useWeeks = true; // true uses weeks, false uses days in the day dropdown
 
var monthNames = "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec".split(',');
var suf = "th,st,nd,rd".split(',')
function setDate(theForm) {
  var year = theForm.year.options[theForm.year.selectedIndex].value
  var month = theForm.month.selectedIndex
  setDayOrWeek(theForm,year,month)
  reportDay(theForm)
 }
function addSuffix(day) {
  var str = day.toString();
  var lastDigit = str.substring(str.length-1);
  return suf[lastDigit]?suf[lastDigit]:"th"
}
 
function reportDay(theForm,submitting) {
  var yyyy = theForm.year.value;
  var mm = theForm.month.selectedIndex;
  var dates=new Array();
  var day = theForm.day.value;
  var startDate = new Date(yyyy,mm,day,0,0,0)
  if (useWeeks) {
   for (var i=0;i<7;i++)
   {
    dates[i]=startDate.getTime();
   startDate.setDate(startDate.getDate()+1)
  }
}
  else dates[0]=startDate.getTime();
  show(dates)
  if (submitting) {
    mm+=1; // js months start at 0
    if (mm<10) mm="0"+mm;
    if (setCookie) setCookie('week',yyyy+''+mm+''+theForm.day.selectedIndex)
 }
 
}
function fmtDate(timeStamp) {
  var d = new Date(timeStamp)
  var yy = d.getFullYear().toString().substring(2)
  var mm = d.getMonth()+1;
  if (mm<10) mm="0"+mm; // comment this out if you do not want padding with 0
  var dd = d.getDate();
  if (dd<10) dd="0"+dd; // comment this out if you do not want padding with 0
  return ""+mm+"/"+dd+"/"+yy;
}
function show(dates) {
  var d1 = fmtDate(dates[0])
  var d2 = (dates.length>1)?fmtDate(dates[dates.length-1]):"";
 
  var text = 'Start date: ' + d1 + ((dates.length==1)?'':'<br />End date: ' +d2)
  document.getElementById("datesDiv").innerHTML = text;
  document.getElementById('formdate1').value=d1;
  document.getElementById('formdate2').value=d2;
}
 
function setDayOrWeek(theForm,year,month) {
  var d = new Date(year,month+1,0); // last day in the previous month because months start on 0
//var now = new Date();
  var daysInMonth = d.getDate();
  theForm.day.options.length=29;// save the minimum days
  if (useWeeks) {
    var selectedWeek = 0;
    theForm.day.options.length=0;
    var thisWeek = 0;
    for (i=1;i<=daysInMonth;i++) {
      d.setDate(i);
      if (d.getDay()==1) {
        theForm.day.options.length++;
        theForm.day.options[theForm.day.options.length-1] = new Option("The week of the "+i+addSuffix(i)+" of " +monthNames[month],i)
      }
      if (now.getDate()==d.getDate()) {
        thisWeek = theForm.day.options.length-1;
      }
    }
    theForm.day.selectedIndex=thisWeek
  }
  else if (daysInMonth>28) for (i=29;i<=daysInMonth;i++) {
    theForm.day.options.length++;
    theForm.day.options[theForm.day.options.length-1] = new Option(i,i)
  }
  if (now.getFullYear()!=year || now.getMonth() != month) {
    theForm.day.selectedIndex=0;
  }
 
}
function setNow() {
  now = new Date()
  var dow = now.getDay()
  if ( dow != 1 ) {
    now.setDate( now.getDate() - ( ( dow == 0 ) ? 6 : ( dow - 1 ) ) )
  }
 
  var ySel = document.forms[0].year;
  var mSel = document.forms[0].month;
  var dSel = document.forms[0].day;
 
  var year = now.getFullYear();
 
  if (adjustYears) {
    ySel.options.length=0; // remove all
 
    var firstYear = year + yearAdjustment;
    if (yearsDescending ) {
      firstYear = year - yearAdjustment;
      for (var i=firstYear, n=firstYear-numberOfYears;i>=n;i--) {
        ySel.options.length++
        ySel.options[ySel.options.length-1] = new Option(i,i)
      }
    }
    else for (var i=firstYear, n=firstYear+numberOfYears;i<n;i++) {
      ySel.options.length++
      ySel.options[ySel.options.length-1] = new Option(i,i)
    }
  }
  var minYear = parseInt(ySel.options[0].value);
  var diff = year-minYear;
  ySel.selectedIndex=((diff)>0)?diff:0;
 
  mSel.selectedIndex = now.getMonth();
  if (!useWeeks) dSel.selectedIndex = now.getDate()-1; // NB: Now 0 based
 
}
window.onload=function() {
  setNow()
  setDate(document.forms[0])
 
  var cook = getCookie('week');
  if (cook) {
    var yyyy = cook.substring(0,4)
    var month = cook.substring(4,6);
    month-=1; // js months start at 0
    var weekIdx = cook.substring(6);
    for (var i=0;i<document.forms[0].year.length;i++) {
      if (document.forms[0].year.options[i].value==yyyy) {
        document.forms[0].year.options[i].selected=true;
        break
      }
    }
    setDate(document.forms[0])
    document.forms[0].month.selectedIndex=month;
    setDate(document.forms[0])
    document.forms[0].day.selectedIndex=weekIdx;
  }
}
</script>
</head>
 
 
<body>
<form onSubmit="reportDay(this,true); " method="post">
<input type="hidden" id="Hidden1" name="formdate1" />
<input type="hidden" id="Hidden2" name="formdate2" />
<select name="year" onChange="setDate(this.form)">
</select>
<select name="month" onChange="setDate(this.form)">
<option value="1">Jan
<option value="2">Feb
<option value="3">Mar
<option value="4">April
<option value="5">May
<option value="6">June
<option value="7">July
<option value="8">Aug
<option value="9">Sep
<option value="10">Oct
<option value="11">Nov
<option value="12">Dec
</select>
<select name="day" ><!-- Use all days to help NS4 -->
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
<option value="10">10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value="15">15
<option value="16">16
<option value="17">17
<option value="18">18
<option value="19">19
<option value="20">20
<option value="21">21
<option value="22">22
<option value="23">23
<option value="24">24
<option value="25">25
<option value="26">26
<option value="27">27
<option value="28">28
<option value="29">29
<option value="30">30
<option value="31">31
</select>
<br /><input type="submit" />
</form>
<hr />
<div id="datesDiv"></div>
</body>
</html>

Open in new window

Saroj13Asked:
Who is Participating?
 
erikTsomikConnect With a Mentor System Architect, CF programmer Commented:
i do not get an alert all i get is the error in this line
  var cook = getCookie('week');
0
 
erikTsomikSystem Architect, CF programmer Commented:
i do not get this alert
0
 
erikTsomikSystem Architect, CF programmer Commented:
what browser are you using (I am on the IE 7)
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Saroj13Author Commented:
You will get alert only once you will click on form submit.
You will get alert when button is clicked. And then you will do page refresh.

I am having IE6
0
 
Saroj13Author Commented:
Please see the below code. cookie error will be  gone.

In this code, i am doing form submit using metjod="post". If you just see the html code, it works fine, But the place where I am using the code is giving me the error saying "page cannot be refreshed without resending the information" . This error comes after button click and then page refreshes.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
 
 
<script type="text/javascript">
var daysToKeep = 14; // default cookie life...
var today      = new Date(); 
var expiryDate = new Date(today.getTime() + (daysToKeep * 86400000));
 
 
/* Cookie functions originally by Bill Dortsch */
function setCookie (name,value,expires,path,theDomain,secure) { 
   value = escape(value);
   var theCookie = name + "=" + value + 
   ((expires)    ? "; expires=" + expires.toGMTString() : "") + 
   ((path)       ? "; path="    + path   : "") + 
   ((theDomain)  ? "; domain="  + theDomain : "") + 
   ((secure)     ? "; secure"            : ""); 
   document.cookie = theCookie;
} 
 
function getCookie(Name) { 
   var search = Name + "=" 
   if (document.cookie.length > 0) { // if there are any cookies 
      var offset = document.cookie.indexOf(search) 
      if (offset != -1) { // if cookie exists 
         offset += search.length 
         // set index of beginning of value 
         var end = document.cookie.indexOf(";", offset) 
         // set index of end of cookie value 
         if (end == -1) end = document.cookie.length 
         return unescape(document.cookie.substring(offset, end)) 
      } 
   } 
} 
function delCookie(name,path,domain) {
   if (getCookie(name)) document.cookie = name + "=" +
      ((path)   ? ";path="   + path   : "") +
      ((domain) ? ";domain=" + domain : "") +
      ";expires=Thu, 01-Jan-70 00:00:01 GMT";
} 
 
// Change the values below if needed:
var adjustYears=true; // fix the year drop down to be around now. 
var yearAdjustment=0; // how many years prior to this year
var numberOfYears =2; // how many years in the dropdown
var yearsDescending = true; // count down = true, up = false
var useWeeks = true; // true uses weeks, false uses days in the day dropdown
 
var monthNames = "January,February,March,April,May,June,July,August,September,October,November,December".split(',');
 
//----------------------------------------------------------------------------
// Name: setDate()
// Role: Using current form values, populate the day (week) option list, &
//       display starting & optional end dates.
//----------------------------------------------------------------------------
function setDate(theForm) {
  var year = theForm.year.options[theForm.year.selectedIndex].value
  var month = theForm.month.selectedIndex
  setDayOrWeek(theForm,year,month)
  reportDay(theForm)
}
 
//----------------------------------------------------------------------------
// Name: addSuffix()
// Role: Given an integer representing the day of the month, return the
//       proper suffix
var suf = "th,st,nd,rd".split(',')
function addSuffix(day) {
  var str  = ' ' + day                     // 
 var len  = str.length                    // Number of positions
 var tens = str.substr( len - 2, 1 )      // Tens place
 var ones = str.substr( len - 1, 1 )      // Ones place
 return ( tens == '1' ) ? 'th' : ( ones in suf ) ? suf[ ones ] : 'th'
}
 
//----------------------------------------------------------------------------
// Name: reportDay()
// Role: Use the selected year and month, to update the starting & ending dates
//----------------------------------------------------------------------------
function reportDay(theForm,submitting) {
  var yyyy = theForm.year.value;
  var mm = theForm.month.selectedIndex;
  var dates=new Array();
  var day = theForm.day.value;
  var startDate = new Date(yyyy,mm,day,0,0,0)
  if (useWeeks) {
    for (var i=0;i<7;i++) {
      dates[i]=startDate.getTime();
      startDate.setDate(startDate.getDate()+1)
    }
  } else
    dates[0]=startDate.getTime();
  show(dates)
  if (submitting) {
    mm+=1; // js months start at 0
    if (mm<10) mm="0"+mm;
    if (setCookie) setCookie('week',yyyy+''+mm+''+theForm.day.selectedIndex)
  }
}
 
//----------------------------------------------------------------------------
// Name: fmtDate()
// Role: Convert given date into mm/dd/yy string
//----------------------------------------------------------------------------
function fmtDate(timeStamp) {
  var d = new Date(timeStamp)
  var yy = d.getFullYear().toString().substring(2)
  var mm = d.getMonth()+1;
  if (mm<10) mm="0"+mm; // comment this out if you do not want padding with 0
  var dd = d.getDate();
  if (dd<10) dd="0"+dd; // comment this out if you do not want padding with 0
  return ""+mm+"/"+dd+"/"+yy;
}
 
//----------------------------------------------------------------------------
// Name: show()
// Role: Format the given date(s) into a starting & optional ending date
//----------------------------------------------------------------------------
function show(dates) {
  var d1 = fmtDate(dates[0])
  var d2 = (dates.length>1)?fmtDate(dates[dates.length-1]):"";
 
  var text = 'Start date: ' + d1 + ((dates.length==1)?'':'<br />End date: ' +d2)
  document.getElementById("datesDiv").innerHTML = text;
  document.getElementById('formdate1').value=d1;
  document.getElementById('formdate2').value=d2;
}
 
//----------------------------------------------------------------------------
// Name: setDayOrWeek()
// Role: Populate the day (week) option list, and select the desired option.
//----------------------------------------------------------------------------
function setDayOrWeek(theForm,year,month) {
  var d = new Date(year,month+1,0); // last day in the previous month because months start on 0
//var now = new Date();
  var daysInMonth = d.getDate();
  theForm.day.options.length=29;// save the minimum days
  if (useWeeks) {
    var selectedWeek = 0;
    theForm.day.options.length=0;
    var thisWeek = 0;
    for (i=1;i<=daysInMonth;i++) {
      d.setDate(i);
      if (d.getDay()==1) {
        theForm.day.options.length++;
    	theForm.day.options[theForm.day.options.length-1] = new Option("Week of " +monthNames[month] + " "  +i+ addSuffix(i) +" ",i)
			    }
      if (now.getDate()==d.getDate()) {
        thisWeek = theForm.day.options.length-1;
      }
    }
    theForm.day.selectedIndex=thisWeek
  }
  else if (daysInMonth>28) for (i=29;i<=daysInMonth;i++) {
    theForm.day.options.length++;
    theForm.day.options[theForm.day.options.length-1] = new Option(i,i)
  }
  if (now.getFullYear()!=year || now.getMonth() != month) {
    theForm.day.selectedIndex=0;
  }
}
 
//----------------------------------------------------------------------------
// Name: setNow()
// Role: Dynamically build the year dropdown select list, and select the year,
//       month, and day (week) entries based upon today's date.
//----------------------------------------------------------------------------
function setNow() {
  now = new Date()
 
  var dow = now.getDay() 
 
  if ( dow != 1 ) {
    now.setDate( now.getDate() - ( ( dow == 0 ) ? 6 : ( dow - 1 ) ) )
  }
 
  var ySel = document.forms[0].year;
   
  var mSel = document.forms[0].month;
  var dSel = document.forms[0].day;
 
  var year = now.getFullYear();
 
  if (adjustYears) {
    ySel.options.length=0; 
 
    var firstYear = year + yearAdjustment; 
   
    if (yearsDescending ) {
      firstYear = year - yearAdjustment;
      for (var i=firstYear, n=firstYear-numberOfYears;i>=n;i--) {
        ySel.options.length++
        ySel.options[ySel.options.length-1] = new Option(i,i)
      }
    }
    else for (var i=firstYear, n=firstYear+numberOfYears;i<n;i++) {
      ySel.options.length++
      ySel.options[ySel.options.length-1] = new Option(i,i)
    }
  }
  var minYear = parseInt(ySel.options[0].value);
  var diff = year-minYear;
  ySel.selectedIndex=((diff)>0)?diff:0; 
  
 
  mSel.selectedIndex = now.getMonth();
 
  if (!useWeeks) dSel.selectedIndex = now.getDate()-1; // NB: Now 0 based
 
}
 
//----------------------------------------------------------------------------
// Name: 
// Role: Function executed when page is first loaded to initialize all of the
//       SELECT dropdowns.
//----------------------------------------------------------------------------
window.onload=function() {
  setNow()
  setDate(document.forms[0])
 
  var cook = getCookie('week');
  if (cook) {
    var yyyy = cook.substring(0,4)
    var month = cook.substring(4,6);
    month-=1; // js months start at 0
    var weekIdx = cook.substring(6);
    for (var i=0;i<document.forms[0].year.length;i++) {
      if (document.forms[0].year.options[i].value==yyyy) {
        document.forms[0].year.options[i].selected=true;
        break
      }
    }
    setDate(document.forms[0])
    document.forms[0].month.selectedIndex=month;
    setDate(document.forms[0])
    document.forms[0].day.selectedIndex=weekIdx;
  }
}
</script>
</head>
 
 
<body>
<form onSubmit="reportDay(this,true); " method="post" action="Final.htm">
<input type="hidden" id="Hidden1" name="formdate1" />
<input type="hidden" id="Hidden2" name="formdate2" />
<select name="year" onChange="setDate(this.form)">
</select>
<select name="month" onChange="setDate(this.form)">
<option value="1">Jan
<option value="2">Feb
<option value="3">Mar
<option value="4">April
<option value="5">May
<option value="6">June
<option value="7">July
<option value="8">Aug
<option value="9">Sep
<option value="10">Oct
<option value="11">Nov
<option value="12">Dec
</select>
<select name="day" >
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
<option value="10">10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value="15">15
<option value="16">16
<option value="17">17
<option value="18">18
<option value="19">19
<option value="20">20
<option value="21">21
<option value="22">22
<option value="23">23
<option value="24">24
<option value="25">25
<option value="26">26
<option value="27">27
<option value="28">28
<option value="29">29
<option value="30">30
<option value="31">31
</select>
<br /><input type="submit" />
</form>
<hr />
<div id="datesDiv"></div>
</body>
</html>

Open in new window

0
 
erikTsomikSystem Architect, CF programmer Commented:
i believe it has something to do with your browser
0
 
Saroj13Author Commented:
Its nothing with the browser.
0
 
erikTsomikSystem Architect, CF programmer Commented:
then how come i do not get this alert box, and you do not have it in your code
0
 
Saroj13Author Commented:
alert comes when you click on submit button and then page refresh.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.