[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 295
  • Last Modified:

Reset Dates based on dropdown Value

Hi Experts,

            I have a form(Snapshot attached) with a dropdown fields (Daily, Weekly, Monthly, Quarterly, Annualy, 12_Month_Rolling).

            Based on these options, the default values on From and To fields are shown when the page first loads. Default are something like (To: Todays date and From date would be Todays- 5) Same goes for all other options.

            Earlier I used for face problem with reseting the form when page loads the second time(On click of Update Chart button), but with complete of one of the experts here, I was able to fix that problem. The code I got for that issue is in this link:

 http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_24556741.html

   This only resets the Dropdown value, not the From and To. I tried on my own, but Honestly now I have no clue to to do it. Can you please help meout resetting the whole form.(Even after submitting the form.)

           
<script>
 
var timelineGaps = new Array();
 
timelineGaps["Daily"] = 5;
timelineGaps["Weekly"] = 30;
timelineGaps["Monthly"] = 150;
timelineGaps["Quarterly"] = 450;
timelineGaps["Annually"] = 600;
 
//max limit
var timelineGapsMax = new Array();
 
timelineGapsMax["Daily"] = 31;
timelineGapsMax["Weekly"] = 105;
timelineGapsMax["Monthly"] = 456;
timelineGapsMax["Quarterly"] = 730;
timelineGapsMax["Annually"] = 1725;
 
function validateDates() {
// get all the inputs
var from = document.getElementById('from_date');
var to = document.getElementById('to_date');
var timeline = document.getElementById('tm');
 
var minutes = 1000 * 60;
var hours = minutes * 60;
var days = hours * 24;
 
var df = Date.parse(from.value);
var dt = Date.parse(to.value);
var gap = (dt - df)/days;
 
if (df > dt) {
       alert('From date is higher than To date. Please reenter the
dates correctly!');
} else if (timelineGaps[timeline.value] > gap ) {
alert('Date ranges are entered incorrectly. Please note that you need to
enter atleast 5 days for Daily ,5 weeks for Weekly ,5 months for Monthly
,5 quarters for Quarterly & 2 years for Annually choices!');
   return false;
} else if (timelineGapsMax[timeline.value] < gap ) {
       alert('The dates selected do not agree with the time period,
please re-enter the calendar dates. Limits:     Daily:31 days
Weekly:15 weeks Monthly:15 months Quarterly:8 quarters  Annually:2
years.');
       return false;
       }
  return true;
}
</script>
 
<script>
 
function setDefaultDates() {
       var freq = document.getElementById('tm').value;
       //alert(freq);
 
               var dt=new Date();
               var oneDay = 1000*60*60*24;
               var fiveWeeks = oneDay * 36;
               var fiveMonths = oneDay * 152;
               var fiveQuarters = oneDay * 456;
               var annual = oneDay * 1000;
               var rollMonth = oneDay * 365;
 
               var eDay=dt.getDate()-1;
               var eMonth=dt.getMonth() + 1;
               var eYear=dt.getFullYear();
 
               //daily
               var sDay=dt.getDate()-6;
               var sMonth=dt.getMonth() + 1;
               var sYear=dt.getFullYear();
 
               //weekly
               var wklyEndDt = new Date(dt.getTime() - fiveWeeks);
               //alert(wklyEndDt);
               var wklyDay;
               var wklyModifiedDay = wklyEndDt.getDay();
               if (wklyModifiedDay == 6) {
                       wklyDay = wklyEndDt.getDate();
               } else if (wklyModifiedDay == 5) {
                       wklyDay = new Date((wklyEndDt.getTime() +
oneDay)).getDate();
               } else if (wklyModifiedDay == 4) {
                       wklyDay = new Date((wklyEndDt.getTime() + 2 *
oneDay)).getDate();
               } else if (wklyModifiedDay == 3) {
                       wklyDay = new Date((wklyEndDt.getTime() + 3 *
oneDay)).getDate();
                       //alert(wklyDay);
               } else if (wklyModifiedDay == 2) {
                       wklyDay = new Date((wklyEndDt.getTime() + 4 *
oneDay)).getDate();
               } else if (wklyModifiedDay == 1) {
                       wklyDay = new Date((wklyEndDt.getTime() + 5 *
oneDay)).getDate();
               } else if (wklyModifiedDay == 0) {
                       wklyDay = new Date((wklyEndDt.getTime() + 6 *
oneDay)).getDate();
               }
 
               var wklyMonth = wklyEndDt.getMonth()+1;
               var wklyYear = wklyEndDt.getFullYear();
               //alert(wklyMonth + "/" + wklyDay + "/" + wklyYear);
 
               //monthly
               var monthlyEndDt = new Date(dt.getTime() - fiveMonths);
               //var monthlyDay = monthlyEndDt.getDate();
               var monthlyDay = 1;
               var monthlyMonth = monthlyEndDt.getMonth()+1;
               var monthlyYear = monthlyEndDt.getFullYear();
               //alert(monthlyMonth + "/" + monthlyDay + "/" +
monthlyYear);
 
               //quarterly
               var qrlyEndDt = new Date(dt.getTime() - fiveQuarters);
               //var qrlyDay = qrlyEndDt.getDate();
               var qrlyDay = 1;
               var qrlyMonth = qrlyEndDt.getMonth()+1;
               var qrlyYear = qrlyEndDt.getFullYear();
               //alert(qrlyMonth + "/" + qrlyDay + "/" + qrlyYear);
 
               //Annually
               var yrlyEndDt = new Date(dt.getTime() - annual);
               //var yrlyDay = yrlyEndDt.getDate();
               var yrlyDay = 1;
               var yrlyMonth = yrlyEndDt.getMonth()+1;
               var yrlyYear = yrlyEndDt.getFullYear();
               //alert(yrlyMonth + "/" + yrlyDay + "/" + yrlyYear);
 
               //12 month rolling
               var rollEndDt = new Date(dt.getTime() - rollMonth);
               //var rollDay = rollEndDt.getDate();
               var rollDay = 1;
               var rollMonth = rollEndDt.getMonth()+1;
               var rollYear = rollEndDt.getFullYear();
               //alert(rollMonth + "/" + rollDay + "/" + rollYear);
 
               if (freq == "Daily")
               {
                       document.getElementById("to_date").value =
eMonth + "/" + eDay + "/" + eYear;
                       document.getElementById("from_date").value =
sMonth + "/" + sDay + "/" + sYear;
               } else if (freq == "Weekly")
               {
                       document.getElementById("to_date").value =
eMonth + "/" + eDay + "/" + eYear;
                       document.getElementById("from_date").value =
wklyMonth + "/" + wklyDay + "/" + wklyYear;
               } else if (freq == "Monthly")
               {
                       document.getElementById("to_date").value =
eMonth + "/" + eDay + "/" + eYear;
                       document.getElementById("from_date").value =
monthlyMonth + "/" + monthlyDay + "/" + monthlyYear;
               } else if (freq == "Quarterly")
               {
                       document.getElementById("to_date").value =
eMonth + "/" + eDay + "/" + eYear;
                       document.getElementById("from_date").value =
qrlyMonth + "/" + qrlyDay + "/" + qrlyYear;
               } else if (freq == "Annually")
               {
                       document.getElementById("to_date").value =
eMonth + "/" + eDay + "/" + eYear;
                       document.getElementById("from_date").value =
yrlyMonth + "/" + yrlyDay + "/" + yrlyYear;
               } else if (freq == "12_Month_Rolling")
               {
                       document.getElementById("to_date").value =
eMonth + "/" + eDay + "/" + eYear;
                       document.getElementById("from_date").value =
rollMonth + "/" + rollDay + "/" + rollYear;
               }
       }
</script>

Open in new window

reset.png
0
aman0711
Asked:
aman0711
  • 30
  • 29
1 Solution
 
HonorGodCommented:
Can you explain to what values the From/To should be reset?
0
 
aman0711Author Commented:
Sure Sir,
                  These are gap values for From and To:
                 timelineGaps["Daily"] = 5;
                 timelineGaps["Weekly"] = 30;
                 timelineGaps["Monthly"] = 150;
                 timelineGaps["Quarterly"] = 450;
                 timelineGaps["Annually"] = 600;
                 First the page would load with Monthly, and From - To = 150 days... Now lets say user entered its own dates and Click Update Chart to get fresh data.. once he gets the data and Clicks reset to default then He Should See Monthly(which was fixed by other expert) and From and To dates resetted to Todays Date - 150 days.
                 Hope I explained it fine :)
   
0
 
HonorGodCommented:
hm.  I "think" I see.

While I was looking at your code, I saw this nested if...

  if ( wklyModifiedDay == 6 ) {
    wklyDay = wklyEndDt.getDate();
  } else if ( wklyModifiedDay == 5 ) {
    wklyDay = new Date( ( wklyEndDt.getTime() + oneDay ) ).getDate();
  } else if ( wklyModifiedDay == 4 ) {
    wklyDay = new Date( ( wklyEndDt.getTime() + 2 * oneDay ) ).getDate();
  } else if ( wklyModifiedDay == 3 ) {
    wklyDay = new Date((wklyEndDt.getTime() + 3 * oneDay)).getDate();
    //alert( wklyDay );
  } else if ( wklyModifiedDay == 2 ) {
    wklyDay = new Date((wklyEndDt.getTime() + 4 * oneDay)).getDate();
  } else if ( wklyModifiedDay == 1 ) {
    wklyDay = new Date((wklyEndDt.getTime() + 5 * oneDay)).getDate();
  } else if ( wklyModifiedDay == 0 ) {
    wklyDay = new Date((wklyEndDt.getTime() + 6 * oneDay)).getDate();
  }

Do you know that there is a much easier way to do this?
You can greatly simplify things once you realize that the wklyModifiedDay values are all integers from 0..6
and that given one of these values, you want wklyDay to be a future date from 0..6 days in the future, and that the relationship between wklyModifiedDay and the number of days to be added is an inverse relationship.

So when wklyModifiedDay == 6 => add 0 days,
when wklyModifiedDay == 5 => add 1 day,
when wklyModifiedDay == 4 => add 2 days, and so on.

So, if we subtract wklyModifiedDay from 6, we get the number of days to be added, and this collection of nested if statements can be replaced by:

wklyDay = new Date( ( wklyEndDt.getTime() + ( 6 - wklyModifiedDay ) * oneDay ) ).getDate();


Where is the current "reset" routine?
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
aman0711Author Commented:
Current Reset Rountin?
 
You mean the HTML form that is reseting it?
this is here:
 http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_24556741.html

Actually my colleague wrote that big chunk of code. We are newbies in this :)
And if I am correct, then we were given a task that, From date on weekly, should always be the first day of the week. I guess thats why he did that.
So now the requirement dropped down to , Resetting to Monthly(which is already thr), and Populating From and To, Corresponding to Monthly.
You really chopped off at least 20 lines of code in just one line :)
 
