Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Date Picker Calendar does not work in Table <TD> tags

Posted on 2003-03-12
11
Medium Priority
?
660 Views
Last Modified: 2007-12-19
I got the Date Picker free Javascript.  I am sure most of you know about it, it came from the JavaScrip Source.  When I put the form for the calendar inside HTML column tags, it passes a null value to the error Document.sample.T2 is null or not an object.

If I put the form tags out side of the table and just the input tag inside the <TD> column, it still gives the same result. But if I totally put the Form outside of the table, it works fine.

So here is one example, the <form> tags are outside the table while the input tags are inside:


<TR>
<TD VALIGN=TOP style="background-color: #99CCFF">
<FONT FACE="Arial" SIZE=2><B>Beginning Date</B></FONT>


<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
<p>Pop-up calendar sample page:</p>
<p>Beginning date: <input type="text" name="T1" size="20">
<!-- ggPosX and ggPosY not set, so popup will autolocate to the right of the graphic -->
<a href="javascript:show_calendar('sample.T1');" onMouseOver="window.status='Date Picker'; overlib('Click here to choose a date from a one month pop-up calendar.'); return true;" onMouseOut="window.status=''; nd(); return true;"><img src="http://nordenterprises.com/h-o-a-home/images/show-calendar.gif" width=24 height=22 border=0></a>
</p>
<p>Ending date:     <input type="text" name="T2"     size="20">
<!-- ggPosX and ggPosY are set, so popup goes where you tell it -->
<a href="javascript:ggPosX=5;ggPosY=200;show_yearly_calendar('sample.T2');" onMouseOver="window.status='Date Picker'; overlib('Click here to choose a date from a full year pop-up calendar.'); return true;" onMouseOut="window.status=''; nd(); return true;"><img src="http://nordenterprises.com/h-o-a-home/images/show-calendar.gif" width=24 height=22 border=0></a>
</p>
<p><input type="submit" value="Submit" name="B1"><input type="reset"
value="Reset" name="B2"></p>
</TD>
</TR>

Here is the other example, the <form> tags and everything is inside the table.  Both the above senario and this one below produce the same error:

<TR>
<TD VALIGN=TOP style="background-color: #99CCFF">
<FONT FACE="Arial" SIZE=2><B>Beginning Date</B></FONT>


<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
<p>Pop-up calendar sample page:</p>
<form name="sample" method="post" action="popupcalsample.html">
<p>Beginning date: <input type="text" name="T1" size="20">
<!-- ggPosX and ggPosY not set, so popup will autolocate to the right of the graphic -->
<a href="javascript:show_calendar('sample.T1');" onMouseOver="window.status='Date Picker'; overlib('Click here to choose a date from a one month pop-up calendar.'); return true;" onMouseOut="window.status=''; nd(); return true;"><img src="http://nordenterprises.com/h-o-a-home/images/show-calendar.gif" width=24 height=22 border=0></a>
</p>
<p>Ending date:     <input type="text" name="T2"     size="20">
<!-- ggPosX and ggPosY are set, so popup goes where you tell it -->
<a href="javascript:ggPosX=5;ggPosY=200;show_yearly_calendar('sample.T2');" onMouseOver="window.status='Date Picker'; overlib('Click here to choose a date from a full year pop-up calendar.'); return true;" onMouseOut="window.status=''; nd(); return true;"><img src="http://nordenterprises.com/h-o-a-home/images/show-calendar.gif" width=24 height=22 border=0></a>
</p>
<p><input type="submit" value="Submit" name="B1"><input type="reset"
value="Reset" name="B2"></p>
</form>
</TD>
</TR>

If I put the form completely outside of the table, it can call the Javascript fine and doesn't produce an error
0
Comment
Question by:dba123
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
11 Comments
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8124606
Where is your javascript code? All I see is the html...would you mind pasting the code?
0
 
LVL 10

Expert Comment

by:kollegov
ID: 8125495
More likely that in your document structure screwd up and
form can't be found by name as  'sample.T2'
You can try add ID='sample' to form, this might help, might not.
Please put your page online and post URL here where to check...
Debugging of incomplete fragmentsin this case is junk work..
0
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 
LVL 10

Expert Comment

by:kollegov
ID: 8125505
and move this
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
out of table, better put it just next to <BODY> tag
0
 
LVL 10

Expert Comment

