Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Simplifying Date Data Entry, Part II-2 : Page 2


advertisement
Set Your JavaScript in Motion
The URL we wish to open is the name of our calendar pop-up ASP page along with any querystring values we wish to pass. The features of the window will decide its size and appearance. A good size is 220 by 220 pixels. The following code opens the calendar pop-up window:

window.open('calpop.asp', 'ncal', 'width=220, height=220');

Note that the variable "ncal" is just one way of referencing the calendar pop-up window. You can specify any valid name for the window.

The next step is to place the above code within a block of JavaScript, preferably in the <HEAD> section and invoke it from the click event of the graphical calendar image. This is the JavaScript code block:



<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> <!-- function showCalendar() { window.open('calpop.asp','ncal','width=220, height=220'); } //--> </SCRIPT>

To invoke it from the click event of the calendar image, enclose the image within a hyperlink as follows, calling the JavaScript function "showCalendar".

<A HREF="javascript:showCalendar();"> <IMG SRC="10Min200011cal.gif" WIDTH="39" HEIGHT="21" ALT="Click here to select date" BORDER="0"></A>



Now I need to modify the hyperlink for each day so that it updates the text box in the parent window on which there are four separate date fields. How does the pop-up calendar know which date field to update? Use a new variable, "tbm" (text box to modify), to pass the name of the form as well as the name of the corresponding text box within the form . Assuming that the form name is "frmEntry" and the date text box is called "pebd" (Project Estimated Begin Date), you can modify your JavaScript as follows:

window.open("calpop.asp?tbm=frmEntry.pebd","ncal","width=220, height=220");

This code tells the calendar pop-up to update the correct date field. However, my example application has four different date fields with four images that bring up the same calendar pop-up. Therefore, I need to modify the showCalendar routine to branch off and send four different field names, depending on which image was clicked. Call the showCalendar routine from each of the four images and pass a unique integer (from one to four) for each. You can switch the field name within the JavaScript based on the argument passed in.

The HTML code for the entire form follows (note the form name, the text box field names, as well as the arguments passed by the click event of the image hyperlinks):

<FORM NAME="frmEntry" ACTION="YourActionPageName" METHOD="POST"> <TABLE BORDER="0" CELLPADDING="2" CELLSPACING="0" STYLE="border: 1px solid black;"> <TR> <TD> <STRONG>Project</STRONG> </TD> <TD> Begin Date </TD> <TD STYLE="border-left: 1px solid blue;"> </TD> <TD> End Date </TD> </TR> <TR> <TD> Estimated: </TD> <TD> <INPUT TYPE="text" NAME="pebd" SIZE="15" MAXLENGTH="15">  <A HREF="javascript:showCalendar(1);"><IMG SRC="10Min200011cal.gif" WIDTH="39" HEIGHT="21" ALT="Click here to select date" BORDER="0"></A> </TD> <TD STYLE="border-left: 1px solid blue;"> </TD> <TD> <INPUT TYPE="text" NAME="peed" SIZE="15" MAXLENGTH="15">  <A HREF="javascript:showCalendar(2);"><IMG SRC="10Min200011cal.gif" WIDTH="39" HEIGHT="21" ALT="Click here to select date" BORDER="0"></A> </TD> </TR> <TR> <TD> Actuals: </TD> <TD> <INPUT TYPE="text" NAME="pabd" SIZE="15" MAXLENGTH="15">  <A HREF="javascript:showCalendar(3);"><IMG SRC="10Min200011cal.gif" WIDTH="39" HEIGHT="21" ALT="Click here to select date" BORDER="0"></A> </TD> <TD STYLE="border-left: 1px solid blue;"> </TD> <TD> <INPUT TYPE="text" NAME="paed" SIZE="15" MAXLENGTH="15">  <A HREF="javascript:showCalendar(4);"><IMG SRC="10Min200011cal.gif" WIDTH="39" HEIGHT="21" ALT="Click here to select date" BORDER="0"></A> </TD> </TR> </TABLE> </FORM>

The modified JavaScript routine will now accept a single argument, and based on the argument, pass different field names to calpop.asp.

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> <!-- function showCalendar(i) { // declare variable var tbm; // assign field name to variable // based on argument if(i==1) tbm='frmEntry.pebd'; if(i==2) tbm='frmEntry.peed'; if(i==3) tbm='frmEntry.pabd'; if(i==4) tbm='frmEntry.paed'; // call pop up calendar // passing field name variable window.open('calpop.asp?tbm='+tbm,'ncal','width=220, height=220'); } //--> </SCRIPT>





Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date