0
 
HonorGodCommented:
Do you have some code that is executed when the page is loaded?
0
 
aman0711Author Commented:
Yes its some java code.. On the backend
0
 
HonorGodCommented:
If so, it could be called just before the validateDates() executes the "return true;"
0
 
HonorGodCommented:
We may need to have some coded executed when the page is loaded that saves the original From/To values, and which is called (as noted above) to restore the values.

It might be as simple as something like this:

and then adding these lines just in front of the "return true" in validateDates():
----------------------------------------------------------------------
  if ( initial_From ) {
    document.getElementById( 'from_date' ).value = initial_From;
  }
  if ( initial_To ) {
    document.getElementById( 'to_date' ).value = initial_To;
  }
  return true;
var initial_From = null;
var initial_To   = null;
 
var onload = window.onload;
window.onload = function() {
  if ( onload ) {
    onload();
  }
  var from_date = document.getElementById( 'from_date' );
  if ( from_date ) {
    initial_From = from_date.value;
  }
  var to_date = document.getElementById( 'to_date' );
  if ( to_date ) {
    initial_To = to_date.value;
  }
}

Open in new window

0
 
aman0711Author Commented:
Thank you sir :)
I will try it in the morning and get back to u with results :)
0
 
HonorGodCommented:
I thought about it while in bed.  

There is an error.  We don't want to reset the values BEFORE we return true, we want to do it AFTER.

So  what we need to to have something like this "just before" the "return true":

...
  setTimeout( 'restore()', 100 );
  return true;
}

This says to wait for 1/10 of a second then call the restore() function.
This should give the submit plenty of time to complete before restoring the initial values.
function restore() {
  if ( initial_From ) {
    document.getElementById( 'from_date' ).value = initial_From;
  }
  if ( initial_To ) {
    document.getElementById( 'to_date' ).value = initial_To;
  }
}

Open in new window

0
 
aman0711Author Commented:
>> This should give the submit plenty of time to complete before restoring the initial values

Morning Sir,

               I guess we are on different levels :)

              We dont need to display defaults after Submit is clicked. Only when:

                 * User Clicked Sumbit, he gets new Databack, and From and To fields are populated with values he picked...
                Now he can click Reset to Defaults. and this would restore it to, Monthly and corresponding From and to dates
0
 
HonorGodCommented:
I'm sorry, I don't quite follow you.

I thought that you were interested in restoring the value after the submit.

So if you want to have a reset button to restore the values instead, you could have a button like the following.

Is that what you want/need?

<input type='button' value='Restore' onclick='restore()'>

Open in new window

0
 
aman0711Author Commented:
Hmm Actually,
 
           Other expert gave me this line of code and told me that if would reset From and To dates, I just need to replace ALPHA and BETA. with from and to fields ids,.
         but somehow it isnt working,, this is my complete page.

          Right now it resets the drop down to Monthly. But along with that I want the dates to be resetted to respective monthly From and To.

           

<script>
 
var timelineGaps = new Array();
 
timelineGaps["Daily"] = 5;
timelineGaps["Weekly"] = 30;
timelineGaps["Monthly"] = 150;
timelineGaps["Quarterly"] = 450;
timelineGaps["Annually"] = 600;
 
//max limit
var timelineGapsMax = new Array();
 
timelineGapsMax["Daily"] = 31;
timelineGapsMax["Weekly"] = 105;
timelineGapsMax["Monthly"] = 456;
timelineGapsMax["Quarterly"] = 730;
timelineGapsMax["Annually"] = 1725;
 
function validateDates() {
// get all the inputs
var from = document.getElementById('from_date');
var to = document.getElementById('to_date');
var timeline = document.getElementById('tm');
 
var minutes = 1000 * 60;
var hours = minutes * 60;
var days = hours * 24;
 
var df = Date.parse(from.value);
var dt = Date.parse(to.value);
var gap = (dt - df)/days;
 
if (df > dt) {
	alert('From date is higher than To date. Please reenter the dates correctly!');
} else if (timelineGapsMax[timeline.value] < gap ) {
	alert('The dates selected do not agree with the time period, please re-enter the calendar dates.');
	return false;
	}
   return true;
}
</script>
 
<script>
 
function setDefaultDates() {
	var freq = document.getElementById('tm').value;	
	//alert(freq);
 
		var dt=new Date();
		var oneDay = 1000*60*60*24;
		var fiveWeeks = oneDay * 36;
		var fiveMonths = oneDay * 152;
		var fiveQuarters = oneDay * 456;
		var annual = oneDay * 1000;
		var rollMonth = oneDay * 365;
 
		var eDay=dt.getDate()-1;
		var eMonth=dt.getMonth() + 1;
		var eYear=dt.getFullYear();
 
		//daily
		var sDay=dt.getDate()-6;
		var sMonth=dt.getMonth() + 1;
		var sYear=dt.getFullYear();
 
		//weekly
		var wklyEndDt = new Date(dt.getTime() - fiveWeeks);
		//alert(wklyEndDt);
		var wklyDay;
		var wklyModifiedDay = wklyEndDt.getDay();
		if (wklyModifiedDay == 6) {
			wklyDay = wklyEndDt.getDate();
		} else if (wklyModifiedDay == 5) {
			wklyDay = new Date((wklyEndDt.getTime() + oneDay)).getDate();
		} else if (wklyModifiedDay == 4) {
			wklyDay = new Date((wklyEndDt.getTime() + 2 * oneDay)).getDate();
		} else if (wklyModifiedDay == 3) {
			wklyDay = new Date((wklyEndDt.getTime() + 3 * oneDay)).getDate();
			//alert(wklyDay);
		} else if (wklyModifiedDay == 2) {
			wklyDay = new Date((wklyEndDt.getTime() + 4 * oneDay)).getDate();
		} else if (wklyModifiedDay == 1) {
			wklyDay = new Date((wklyEndDt.getTime() + 5 * oneDay)).getDate();
		} else if (wklyModifiedDay == 0) {
			wklyDay = new Date((wklyEndDt.getTime() + 6 * oneDay)).getDate();
		}
 
		var wklyMonth = wklyEndDt.getMonth()+1;
		var wklyYear = wklyEndDt.getFullYear();
		//alert(wklyMonth + "/" + wklyDay + "/" + wklyYear);
		
		//monthly
		var monthlyEndDt = new Date(dt.getTime() - fiveMonths);
		//var monthlyDay = monthlyEndDt.getDate();
		var monthlyDay = 1;
		var monthlyMonth = monthlyEndDt.getMonth()+1;
		var monthlyYear = monthlyEndDt.getFullYear();
		//alert(monthlyMonth + "/" + monthlyDay + "/" + monthlyYear);
 
		//quarterly
		var qrlyEndDt = new Date(dt.getTime() - fiveQuarters);
		//var qrlyDay = qrlyEndDt.getDate();
		var qrlyDay = 1;
		var qrlyMonth = qrlyEndDt.getMonth()+1;
		var qrlyYear = qrlyEndDt.getFullYear();
		//alert(qrlyMonth + "/" + qrlyDay + "/" + qrlyYear);
 
		//Annually
		var yrlyEndDt = new Date(dt.getTime() - annual);
		//var yrlyDay = yrlyEndDt.getDate();
		var yrlyDay = 1;
		var yrlyMonth = yrlyEndDt.getMonth()+1;
		var yrlyYear = yrlyEndDt.getFullYear();
		//alert(yrlyMonth + "/" + yrlyDay + "/" + yrlyYear);
 
		//12 month rolling
		var rollEndDt = new Date(dt.getTime() - rollMonth);
		//var rollDay = rollEndDt.getDate();
		var rollDay = 1;
		var rollMonth = rollEndDt.getMonth()+1;
		var rollYear = rollEndDt.getFullYear();
		//alert(rollMonth + "/" + rollDay + "/" + rollYear);
 
		if (freq == "Daily")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = sMonth + "/" + sDay + "/" + sYear;
		} else if (freq == "Weekly")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = wklyMonth + "/" + wklyDay + "/" + wklyYear;
		} else if (freq == "Monthly")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = monthlyMonth + "/" + monthlyDay + "/" + monthlyYear;
		} else if (freq == "Quarterly")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = qrlyMonth + "/" + qrlyDay + "/" + qrlyYear;
		} else if (freq == "Annually")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = yrlyMonth + "/" + yrlyDay + "/" + yrlyYear;
		} else if (freq == "12_Month_Rolling")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = rollMonth + "/" + rollDay + "/" + rollYear;
		}
	}
