?
Solved

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

Posted on 2009-04-17
9
Medium Priority
?
960 Views
Last Modified: 2012-05-06
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

0
Comment
Question by:Saroj13
  • 5
  • 4
9 Comments
 
LVL 19

Expert Comment

by:erikTsomik
ID: 24171100
i do not get this alert
0
 
LVL 19

Expert Comment

by:erikTsomik
ID: 24171103
what browser are you using (I am on the IE 7)
0
 

Author Comment

by:Saroj13
ID: 24171130
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 19

Accepted Solution

by:
erikTsomik earned 1500 total points
ID: 24171165
i do not get an alert all i get is the error in this line
  var cook = getCookie('week');
0
 

Author Comment

by:Saroj13
ID: 24171267
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
 
LVL 19

Expert Comment

by:erikTsomik
ID: 24171397
i believe it has something to do with your browser
0
 

Author Comment

by:Saroj13
ID: 24171404
Its nothing with the browser.
0
 
LVL 19

Expert Comment

by:erikTsomik
ID: 24171439
then how come i do not get this alert box, and you do not have it in your code
0
 

Author Comment

by:Saroj13
ID: 24171448
alert comes when you click on submit button and then page refresh.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question