by:kollegov
ID: 8125636
Yes, string parameter you pass  to function call  finally evalueates in  
onClick="document." + this.REFERENCE + ".value='" ......
(where REFERENCE is 'sample.T2'  string you pass)
The error you get Means from context of link in calendar generated code
document.sample.T2'
Can't be found.
This more likely result of HTML code structure which OUTSIDE the table
which you left out of scope (do not paste here)
0
 
LVL 10

Expert Comment

by:kollegov
ID: 8125651
Or this might be result of INVALID html code structure like unclosed tags
or tags intersection.. Anclosed quotes in tag attribute or something like this..
This things is quite difficult to find in large HTMLs
You can try to check your page  HTML code with validator on
http://validator.w3.org/
This might help to find screwed HTML tags
0
 

Expert Comment

by:wuranma
ID: 8164071
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
//set todays date
Now = new Date();
NowDay = Now.getDate();
NowMonth = Now.getMonth();
NowYear = Now.getYear();
if (NowYear < 2000) NowYear += 1900; //for Netscape

//function for returning how many days there are in a month including leap years
function DaysInMonth(WhichMonth, WhichYear)
{
  var DaysInMonth = 31;
  if (WhichMonth == "Apr" || WhichMonth == "Jun" || WhichMonth == "Sep" || WhichMonth == "Nov") DaysInMonth = 30;
  if (WhichMonth == "Feb" && (WhichYear/4) != Math.floor(WhichYear/4))     DaysInMonth = 28;
  if (WhichMonth == "Feb" && (WhichYear/4) == Math.floor(WhichYear/4))     DaysInMonth = 29;
  return DaysInMonth;
}

//function to change the available days in a months
function ChangeOptionDays(Which)
{
  DaysObject = eval("document.applyForm." + Which + "Day");
  MonthObject = eval("document.applyForm." + Which + "Month");
  YearObject = eval("document.applyForm." + Which + "Year");

  Month = MonthObject[MonthObject.selectedIndex].text;
  Year = YearObject[YearObject.selectedIndex].text;

  DaysForThisSelection = DaysInMonth(Month, Year);
  CurrentDaysInSelection = DaysObject.length;
  if (CurrentDaysInSelection > DaysForThisSelection)
  {
    for (i=0; i<(CurrentDaysInSelection-DaysForThisSelection); i++)
    {
      DaysObject.options[DaysObject.options.length - 1] = null
    }
  }
  if (DaysForThisSelection > CurrentDaysInSelection)
  {
    for (i=0; i<(DaysForThisSelection-CurrentDaysInSelection); i++)
    {
      NewOption = new Option(DaysObject.options.length + 1);
      DaysObject.add(NewOption);
    }
  }
    if (DaysObject.selectedIndex < 0) DaysObject.selectedIndex == 0;
}

//function to set options to today
function SetToToday(Which)
{
  DaysObject = eval("document.applyForm." + Which + "Day");
  MonthObject = eval("document.applyForm." + Which + "Month");
  YearObject = eval("document.applyForm." + Which + "Year");

  YearObject[0].selected = true;
  MonthObject[NowMonth].selected = true;

  ChangeOptionDays(Which);

  DaysObject[NowDay-1].selected = true;
}

//function to write option years plus x
function WriteYearOptions(YearsAhead)
{
  line = "";
  for (i=0; i<YearsAhead; i++)
  {
    line += "<OPTION>";
    line += NowYear + i;
  }
  return line;
}
//  End -->
</script>

I belieeve this is the code that gives the dates, months and yrs..
0
 
LVL 1

Expert Comment

by:Computer101
ID: 8236109
A request for deletion has been made.  If no response or you feel this is in error, comment.  If no objection, I will delete in three days.

Computer101
E-E Admin
0
 

Accepted Solution

by:
SpideyMod earned 0 total points
ID: 8272785
PAQ'd and all 75 points refunded.

SpideyMod
Community Support Moderator @Experts Exchange
0
 

Expert Comment

by:vicgame
ID: 8894646
Why not try this one instead?
<a href="http://www.calendarxp.net">http://www.calendarxp.net</a>
0
 
LVL 1

Author Comment

by:dba123
ID: 8896401
Because the other is free....I like yours but our company won't support buying this feature so I need to get it free.  Want to use us as a Marketing ploy saying that our company is using your calendar?  Are you the one who is the owner of this website?
0

Featured Post

Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

Question has a verified solution.

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

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

715 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