</script>
 
<!--[if IE]>
<style type="text/css"> 
.tofrom { padding-top:4px; }
.calimg { margin:3px 0 0 0; }
</style>
<![endif]-->
</head>
<body>
<div id="right-col">
<!-- begin right column -->
<div style="padding:0 33px 0 0; margin-bottom:-18px;" align="center"><a href="#" class="tip" style='text-decoration:none'>Print<span>To print a single chart right click on the chart and select Print Chart</span></a>&nbsp; &nbsp; &nbsp;<a href="#" class="tip" style='text-decoration:none'>Save<span>To save a chart right click on the chart and select one of the following</span></a> </div>
<div class="sidebar-panel" style="border:5px solid #99CCFF; width:145px; padding:2px; background:white;">
<div style="font-weight:bold; color:#000000 ">Selection</div>
<div style="font-weight:100; line-height:normal; font-size:9px; margin:5px 0;"> Select from the options below and then click on Update Chart.</div>
 <form:form commandName="sideForm" onsubmit="return validateDates()">
<div style="font-weight:bold; color:#000">Timeline</div>
 
<div align="center" style="margin:0 0 5px 0; ">
<div style="margin:0 0 5px 0;"><form:select path="timeline" items="${timeline}" id="tm" onchange="setDefaultDates()"/></div>
</div>
<div style="color:black;">
<div class="tofrom">From:</div>
<div class="calimg"><img src="/analytics/static/images/CAL.PNG" name="Calendar" width="18" height="18" id="Calendar" onClick="displayDatePicker('from_date');" /></div>
 
<form:input path="startDt" id="from_date" size="7" maxlength="10" />
 
</div>
<div style="color:black;">
<div class="tofrom">To:</div>
<div class="calimg"><img name="Calendar" src="/analytics/static/images/CAL.PNG" width="18" height="18" id="Calendarm" onClick="displayDatePicker('to_date');" /> </div>
 
<form:input path="endDt" id="to_date" size="7" maxlength="12" />
 
</div>
<div style="font-wight:bold; color:#000">*15 Month Max Per Chart</div>
<br />
<div style="float:left; font-size:9px; font-weight:lighter; padding:0; color:black; color:blue"><a href="#" style='text-decoration: none; color:#2525FF;' onClick='$("option:contains(\"Monthly\")").attr("selected","selected");return false'>Reset To Defaults</a></div>
<h6 style="font-size:4px; font-wight:lighter; float:left;">
<div style="width:60px; font-size:.5em; font-weight:lighter; background: #FFFFFF ">
<input type="submit" value="Update Chart" onsubmit="return validateDates()"  />
</div>
</h6>
<div style="clear:both;"></div>
</form:form>

Open in new window

0
 
HonorGodCommented:
I don't see ALPHA, BETA, or any form submit action.

Does this page contact a server application when the form is submitted?
0
 
HonorGodCommented:
I do see how the validation routine is called by the submit button...

Normally, there would be an action attribute on the form tag that would identify what to do, or where to go when the validate() function returns true.
<input type="submit" value="Update Chart" onsubmit="return validateDates()"  />

Open in new window

0
 
aman0711Author Commented:
Yes this page sends Timeline and Froma dnTo dates to the server.

Actually this is the line that resets the form. Its in that code.

<a href="#" style='text-decoration: none; color:#2525FF;' onClick='$("option:contains(\"Monthly\")").attr("selected","selected");return false'>Reset To Defaults</a></div>

0
 
HonorGodCommented:
Wow, I would never have seen that.  Maybe I really should learn jQuery... :-)

It looks like all that does it to reset the "selected" value for the "timelines" select statement to the option that contains "Monthly".

What if we changed that link to be something like this:

<a href="#" style='text-decoration: none; color:#2525FF;' onClick='return restore()'>Reset To Defaults</a></div>

and changed the restore function definition to something like:
function restore() {
  $("option:contains(\"Monthly\")").attr("selected","selected");
  if ( initial_From ) {
    document.getElementById( 'from_date' ).value = initial_From;
  }
  if ( initial_To ) {
    document.getElementById( 'to_date' ).value = initial_To;
  }
  return false;
}

Open in new window

0
 
HonorGodCommented:
You are missing some code at the very beginning where you show how, and from where the jQuery code is to be loaded.

You are also missing the <html> and <head> tags, as well as a DOCTYPE.
0
 
aman0711Author Commented:
I am sure you dont need to learn jquery,, you are a Sage in javascript :)

This is the complete code.
Sir, where should I declare the function you gave me? in the <head> ?? or inside the same script

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
<style type="text/css">
           @import url("/analytics/static/calendar/mystyle.css");
.tofrom {
        height:18px;
        float:left;
        width:40px;
        padding-top:3px;
}
.calimg {
        margin:1px 0 0 0;
        float:left;
        width:28px;
}
</style>
<script type="text/javascript" src="/analytics/static/calendar/ashscript1.js"></script>
<script type="text/javascript" src="/analytics/static/zoom/jquery.js"></script>
<script type="text/javascript" src="/analytics/static/zoom/thickbox.js"></script>
<link rel="stylesheet" href="/analytics/static/zoom/thickbox.css" type="text/css" media="screen" />
 
 
 
<!--[if IE]>
<style type="text/css"> 
.tofrom { padding-top:4px; }
.calimg { margin:3px 0 0 0; }
</style>
<![endif]-->
</head>
<body>
<div id="right-col">
<!-- begin right column -->
<div style="padding:0 33px 0 0; margin-bottom:-18px;" align="center"><a href="printSavePdf.html?height=300&width=300" class="thickbox">CSS</a></div>
<div class="sidebar-panel" style="border:5px solid #99CCFF; width:145px; padding:2px; background:white;">
<div style="font-weight:bold; color:#000000 ">Selection</div>
<div style="font-weight:100; line-height:normal; font-size:9px; margin:5px 0;"> Select from the options below and then click on Update Chart.</div>
 <form:form commandName="sideForm">
<div style="font-weight:bold; color:#000">Timeline</div>
 
<div align="center" style="margin:0 0 5px 0; ">
<div style="margin:0 0 5px 0;"><form:select path="timeline" items="${timeline}" id="tm"/></div>
</div>
<div style="color:black;">
<div class="tofrom">From:</div>
<div class="calimg"><img src="/analytics/static/images/CAL.PNG" name="Calendar" width="18" height="18" id="Calendar" onClick="displayDatePicker('from_date');" /></div>
 
<form:input path="startDt" id="from_date" size="7" maxlength="10" />
 
</div>
<div style="color:black;">
<div class="tofrom">To:</div>
<div class="calimg"><img name="Calendar" src="/analytics/static/images/CAL.PNG" width="18" height="18" id="Calendarm" onClick="displayDatePicker('to_date');" /> </div>
 
<form:input path="endDt" id="to_date" size="7" maxlength="12" />
 
</div>
<div style="font-wight:bold; color:#000">*15 Month Max Per Chart</div>
<br />
<div style="float:left; font-size:9px; font-weight:lighter; padding:0; color:black; color:blue"><a href="#" style='text-decoration: none; color:#2525FF;' onClick="document.forms[0].reset();return false">Reset To Defaults</a></div>
<br />
<h6 style="font-size:4px; font-wight:lighter; padding-left:17px;">
<div style="width:60px; font-size:.5em; font-weight:lighter; background: #FFFFFF ">
<input type="submit" value="Update Chart" />
</div>
</h6>
<div style="clear:both;"></div>
</form:form>
</div>
<br />
 
 
<div style="border:3px solid #99CCFF; width:160px; margin-left:5px; padding-left:2px; background:white;">
<div style="font-weight:bold; color:#EDA12E; background: #EBEBEB;"><b>System Bulletin</b></div>
<br />
<div style="font-weight:100; color:#000; line-height:normal; font-size:9px; margin:5px 0;">${bulletin}</div>
 
<!-- end right column, then column-wrapper -->
</div>
</div>
</body>
</html>

Open in new window

0
 
HonorGodCommented:
the restore() function would be in the <script> clause, or in the external file referenced by the src attribute of one of your script tags.

If I had to guess, I would say that you probably have the script shown above (i.e., in the code snippet portion of the question) in ashscript1.js.

You will need to add the code from http:#a24828919 as well as the restore() function from http:#a24831619 and revise the anchor tag as shown in http:#a24831619

Does that make sense?
0
 
