Using Date Range Form With Links

scripter73 · Jan 23, 2002

Hi,

It seemed easy at the time, but as usual I'm making it complicated.

I have a web page A where the idea is to allow a user to select a date range, and then click on a report name (that goes to web page B) that presents some data based on the range selected. I also need the date range on my "B" page.

I'm utilizing a small form for the date, and links for the report names. The issue is that I'm not using the traditional "Submit" button. From a user perspective, I don't need it.

You can check out the site for yourself to see what I mean.

Click on:

http://www.freecfm.com/m/meeka1/homepage_draft.cfm

(for Web Page A), and then click on "Sweep Bank Reconciliation" link (for Web Page B).

I'd like to keep my design (where I represents links for the reports). Things like checkboxes and select boxes wouldn't provide the look I want.

It seems like it would be easy, but its more difficult than I anticipated.

Should I use a Javascript function to pass the values? (I'm also using hidden fields).

Sorry this is so long, but here's a copy of my code for PAGE A:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Agency Reports - Homepage</title>
<script language="Javascript">

</script>

<link rel="stylesheet" type"text/css" href="style.css">
</head>

<body>
<cfset session.sysdate = DateFormat(Now(),"yyyymmdd&quot

>
<cfset session.dateYear = Mid(session.sysdate,1,4)>
<cfset session.dateMonth = Mid(session.sysdate,5,2)>
<cfset session.dateDay = Mid(session.sysdate,7,2)>

<cfset session.agentcode = "AXXXX">

<TABLE WIDTH=800 CELLSPACING=0 CELLPADDING=0 BORDER=0>

<tr border=1>
<td width=420 height=20 valign="middle"><b><p>Please enter a date range and click on the report you would like to view.</b></p></td>
<td width=380 height=20></td>
</tr>

<form name="homedate" action="sweep_cr.cfm" method="post">
<tr border=1>
<td width=420 height=20 valign="bottom"><input type="text" size=3 maxlength=2 name="startmonth" value="<cfoutput>#session.dateMonth#</cfoutput>">/<input type="text" size=3 maxlength=2 name="startday" value="<cfoutput>#session.dateDay#</cfoutput>">/<input type="text" size=5 maxlength=4 name="startyear" value="<cfoutput>#session.dateYear#</cfoutput>">
<b>TO</b> <input type="text" size=3 maxlength=2 name="endmonth" value="<cfoutput>#session.dateMonth#</cfoutput>">/<input type="text" size=3 maxlength=2 name="endday" value="<cfoutput>#session.dateDay#</cfoutput>">/<input type="text" size=5 maxlength=4 name="endyear" value="<cfoutput>#session.dateYear#</cfoutput>"></td>
<td width=380 height=20></td>

</tr>
<input type="hidden" name="month1" value="">
<input type="hidden" name="day1" value="">
<input type="hidden" name="year1" value="">
<input type="hidden" name="month2" value="">
<input type="hidden" name="day2" value="">
<input type="hidden" name="year2" value="">

</form>

<tr colspan=3>
<td width=420 height=20>
<table width=420 border=0 cellpadding=0 cellspacing=0>
<tr valign="top">
<td width=150 valign="top">
<table width=150 border=0 cellpadding=0 cellspacing=0>
<tr width=150>
<td width=30 align="left" valign="top"><font size=-3>MM</font></td>
<td width=30 align="center" valign="top"><font size=-3>DD</font></td>
<td width=50 align="center" valign="top"><font size=-3>   YYYY</font></td>
</tr>
</table>
</td>
<td width=5></td>
<td width=150 valign="top">
<table width=150 border=0 cellpadding=0 cellspacing=0>
<tr width=150>
<td width=30 align="left" valign="top"><font size=-3>  MM</font></td>
<td width=30 align="center" valign="top"><font size=-3>   DD</font></td>
<td width=50 align="right" valign="top"><font size=-3>   YYYY</font></td>
</tr>
</table>
</td>
<td width=170></td>
</tr>
</table>
</td>

<td width=380 height=20></td>
</tr>
<tr border=1>
<td width=420></td>
<td width=380 align="center"></td>
</tr>

<tr border=1>
<td width=800 colspan=2><hr size="3"color="black"></td>
</tr>

<tr border=1>
<td width=400 height=30 align="right" bgcolor="#660000"><font color="white" size=3>Agency Reports |</font></td>
<td width=400 height=30 align="left" bgcolor="#660000"><font color="white" size=3>Agent Code   <cfoutput>#session.agentcode#</cfoutput></font></td>
</tr>

<tr border=1>
<td width=800 colspan=2><hr size="3"color="black"></td>
</tr>

<tr border=1>
<td width=400 valign=top>

<table width=380 border=2 bordercolor="#000000" cellspacing=5 cellpadding=5 bgcolor="#FFFFFF">

<tr><td height=85 valign=top>Sweep Bank Information <br clear=right>     <a href="sweep_cr.cfm" onclick="process_date()"><b>Sweep Bank Reconciliation</b></a></td></tr>
..... More Links Here .....


</td>
</tr>
</TABLE>
</body>
</html>

Thanks in advance for any help you can provide.

scripter73

tleish · Jan 24, 2002

DO you want each one of the links on page a to pass the date information to a different page, or just "Sweep Bank Reconciliation"? - tleish

scripter73 · Jan 24, 2002

Hi Tleish,

Different pages. Each link clicked on goes to another page. I got as far as creating the links to the pages.

Below I have a link to a scaled down version of what I'm trying to accomplish:

http://www.freecfm.com/m/meeka1/pagea.cfm

Please consider my two files: pagea.cfm and pageb.cfm:

PAGEA.CFM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Page A</title>

<script language="javascript">
function sendform(report_type){
document.form1.submit();

if (report_type == 1)
window.location.href="pageb.cfm";

else if (report_type == 2)
window.location.href="pagec.cfm";

}

</script>
</head>

<body>
SUBMITTING A FORM VIA A LINK: This form takes a value from the user and lets the user choose which report they would like to view. (The date values are posted to the next page.)<br>

<form name="form1" action="" method="post">
<input type="text" name="month" size=3 maxlength=2>
<input type="text" name="day" size=3 maxlength=2>
<input type="text" name="year" size=5 maxlength=4>
</form>

<a href="javascript:sendform(1);" name="Link1">Report Link 1</a>

<a href="javascript:sendform(2);" name="Link2">Report Link 2</a>

</body>
</html>

PAGEB.CFM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Page B</title>
</head>

<body>
<cfset session.aMonth = #form.month#>
<cfset session.aDay = #form.day#>
<cfset session.aYear = #form.year#>

The values you selected from the previous form.
<input type="text" name="bmonth" value="<cfoutput>#session.aMonth#</cfoutput>" size=3 maxlength=2>
<input type="text" name="bday" value="<cfoutput>#session.aDay#</cfoutput>" size=3 maxlength=2>
<input type="text" name="byear" value="<cfoutput>#session.aYear#</cfoutput>"size=5 maxlength=4><br>
<input type="button" name="newrpt_sweep" value="Submit New Date">

</body>
</html>

The reason these files are .cfm files is because I'm using the date field in the next page. But my question is HTML/Javascript-related.

I think there's something I need to do in the Javascript, but I'm not sure what. It seems like I'm almost there, but not quite.

Any help you can provide is appreciated.

Thanks,
scripter73

Guest_imported · Jan 31, 2002

Ah, I see what you're after. Obviously, you could pass the two dates as parameters on the end of the link's URL. However, you have to write those URLs before the user has selected the two dates.

You're correct that you need to use Javascript. I see that you have created empty hidden fields to hold the date parts. You apparently intended to assign values to those fields with Javascript. However, you need to get those values appended to the links' URLs for this to work. You don't need these hidden form fields, since if you can assign values to them, you could have just as well appended the values to the URLs.

Here is an example taken from your page that shows how I would approach this:

Make your links like this:

<a href="javascript: getDocsInRange('meeka1/sweep_cr.cfm');">Sweep Bank Reconcilliation</a>

And at the top of your page, insert this Javascript:

<script language="javascript">
function getDocsInRange(url_suffix) {
var f = document.homedate; // this is your form

var startdate = f.startmonth.value + '/' + f.startday.value + '/' + f.startyear.value;
var endate = f.endmonth.value + '/' + f.endday.value + '/' + f.endyear.value;

window.location='

http://www.freecfm.com/m/'

+ url_suffix + '?startdate=' startdate + '&enddate=' + enddate;
}
</script>

Then, in your template sweep_cr.cfm, you can use the CF variables URL.startdate and URL.enddate in your query like this:

SELECT ...
...
WHERE date between #CreateODBCDate(startdate)# and #CreateODBCDate(enddate)#

Let me know if this works. I haven't tested it.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Using Date Range Form With Links

scripter73

Programmer

tleish

Programmer

scripter73

Programmer

Guest_imported

New member

Similar threads

Part and Inventory Search

Sponsor