aman0711Author Commented:
I am really very sorry Sir,

                Actually my mind is like stuck right now... havent had enough sleep :(

                This is the code. the script is in <Head>..
 
                The ashscript you mentioned, is for a popup calendar.

                In fact this code, doesnt even uses jquery at all.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
<style type="text/css">
           @import url("/analytics/static/calendar/mystyle.css");
.tofrom {
        height:18px;
        float:left;
        width:40px;
        padding-top:3px;
}
.calimg {
        margin:1px 0 0 0;
        float:left;
        width:28px;
}
</style>
<script type="text/javascript" src="/analytics/static/calendar/ashscript1.js"></script>
 
<script>
 
var timelineGaps = new Array();
 
timelineGaps["Daily"] = 5;
timelineGaps["Weekly"] = 30;
timelineGaps["Monthly"] = 150;
timelineGaps["Quarterly"] = 450;
timelineGaps["Annually"] = 600;
 
//max limit
var timelineGapsMax = new Array();
 
timelineGapsMax["Daily"] = 31;
timelineGapsMax["Weekly"] = 105;
timelineGapsMax["Monthly"] = 456;
timelineGapsMax["Quarterly"] = 730;
timelineGapsMax["Annually"] = 1725;
 
function validateDates() {
// get all the inputs
var from = document.getElementById('from_date');
var to = document.getElementById('to_date');
var timeline = document.getElementById('tm');
 
var minutes = 1000 * 60;
var hours = minutes * 60;
var days = hours * 24;
 
var df = Date.parse(from.value);
var dt = Date.parse(to.value);
var gap = (dt - df)/days;
 
if (df > dt) {
	alert('From date is higher than To date. Please reenter the dates correctly!');
} else if (timelineGapsMax[timeline.value] < gap ) {
	alert('The dates selected do not agree with the time period, please re-enter the calendar dates.');
	return false;
	}
   return true;
}
</script>
 
<script>
 
function setDefaultDates() {
	var freq = document.getElementById('tm').value;	
	//alert(freq);
 
		var dt=new Date();
		var oneDay = 1000*60*60*24;
		var fiveWeeks = oneDay * 36;
		var fiveMonths = oneDay * 152;
		var fiveQuarters = oneDay * 456;
		var annual = oneDay * 1000;
		var rollMonth = oneDay * 365;
 
		var eDay=dt.getDate()-1;
		var eMonth=dt.getMonth() + 1;
		var eYear=dt.getFullYear();
 
		//daily
		var sDay=dt.getDate()-6;
		var sMonth=dt.getMonth() + 1;
		var sYear=dt.getFullYear();
 
		//weekly
		var wklyEndDt = new Date(dt.getTime() - fiveWeeks);
		//alert(wklyEndDt);
		var wklyDay;
		var wklyModifiedDay = wklyEndDt.getDay();
		if (wklyModifiedDay == 6) {
			wklyDay = wklyEndDt.getDate();
		} else if (wklyModifiedDay == 5) {
			wklyDay = new Date((wklyEndDt.getTime() + oneDay)).getDate();
		} else if (wklyModifiedDay == 4) {
			wklyDay = new Date((wklyEndDt.getTime() + 2 * oneDay)).getDate();
		} else if (wklyModifiedDay == 3) {
			wklyDay = new Date((wklyEndDt.getTime() + 3 * oneDay)).getDate();
			//alert(wklyDay);
		} else if (wklyModifiedDay == 2) {
			wklyDay = new Date((wklyEndDt.getTime() + 4 * oneDay)).getDate();
		} else if (wklyModifiedDay == 1) {
			wklyDay = new Date((wklyEndDt.getTime() + 5 * oneDay)).getDate();
		} else if (wklyModifiedDay == 0) {
			wklyDay = new Date((wklyEndDt.getTime() + 6 * oneDay)).getDate();
		}
 
		var wklyMonth = wklyEndDt.getMonth()+1;
		var wklyYear = wklyEndDt.getFullYear();
		//alert(wklyMonth + "/" + wklyDay + "/" + wklyYear);
		
		//monthly
		var monthlyEndDt = new Date(dt.getTime() - fiveMonths);
		//var monthlyDay = monthlyEndDt.getDate();
		var monthlyDay = 1;
		var monthlyMonth = monthlyEndDt.getMonth()+1;
		var monthlyYear = monthlyEndDt.getFullYear();
		//alert(monthlyMonth + "/" + monthlyDay + "/" + monthlyYear);
 
		//quarterly
		var qrlyEndDt = new Date(dt.getTime() - fiveQuarters);
		//var qrlyDay = qrlyEndDt.getDate();
		var qrlyDay = 1;
		var qrlyMonth = qrlyEndDt.getMonth()+1;
		var qrlyYear = qrlyEndDt.getFullYear();
		//alert(qrlyMonth + "/" + qrlyDay + "/" + qrlyYear);
 
		//Annually
		var yrlyEndDt = new Date(dt.getTime() - annual);
		//var yrlyDay = yrlyEndDt.getDate();
		var yrlyDay = 1;
		var yrlyMonth = yrlyEndDt.getMonth()+1;
		var yrlyYear = yrlyEndDt.getFullYear();
		//alert(yrlyMonth + "/" + yrlyDay + "/" + yrlyYear);
 
		//12 month rolling
		var rollEndDt = new Date(dt.getTime() - rollMonth);
		//var rollDay = rollEndDt.getDate();
		var rollDay = 1;
		var rollMonth = rollEndDt.getMonth()+1;
		var rollYear = rollEndDt.getFullYear();
		//alert(rollMonth + "/" + rollDay + "/" + rollYear);
 
		if (freq == "Daily")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = sMonth + "/" + sDay + "/" + sYear;
		} else if (freq == "Weekly")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = wklyMonth + "/" + wklyDay + "/" + wklyYear;
		} else if (freq == "Monthly")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = monthlyMonth + "/" + monthlyDay + "/" + monthlyYear;
		} else if (freq == "Quarterly")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = qrlyMonth + "/" + qrlyDay + "/" + qrlyYear;
		} else if (freq == "Annually")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = yrlyMonth + "/" + yrlyDay + "/" + yrlyYear;
		} else if (freq == "12_Month_Rolling")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = rollMonth + "/" + rollDay + "/" + rollYear;
		}
	}
</script>
 
<!--[if IE]>
<style type="text/css"> 
.tofrom { padding-top:4px; }
.calimg { margin:3px 0 0 0; }
</style>
<![endif]-->
</head>
<body>
<div id="right-col">
<!-- begin right column -->
<div style="padding:0 33px 0 0; margin-bottom:-18px;" align="center"><a href="#" class="tip" style='text-decoration:none'>Print<span>To print a single chart right click on the chart and select Print Chart</span></a>&nbsp; &nbsp; &nbsp;<a href="#" class="tip" style='text-decoration:none'>Save<span>To save a chart right click on the chart and select one of the following</span></a> </div>
<div class="sidebar-panel" style="border:5px solid #99CCFF; width:145px; padding:2px; background:white;">
<div style="font-weight:bold; color:#000000 ">Selection</div>
<div style="font-weight:100; line-height:normal; font-size:9px; margin:5px 0;"> Select from the options below and then click on Update Chart.</div>
 <form:form commandName="sideForm" onsubmit="return validateDates()">
<div style="font-weight:bold; color:#000">Timeline</div>
 
<div align="center" style="margin:0 0 5px 0; ">
<div style="margin:0 0 5px 0;"><form:select path="timeline" items="${timeline}" id="tm" onchange="setDefaultDates()"/></div>
</div>
<div style="color:black;">
<div class="tofrom">From:</div>
<div class="calimg"><img src="/analytics/static/images/CAL.PNG" name="Calendar" width="18" height="18" id="Calendar" onClick="displayDatePicker('from_date');" /></div>
 
<form:input path="startDt" id="from_date" size="7" maxlength="10" />
 
</div>
<div style="color:black;">
<div class="tofrom">To:</div>
<div class="calimg"><img name="Calendar" src="/analytics/static/images/CAL.PNG" width="18" height="18" id="Calendarm" onClick="displayDatePicker('to_date');" /> </div>
 
<form:input path="endDt" id="to_date" size="7" maxlength="12" />
 
</div>
<div style="font-wight:bold; color:#000">*15 Month Max Per Chart</div>
<br />
<div style="float:left; font-size:9px; font-weight:lighter; padding:0; color:black; color:blue"><a href="#" style='text-decoration: none; color:#2525FF;' onClick='$("option:contains(\"Monthly\")").attr("selected","selected");return false'>Reset To Defaults</a></div>
<h6 style="font-size:4px; font-wight:lighter; float:left;">
<div style="width:60px; font-size:.5em; font-weight:lighter; background: #FFFFFF ">
<input type="submit" value="Update Chart" onsubmit="return validateDates()"  />
</div>
</h6>
<div style="clear:both;"></div>
</form:form>
</div>
<br />
 
 
<div style="border:3px solid #99CCFF; width:160px; margin-left:5px; padding-left:2px; background:white;">
<div style="font-weight:bold; color:#EDA12E; background: #EBEBEB;"><b>System Bulletin</b></div>
<br />
<div style="font-weight:100; color:#000; line-height:normal; font-size:9px; margin:5px 0;">${bulletin}</div>
 
<!-- end right column, then column-wrapper -->
</div>
</div>
</body>
</html>

Open in new window

0
 
HonorGodCommented:
ok,  I understand completely.

- change the <script> tag to be:

<script type='text/javascript'>

- Add the following, just before the closing script tag (i.e., line 172)

- and change the <a tag (anchor) in line 210 to be

<a href="#" style='text-decoration: none; color:#2525FF;' onClick='return restore()'>Reset To Defaults</a></div>
function restore() {
  $("option:contains(\"Monthly\")").attr("selected","selected");
  if ( initial_From ) {
    document.getElementById( 'from_date' ).value = initial_From;
  }
  if ( initial_To ) {
    document.getElementById( 'to_date' ).value = initial_To;
  }
  return false;
}
 
var initial_From = null;
var initial_To   = null;
 
var onload = window.onload;
window.onload = function() {
  if ( onload ) {
    onload();
  }
  var from_date = document.getElementById( 'from_date' );
  if ( from_date ) {
    initial_From = from_date.value;
  }
  var to_date = document.getElementById( 'to_date' );
  if ( to_date ) {
    initial_To = to_date.value;
  }
}

Open in new window

0
 
aman0711Author Commented:
Thank You sir,

             So monthly is still getting a reset but, its not resetting the From and To fields
0
 
HonorGodCommented:
Let's see what values were saved...
function restore() {
  $("option:contains(\"Monthly\")").attr("selected","selected");
  alert( 'initial_From: ' + initial_From );
  if ( initial_From ) {
    document.getElementById( 'from_date' ).value = initial_From;
  }
  alert( 'initial_To: ' + initial_To );
  if ( initial_To ) {
    document.getElementById( 'to_date' ).value = initial_To;
  }
  return false;
}

Open in new window

0
 
aman0711Author Commented:
Hmmm... both came us as null sir.
0
 
HonorGodCommented:
which says that the onload function isn't being exeucted...

In this update http:#a24831666, you have these lines:

<script type="text/javascript" src="/analytics/static/calendar/ashscript1.js"></script>
<script type="text/javascript" src="/analytics/static/zoom/jquery.js"></script>
<script type="text/javascript" src="/analytics/static/zoom/thickbox.js"></script>

In this update http:#a24831731, you only have this:

<script type="text/javascript" src="/analytics/static/calendar/ashscript1.js"></script>

Why?  Which contains the actual code that you are using?

put the <script type='text/javascript'> containing this:

var timelineGaps = new Array();

as the last script section.
0
 
aman0711Author Commented:
I am sorry I dont know how those scripts left out,

 I did put them this time, but getting the same null.

I followed the steps you jut suggested.. and here is the complete code

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
<style type="text/css">
           @import url("/analytics/static/calendar/mystyle.css");
.tofrom {
        height:18px;
        float:left;
        width:40px;
        padding-top:3px;
}
.calimg {
        margin:1px 0 0 0;
        float:left;
        width:28px;
}
</style>
<script type="text/javascript" src="/analytics/static/calendar/ashscript1.js"></script>
<script type="text/javascript" src="/analytics/static/zoom/jquery.js"></script>
<script type="text/javascript" src="/analytics/static/zoom/thickbox.js"></script>
<link rel="stylesheet" href="/analytics/static/zoom/thickbox.css" type="text/css" media="screen" />
 
 
 
 
<script type='text/javascript'>
 
function setDefaultDates() {
	var freq = document.getElementById('tm').value;	
	//alert(freq);
 
		var dt=new Date();
		var oneDay = 1000*60*60*24;
		var fiveWeeks = oneDay * 36;
		var fiveMonths = oneDay * 152;
		var fiveQuarters = oneDay * 456;
		var annual = oneDay * 1000;
		var rollMonth = oneDay * 365;
 
		var eDay=dt.getDate()-1;
		var eMonth=dt.getMonth() + 1;
		var eYear=dt.getFullYear();
 
		//daily
		var sDay=dt.getDate()-6;
		var sMonth=dt.getMonth() + 1;
		var sYear=dt.getFullYear();
 
		//weekly
		var wklyEndDt = new Date(dt.getTime() - fiveWeeks);
		//alert(wklyEndDt);
		var wklyDay;
		var wklyModifiedDay = wklyEndDt.getDay();
		if (wklyModifiedDay == 6) {
			wklyDay = wklyEndDt.getDate();
		} else if (wklyModifiedDay == 5) {
			wklyDay = new Date((wklyEndDt.getTime() + oneDay)).getDate();
		} else if (wklyModifiedDay == 4) {
			wklyDay = new Date((wklyEndDt.getTime() + 2 * oneDay)).getDate();
		} else if (wklyModifiedDay == 3) {
			wklyDay = new Date((wklyEndDt.getTime() + 3 * oneDay)).getDate();
			//alert(wklyDay);
		} else if (wklyModifiedDay == 2) {
			wklyDay = new Date((wklyEndDt.getTime() + 4 * oneDay)).getDate();
		} else if (wklyModifiedDay == 1) {
			wklyDay = new Date((wklyEndDt.getTime() + 5 * oneDay)).getDate();
		} else if (wklyModifiedDay == 0) {
			wklyDay = new Date((wklyEndDt.getTime() + 6 * oneDay)).getDate();
		}
 
		var wklyMonth = wklyEndDt.getMonth()+1;
		var wklyYear = wklyEndDt.getFullYear();
		//alert(wklyMonth + "/" + wklyDay + "/" + wklyYear);
		
		//monthly
		var monthlyEndDt = new Date(dt.getTime() - fiveMonths);
		//var monthlyDay = monthlyEndDt.getDate();
		var monthlyDay = 1;
		var monthlyMonth = monthlyEndDt.getMonth()+1;
		var monthlyYear = monthlyEndDt.getFullYear();
		//alert(monthlyMonth + "/" + monthlyDay + "/" + monthlyYear);
 
		//quarterly
		var qrlyEndDt = new Date(dt.getTime() - fiveQuarters);
		//var qrlyDay = qrlyEndDt.getDate();
		var qrlyDay = 1;
		var qrlyMonth = qrlyEndDt.getMonth()+1;
		var qrlyYear = qrlyEndDt.getFullYear();
		//alert(qrlyMonth + "/" + qrlyDay + "/" + qrlyYear);
 
		//Annually
		var yrlyEndDt = new Date(dt.getTime() - annual);
		//var yrlyDay = yrlyEndDt.getDate();
		var yrlyDay = 1;
		var yrlyMonth = yrlyEndDt.getMonth()+1;
		var yrlyYear = yrlyEndDt.getFullYear();
		//alert(yrlyMonth + "/" + yrlyDay + "/" + yrlyYear);
 
		//12 month rolling
		var rollEndDt = new Date(dt.getTime() - rollMonth);
		//var rollDay = rollEndDt.getDate();
		var rollDay = 1;
		var rollMonth = rollEndDt.getMonth()+1;
		var rollYear = rollEndDt.getFullYear();
		//alert(rollMonth + "/" + rollDay + "/" + rollYear);
 
		if (freq == "Daily")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = sMonth + "/" + sDay + "/" + sYear;
		} else if (freq == "Weekly")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = wklyMonth + "/" + wklyDay + "/" + wklyYear;
		} else if (freq == "Monthly")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = monthlyMonth + "/" + monthlyDay + "/" + monthlyYear;
		} else if (freq == "Quarterly")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = qrlyMonth + "/" + qrlyDay + "/" + qrlyYear;
		} else if (freq == "Annually")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = yrlyMonth + "/" + yrlyDay + "/" + yrlyYear;
		} else if (freq == "12_Month_Rolling")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = rollMonth + "/" + rollDay + "/" + rollYear;
		}
	}
function restore() {
	  $("option:contains(\"Monthly\")").attr("selected","selected");
	  alert( 'initial_From: ' + initial_From );
	  if ( initial_From ) {
	    document.getElementById( 'from_date' ).value = initial_From;
	  }
	  alert( 'initial_To: ' + initial_To );
	  if ( initial_To ) {
	    document.getElementById( 'to_date' ).value = initial_To;
	  }
	  return false;
	}
 
	 
	var initial_From = null;
	var initial_To   = null;
	 
	var onload = window.onload;
	window.onload = function() {
	  if ( onload ) {
	    onload();
	  }
	  var from_date = document.getElementById('from_date');
	  if ( from_date ) {
	    initial_From = from_date.value;
	  }
	  var to_date = document.getElementById( 'to_date' );
	  if ( to_date ) {
	    initial_To = to_date.value;
	  }
	}
 
 
</script>
 
<script type='text/javascript'>
 
var timelineGaps = new Array();
 
timelineGaps["Daily"] = 5;
timelineGaps["Weekly"] = 30;
timelineGaps["Monthly"] = 150;
timelineGaps["Quarterly"] = 450;
timelineGaps["Annually"] = 600;
 
//max limit
var timelineGapsMax = new Array();
 
timelineGapsMax["Daily"] = 31;
timelineGapsMax["Weekly"] = 105;
timelineGapsMax["Monthly"] = 456;
timelineGapsMax["Quarterly"] = 730;
timelineGapsMax["Annually"] = 1725;
 
function validateDates() {
// get all the inputs
var from = document.getElementById('from_date');
var to = document.getElementById('to_date');
var timeline = document.getElementById('tm');
 
var minutes = 1000 * 60;
var hours = minutes * 60;
var days = hours * 24;
 
var df = Date.parse(from.value);
var dt = Date.parse(to.value);
var gap = (dt - df)/days;
 
if (df > dt) {
	alert('From date is higher than To date. Please reenter the dates correctly!');
} else if (timelineGapsMax[timeline.value] < gap ) {
	alert('The dates selected do not agree with the time period, please re-enter the calendar dates.');
	return false;
	}
   return true;
}
</script>
 
<!--[if IE]>
<style type="text/css"> 
.tofrom { padding-top:4px; }
.calimg { margin:3px 0 0 0; }
</style>
<![endif]-->
</head>
<body>
<div id="right-col">
<!-- begin right column -->
<div style="padding:0 33px 0 0; margin-bottom:-18px;" align="center"><a href="#" class="tip" style='text-decoration:none'>Print<span>To print a single chart right click on the chart and select Print Chart</span></a>&nbsp; &nbsp; &nbsp;<a href="#" class="tip" style='text-decoration:none'>Save<span>To save a chart right click on the chart and select one of the following</span></a> </div>
<div class="sidebar-panel" style="border:5px solid #99CCFF; width:145px; padding:2px; background:white;">
<div style="font-weight:bold; color:#000000 ">Selection</div>
<div style="font-weight:100; line-height:normal; font-size:9px; margin:5px 0;"> Select from the options below and then click on Update Chart.</div>
 <form:form commandName="sideForm" onsubmit="return validateDates()">
<div style="font-weight:bold; color:#000">Timeline</div>
 
<div align="center" style="margin:0 0 5px 0; ">
<div style="margin:0 0 5px 0;"><form:select path="timeline" items="${timeline}" id="tm" onchange="setDefaultDates()"/></div>
</div>
<div style="color:black;">
<div class="tofrom">From:</div>
<div class="calimg"><img src="/analytics/static/images/CAL.PNG" name="Calendar" width="18" height="18" id="Calendar" onClick="displayDatePicker('from_date');" /></div>
 
<form:input path="startDt" id="from_date" size="7" maxlength="10" />
 
</div>
<div style="color:black;">
<div class="tofrom">To:</div>
<div class="calimg"><img name="Calendar" src="/analytics/static/images/CAL.PNG" width="18" height="18" id="Calendarm" onClick="displayDatePicker('to_date');" /> </div>
 
<form:input path="endDt" id="to_date" size="7" maxlength="12" />
 
</div>
<div style="font-wight:bold; color:#000">*15 Month Max Per Chart</div>
<br />
<div style="float:left; font-size:9px; font-weight:lighter; padding:0; color:black; color:blue"><a href="#" style='text-decoration: none; color:#2525FF;' onClick='return restore()'>Reset To Defaults</a></div>
<h6 style="font-size:4px; font-wight:lighter; float:left;">
<div style="width:60px; font-size:.5em; font-weight:lighter; background: #FFFFFF ">
<input type="submit" value="Update Chart" onsubmit="return validateDates()"  />
</div>
</h6>
<div style="clear:both;"></div>
</form:form>
</div>
<br />
 
 
<div style="border:3px solid #99CCFF; width:160px; margin-left:5px; padding-left:2px; background:white;">
<div style="font-weight:bold; color:#EDA12E; background: #EBEBEB;"><b>System Bulletin</b></div>
<br />
<div style="font-weight:100; color:#000; line-height:normal; font-size:9px; margin:5px 0;">${bulletin}</div>
 
<!-- end right column, then column-wrapper -->
</div>
</div>
</body>
</html>

Open in new window

0
 
HonorGodCommented:
replace Lines 152 to 165

with these:
	var onload = window.onload;
	window.onload = function() {
	  if ( onload ) {
	    onload();
	  }
	  var from_date = document.getElementById('from_date');
	  if ( from_date ) {
	    initial_From = from_date.value;
	  } else {
        alert( '"from_date" not found.' )
      }
	  var to_date = document.getElementById( 'to_date' );
	  if ( to_date ) {
	    initial_To = to_date.value;
	  } else {
        alert( '"to_date" not found.' )
	  }
	}

Open in new window

0
 
aman0711Author Commented:
Hmmm.. Same result:(

Null and null :(

here is the updated code :(



<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
<style type="text/css">
           @import url("/analytics/static/calendar/mystyle.css");
.tofrom {
        height:18px;
        float:left;
        width:40px;
        padding-top:3px;
}
.calimg {
        margin:1px 0 0 0;
        float:left;
        width:28px;
}
</style>
<script type="text/javascript" src="/analytics/static/calendar/ashscript1.js"></script>
<script type="text/javascript" src="/analytics/static/zoom/jquery.js"></script>
<script type="text/javascript" src="/analytics/static/zoom/thickbox.js"></script>
<link rel="stylesheet" href="/analytics/static/zoom/thickbox.css" type="text/css" media="screen" />
 
 
 
 
<script type='text/javascript'>
 
function setDefaultDates() {
	var freq = document.getElementById('tm').value;	
	//alert(freq);
 
		var dt=new Date();
		var oneDay = 1000*60*60*24;
		var fiveWeeks = oneDay * 36;
		var fiveMonths = oneDay * 152;
		var fiveQuarters = oneDay * 456;
		var annual = oneDay * 1000;
		var rollMonth = oneDay * 365;
 
		var eDay=dt.getDate()-1;
		var eMonth=dt.getMonth() + 1;
		var eYear=dt.getFullYear();
 
		//daily
		var sDay=dt.getDate()-6;
		var sMonth=dt.getMonth() + 1;
		var sYear=dt.getFullYear();
 
		//weekly
		var wklyEndDt = new Date(dt.getTime() - fiveWeeks);
		//alert(wklyEndDt);
		var wklyDay;
		var wklyModifiedDay = wklyEndDt.getDay();
		if (wklyModifiedDay == 6) {
			wklyDay = wklyEndDt.getDate();
		} else if (wklyModifiedDay == 5) {
			wklyDay = new Date((wklyEndDt.getTime() + oneDay)).getDate();
		} else if (wklyModifiedDay == 4) {
			wklyDay = new Date((wklyEndDt.getTime() + 2 * oneDay)).getDate();
		} else if (wklyModifiedDay == 3) {
			wklyDay = new Date((wklyEndDt.getTime() + 3 * oneDay)).getDate();
			//alert(wklyDay);
		} else if (wklyModifiedDay == 2) {
			wklyDay = new Date((wklyEndDt.getTime() + 4 * oneDay)).getDate();
		} else if (wklyModifiedDay == 1) {
			wklyDay = new Date((wklyEndDt.getTime() + 5 * oneDay)).getDate();
		} else if (wklyModifiedDay == 0) {
			wklyDay = new Date((wklyEndDt.getTime() + 6 * oneDay)).getDate();
		}
 
		var wklyMonth = wklyEndDt.getMonth()+1;
		var wklyYear = wklyEndDt.getFullYear();
		//alert(wklyMonth + "/" + wklyDay + "/" + wklyYear);
		
		//monthly
		var monthlyEndDt = new Date(dt.getTime() - fiveMonths);
		//var monthlyDay = monthlyEndDt.getDate();
		var monthlyDay = 1;
		var monthlyMonth = monthlyEndDt.getMonth()+1;
		var monthlyYear = monthlyEndDt.getFullYear();
		//alert(monthlyMonth + "/" + monthlyDay + "/" + monthlyYear);
 
		//quarterly
		var qrlyEndDt = new Date(dt.getTime() - fiveQuarters);
		//var qrlyDay = qrlyEndDt.getDate();
		var qrlyDay = 1;
		var qrlyMonth = qrlyEndDt.getMonth()+1;
		var qrlyYear = qrlyEndDt.getFullYear();
		//alert(qrlyMonth + "/" + qrlyDay + "/" + qrlyYear);
 
		//Annually
		var yrlyEndDt = new Date(dt.getTime() - annual);
		//var yrlyDay = yrlyEndDt.getDate();
		var yrlyDay = 1;
		var yrlyMonth = yrlyEndDt.getMonth()+1;
		var yrlyYear = yrlyEndDt.getFullYear();
		//alert(yrlyMonth + "/" + yrlyDay + "/" + yrlyYear);
 
		//12 month rolling
		var rollEndDt = new Date(dt.getTime() - rollMonth);
		//var rollDay = rollEndDt.getDate();
		var rollDay = 1;
		var rollMonth = rollEndDt.getMonth()+1;
		var rollYear = rollEndDt.getFullYear();
		//alert(rollMonth + "/" + rollDay + "/" + rollYear);
 
		if (freq == "Daily")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = sMonth + "/" + sDay + "/" + sYear;
		} else if (freq == "Weekly")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = wklyMonth + "/" + wklyDay + "/" + wklyYear;
		} else if (freq == "Monthly")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = monthlyMonth + "/" + monthlyDay + "/" + monthlyYear;
		} else if (freq == "Quarterly")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = qrlyMonth + "/" + qrlyDay + "/" + qrlyYear;
		} else if (freq == "Annually")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = yrlyMonth + "/" + yrlyDay + "/" + yrlyYear;
		} else if (freq == "12_Month_Rolling")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = rollMonth + "/" + rollDay + "/" + rollYear;
		}
	}
 
function restore() {
	  $("option:contains(\"Monthly\")").attr("selected","selected");
	  alert( 'initial_From: ' + initial_From );
	  if ( initial_From ) {
	    document.getElementById( 'from_date' ).value = initial_From;
	  }
	  alert( 'initial_To: ' + initial_To );
	  if ( initial_To ) {
	    document.getElementById( 'to_date' ).value = initial_To;
	  }
	  return false;
	}
 
	 
	var initial_From = null;
	var initial_To   = null;
	 
	var onload = window.onload;
	window.onload = function() {
	  if ( onload ) {
	    onload();
	  }
	  var from_date = document.getElementById('from_date');
	  if ( from_date ) {
	    initial_From = from_date.value;
	  } else {
        alert( '"from_date" not found.' )
      }
	  var to_date = document.getElementById( 'to_date' );
	  if ( to_date ) {
	    initial_To = to_date.value;
	  } else {
        alert( '"to_date" not found.' )
	  }
	}
 
 
</script>
 
<script type='text/javascript'>
 
var timelineGaps = new Array();
 
timelineGaps["Daily"] = 5;
timelineGaps["Weekly"] = 30;
timelineGaps["Monthly"] = 150;
timelineGaps["Quarterly"] = 450;
timelineGaps["Annually"] = 600;
 
//max limit
var timelineGapsMax = new Array();
 
timelineGapsMax["Daily"] = 31;
timelineGapsMax["Weekly"] = 105;
timelineGapsMax["Monthly"] = 456;
timelineGapsMax["Quarterly"] = 730;
timelineGapsMax["Annually"] = 1725;
 
function validateDates() {
// get all the inputs
var from = document.getElementById('from_date');
var to = document.getElementById('to_date');
var timeline = document.getElementById('tm');
 
var minutes = 1000 * 60;
var hours = minutes * 60;
var days = hours * 24;
 
var df = Date.parse(from.value);
var dt = Date.parse(to.value);
var gap = (dt - df)/days;
 
if (df > dt) {
	alert('From date is higher than To date. Please reenter the dates correctly!');
} else if (timelineGapsMax[timeline.value] < gap ) {
	alert('The dates selected do not agree with the time period, please re-enter the calendar dates.');
	return false;
	}
   return true;
}
</script>
 
<!--[if IE]>
<style type="text/css"> 
.tofrom { padding-top:4px; }
.calimg { margin:3px 0 0 0; }
</style>
<![endif]-->
</head>
<body>
<div id="right-col">
<!-- begin right column -->
<div style="padding:0 33px 0 0; margin-bottom:-18px;" align="center"><a href="#" class="tip" style='text-decoration:none'>Print<span>To print a single chart right click on the chart and select Print Chart</span></a>&nbsp; &nbsp; &nbsp;<a href="#" class="tip" style='text-decoration:none'>Save<span>To save a chart right click on the chart and select one of the following</span></a> </div>
<div class="sidebar-panel" style="border:5px solid #99CCFF; width:145px; padding:2px; background:white;">
<div style="font-weight:bold; color:#000000 ">Selection</div>
<div style="font-weight:100; line-height:normal; font-size:9px; margin:5px 0;"> Select from the options below and then click on Update Chart.</div>
 <form:form commandName="sideForm" onsubmit="return validateDates()">
<div style="font-weight:bold; color:#000">Timeline</div>
 
<div align="center" style="margin:0 0 5px 0; ">
<div style="margin:0 0 5px 0;"><form:select path="timeline" items="${timeline}" id="tm" onchange="setDefaultDates()"/></div>
</div>
<div style="color:black;">
<div class="tofrom">From:</div>
<div class="calimg"><img src="/analytics/static/images/CAL.PNG" name="Calendar" width="18" height="18" id="Calendar" onClick="displayDatePicker('from_date');" /></div>
 
<form:input path="startDt" id="from_date" size="7" maxlength="10" />
 
</div>
<div style="color:black;">
<div class="tofrom">To:</div>
<div class="calimg"><img name="Calendar" src="/analytics/static/images/CAL.PNG" width="18" height="18" id="Calendarm" onClick="displayDatePicker('to_date');" /> </div>
 
<form:input path="endDt" id="to_date" size="7" maxlength="12" />
 
</div>
<div style="font-wight:bold; color:#000">*15 Month Max Per Chart</div>
<br />
<div style="float:left; font-size:9px; font-weight:lighter; padding:0; color:black; color:blue"><a href="#" style='text-decoration: none; color:#2525FF;' onClick='return restore()'>Reset To Defaults</a></div>
<h6 style="font-size:4px; font-wight:lighter; float:left;">
<div style="width:60px; font-size:.5em; font-weight:lighter; background: #FFFFFF ">
<input type="submit" value="Update Chart" onsubmit="return validateDates()"  />
</div>
</h6>
<div style="clear:both;"></div>
</form:form>
</div>
<br />
 
 
<div style="border:3px solid #99CCFF; width:160px; margin-left:5px; padding-left:2px; background:white;">
<div style="font-weight:bold; color:#EDA12E; background: #EBEBEB;"><b>System Bulletin</b></div>
<br />
<div style="font-weight:100; color:#000; line-height:normal; font-size:9px; margin:5px 0;">${bulletin}</div>
 
<!-- end right column, then column-wrapper -->
</div>
</div>
</body>
</html>

Open in new window

0
 
HonorGodCommented:
ok, let's have the window.onload tell us what it is saving...

Replace lines 154-170 with
window.onload = function() {
  if ( onload ) {
    onload();
  }
  var from_date = document.getElementById('from_date');
  if ( from_date ) {
    initial_From = from_date.value;
    alert( 'from_date = "' + initial_From + '"' );
  } else {
    alert( '"from_date" not found.' );
  }
  var to_date = document.getElementById( 'to_date' );
  if ( to_date ) {
    initial_To = to_date.value;
    alert( 'to_date = "' + initial_To + '"' );
  } else {
    alert( '"to_date" not found.' );
  }
}

Open in new window

0
 
aman0711Author Commented:
So now as soon as the page loads, i am getting stack over flow at line: 244

also in the code:

        window.onload = function() {
          if ( onload ) {
            onload();

 I am getting onload cannot be resolved (inside the if)
0
 
HonorGodCommented:
interesting.  Change that code from this:

var onload = window.onload;
window.onload = function() {
  if ( onload ) {
    onload();
  }


To this:

var oldOnload = window.onload;
window.onload = function() {
  if ( oldOnload ) {
    oldOnload();
  }
0
 
aman0711Author Commented:
Did that... still the same error Sir :(


Snap shot attached


javascropptweqwe.PNG
0
 
aman0711Author Commented:
Little progress Sir,

               with this modification, I am able to see intial From and To dates in the alert box... but its still not resetting :(
0
 
HonorGodCommented:
Do the initial_From and initial_To values contain the expected date values?
0
 
aman0711Author Commented:
Yes they do :)

But not resetting yet :(
0
 
HonorGodCommented:
ok.  Let's see if I understand this correctly.

- You see the onload messages that display the expected "initial_From" and "initial_To" values.
- You make changes,
- You click the reset link
- You see alert messages indicating that "initial_From" and "initial_To" are null

Is that right?
0
 
aman0711Author Commented:
No,

         Here is the Flow:

           Page loads for the first time:

            I see Monthly (because thats what default is set to) -
            I see the From and To dates corresponding to Monthly in alert boxs.

            Till this point we are good...

            Now I change Monthly to Weekly, From and To gets default values for Weekly and I hit update Chart button.. Page loads again.. with Weekly in the dropdown and dates corresponding to Weekly..

             now when i hit Reset to Defaults, Weekly resets to Monthly and then  the From and to dates for weekly show up (at this point , we need the monthly dates because reset has been hit). :(
0
 
HonorGodCommented:
ok, that's what's messing things up.

"Page loads again.."

So, at the point when the change is made from Monthy to Weekly, do you see the "initial_From" and "initial_To" values as the Weekly "From" and "To" dates?

and when you use the "Reset" link, are you still seeing the "null" values for the From and To values?
0
 
aman0711Author Commented:
Actually that form is used with spring framework.. Tthats why we don't have any action :(
0
 
aman0711Author Commented:
We are so close yet.. so far :)

Any other solution Sir?
0
 
HonorGodCommented:
Do you have answers for the questions?

Q: When you change from "Monthly" to "Weekly", do you see the "initial_From" and "initial_To" value messages?

     If so, do they have the "Weekly", or the "Monthy" values?

Q: When you click the Reset link, are you still seeing alerts that indicate that initial_From and initial_To are  "null"?
0
 
aman0711Author Commented:
>> Q: When you change from "Monthly" to "Weekly", do you see the "initial_From" and "initial_To" value messages?

                When I change monthly to weekly and hit updater chart.. I see initial_From and initial_To with weekly values.

 
When you click the Reset link, are you still seeing alerts that indicate that initial_From and initial_To are  "null"?

 No. On clicking Reset Link, I am seeing weekly values (i.e. the dropdown list value we picked before hitting update chart)
0
 
HonorGodCommented:
ok, I think that I'm understanding the requirement better.

Let me think about it for a few moment.

Sorry for being so obtuse.
0
 
aman0711Author Commented:
Not a problem Sir :) You helped me so much till now.

If we dissect the problem then it would be as simple as :

When page first loads , it has Monthly and corresponding From and To date...

Now no matter what happens (User hits Update Chart or Not), Rest To Defaults Should always restore , Monthly and those two corresponding From and To values, which were there when the page loaded first :)
0
 
HonorGodCommented:
Where you currently have this:

  var from_date = document.getElementById('from_date');
  if ( from_date ) {
    initial_From = from_date.value;
    alert( 'from_date = "' + initial_From + '"' );
  } else {
    alert( '"from_date" not found.' );
  }
  var to_date = document.getElementById( 'to_date' );
  if ( to_date ) {
    initial_To = to_date.value;
    alert( 'to_date = "' + initial_To + '"' );
  } else {
    alert( '"to_date" not found.' );
  }

replace it with this:
  var from_date = document.getElementById('from_date');
  if ( from_date && !initial_From ) {
    initial_From = from_date.value;
    alert( 'from_date = "' + initial_From + '"' );
  } else {
    alert( '"from_date" not found.' );
  }
  var to_date = document.getElementById( 'to_date' );
  if ( to_date && !initial_To ) {
    initial_To = to_date.value;
    alert( 'to_date = "' + initial_To + '"' );
  } else {
    alert( '"to_date" not found.' );
  }

Open in new window

0
 
HonorGodCommented:
I'm not completely sure if it will work or not.

I'm trying to figure out how to determine whether the "Monthly" option has been selected, and only save the initial_From and initial_To when that is the case.
0
 
aman0711Author Commented:
I am driving to office sir... Will get back to u with results in another 30 mins :)
0
 
aman0711Author Commented:
Sir, Now getting this error:

The operator &&;&&; is undefined for the argument type(s) Element, boolean
0
 
HonorGodCommented:
Interesting.


  var from_date = document.getElementById('from_date');
  if ( from_date && ( initial_From == null ) ) {
    initial_From = from_date.value;
    alert( 'from_date = "' + initial_From + '"' );
  } else {
    alert( '"from_date" not found.' );
  }
  var to_date = document.getElementById( 'to_date' );
  if ( to_date && ( initial_To == null ) ) {
    initial_To = to_date.value;
    alert( 'to_date = "' + initial_To + '"' );
  } else {
    alert( '"to_date" not found.' );
  }

Open in new window

0
 
aman0711Author Commented:
Sir, it started working :)

I dont know what I did... but it started working...

I moved all the variables to global scope.

The instead to storing the value some where.. I directly passed the dates.

 var initial_To = eMonth + "/" + eDay + "/" + eYear;    
  var initial_From = monthlyMonth + "/" + monthlyDay + "/" + monthlyYear;

and it started to reset :-)

Can you please have a look at the code :-) and teach me a bit about the reset code you gave me :)

function setDefaultDates() {
	var freq = document.getElementById('tm').value;	
	//alert(freq);
 
		//weekly
		var wklyEndDt = new Date(dt.getTime() - fiveWeeks);
		//alert(wklyEndDt);
		var wklyDay;
		var wklyModifiedDay = wklyEndDt.getDay();
		if (wklyModifiedDay == 6) {
			wklyDay = wklyEndDt.getDate();
		} else if (wklyModifiedDay == 5) {
			wklyDay = new Date((wklyEndDt.getTime() + oneDay)).getDate();
		} else if (wklyModifiedDay == 4) {
			wklyDay = new Date((wklyEndDt.getTime() + 2 * oneDay)).getDate();
		} else if (wklyModifiedDay == 3) {
			wklyDay = new Date((wklyEndDt.getTime() + 3 * oneDay)).getDate();
			//alert(wklyDay);
		} else if (wklyModifiedDay == 2) {
			wklyDay = new Date((wklyEndDt.getTime() + 4 * oneDay)).getDate();
		} else if (wklyModifiedDay == 1) {
			wklyDay = new Date((wklyEndDt.getTime() + 5 * oneDay)).getDate();
		} else if (wklyModifiedDay == 0) {
			wklyDay = new Date((wklyEndDt.getTime() + 6 * oneDay)).getDate();
		}
 
		var wklyMonth = wklyEndDt.getMonth()+1;
		var wklyYear = wklyEndDt.getFullYear();
		//alert(wklyMonth + "/" + wklyDay + "/" + wklyYear);
		
		//monthly
		var monthlyEndDt = new Date(dt.getTime() - fiveMonths);
		//var monthlyDay = monthlyEndDt.getDate();
		var monthlyDay = 1;
		var monthlyMonth = monthlyEndDt.getMonth()+1;
		var monthlyYear = monthlyEndDt.getFullYear();
		//alert(monthlyMonth + "/" + monthlyDay + "/" + monthlyYear);
 
		//quarterly
		var qrlyEndDt = new Date(dt.getTime() - fiveQuarters);
		//var qrlyDay = qrlyEndDt.getDate();
		var qrlyDay = 1;
		var qrlyMonth = qrlyEndDt.getMonth()+1;
		var qrlyYear = qrlyEndDt.getFullYear();
		//alert(qrlyMonth + "/" + qrlyDay + "/" + qrlyYear);
 
		//Annually
		var yrlyEndDt = new Date(dt.getTime() - annual);
		//var yrlyDay = yrlyEndDt.getDate();
		var yrlyDay = 1;
		var yrlyMonth = yrlyEndDt.getMonth()+1;
		var yrlyYear = yrlyEndDt.getFullYear();
		//alert(yrlyMonth + "/" + yrlyDay + "/" + yrlyYear);
 
		//12 month rolling
		var rollEndDt = new Date(dt.getTime() - rollMonth);
		//var rollDay = rollEndDt.getDate();
		var rollDay = 1;
		var rollMonth = rollEndDt.getMonth()+1;
		var rollYear = rollEndDt.getFullYear();
		//alert(rollMonth + "/" + rollDay + "/" + rollYear);
 
		if (freq == "Daily")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = sMonth + "/" + sDay + "/" + sYear;
		} else if (freq == "Weekly")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = wklyMonth + "/" + wklyDay + "/" + wklyYear;
		} else if (freq == "Monthly")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = monthlyMonth + "/" + monthlyDay + "/" + monthlyYear;
		} else if (freq == "Quarterly")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = qrlyMonth + "/" + qrlyDay + "/" + qrlyYear;
		} else if (freq == "Annually")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = yrlyMonth + "/" + yrlyDay + "/" + yrlyYear;
		} else if (freq == "12_Month_Rolling")
		{	
			document.getElementById("to_date").value = eMonth + "/" + eDay + "/" + eYear;
			document.getElementById("from_date").value = rollMonth + "/" + rollDay + "/" + rollYear;
		}
	}
 
function restore() {
 
	  $("option:contains(\"Monthly\")").attr("selected","selected");
	  
	   var initial_To = eMonth + "/" + eDay + "/" + eYear; 	
	   var initial_From = monthlyMonth + "/" + monthlyDay + "/" + monthlyYear;
	  
	  if ( initial_From ) {
	    document.getElementById( 'from_date' ).value = monthlyMonth + "/" + monthlyDay + "/" + monthlyYear;
	  }
	 
	  if ( initial_To ) {
	    document.getElementById( 'to_date' ).value =  eMonth + "/" + eDay + "/" + eYear; 	
	  }
	  return false;
	}
 
	 
	var initial_From = null;
	var initial_To   = null;
	var from_date = "";
	 
	var onload = window.onload;
	window.onload = function() {
	  if ( onload ) {
	    onload();
	  }
	     from_date =  document.getElementById('from_date');
	  if ( from_date ) {
	    initial_From = from_date.value;
	  } else {
        alert( '"from_date" not found.' )
      }
	  var to_date = document.getElementById( 'to_date' );
	  if ( to_date ) {
	    initial_To = to_date.value;
	  } else {
        alert( '"to_date" not found.' )
	  }
	}
 
 
</script>

Open in new window

0
 
HonorGodCommented:
Is this enough?

The restore function depends upon the existence of some global variables.  If they exist (i.e., are not null), these values will be used to restore the associated field values when the function is called.

A new onload routine is added that will save the initial values of the From and To date fields in global variables.
//--------------------------------------------------------------------
// Name: restore()
// Role: Called to restore the select value to "Monthly", and the
//       saved "from_date" and "to_date" values stored in global
//       variables.
//--------------------------------------------------------------------
function restore() {
  $("option:contains(\"Monthly\")").attr("selected","selected");
 
  var initial_To = eMonth + "/" + eDay + "/" + eYear; 	
  var initial_From = monthlyMonth + "/" + monthlyDay + "/" + monthlyYear;
  
  if ( initial_From ) {
    document.getElementById( 'from_date' ).value = monthlyMonth + "/" + monthlyDay + "/" + monthlyYear;
  }
 
  if ( initial_To ) {
    document.getElementById( 'to_date' ).value =  eMonth + "/" + eDay + "/" + eYear; 	
  }
  return false;
}
 
//--------------------------------------------------------------------
// Global variables
//-------------------------------------------------------------------- 
var initial_From = null;
var initial_To   = null;
var from_date    = '';
 
//--------------------------------------------------------------------
// Name: anonymous
// Role: Add a new Window.onload routine to save the initial From and
//       To date values.
//-------------------------------------------------------------------- 
var oldOload = window.onload;     // Initial onload value
window.onload = function() {      // New onload routine
  if ( oldOnload ) {              // If a previous "onload" routine
    oldOnload();                  //   exists, call it.
  }                               //
  //------------------------------------------------------------------
  // Look for the "from_date" input field
  //------------------------------------------------------------------
  from_date = document.getElementById( 'from_date' );
  if ( from_date ) {                   // If the field exists...
    initial_From = from_date.value;    //   Save the initial value
  } else {                             // otherwise
    alert( '"from_date" not found.' ); //   Houston, we have a problem.
  }                                    //
  //------------------------------------------------------------------
  // Look for the "to_date" input field
  //------------------------------------------------------------------
  var to_date = document.getElementById( 'to_date' );
  if ( to_date ) {                     // If the field exists...
    initial_To = to_date.value;        //   Save the initial value
  } else {                             // otherwise
    alert( '"to_date" not found.' );   //   Houston, we have a problem.
  }                                    //
}

Open in new window

0
 
aman0711Author Commented:
Wow.. thank you so much Sir :)

You helped me alot :)

Sir, posting another question related to onmouseover function.. can you have a look?
0
 
HonorGodCommented:
I can try... :-)
0
 
aman0711Author Commented:
Cool, I am posting an another question, will post the link here and then close this one for you
0
 
HonorGodCommented:
Why is it in the CSS zone?
0
 
aman0711Author Commented:
Thanks :)
0
 
HonorGodCommented:
Thanks for the grade & points.

Good luck & have a great day.
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 30
  • 29
Tackle projects and never again get stuck behind a technical roadblock.
Join Now