Board Logo

some things work, but not popup-continued
virchull - 3/30/2008 at 05:59 PM

I started this question below and haven't gotten any feedback. But I have followed some other discussions and solved a few problems. Firebug helped me find my script tags had a typo - an extra > character. Firebug tells me I have one remaining problem. The error statement is:

document.forms.calendarSelector has no properties
[Break on this error] var cal1=new calendar1(document.forms['calendarSelector'].elements['dateAvailable']);

What's the reason for this error? Any help would be appreciated.


tigra - 3/31/2008 at 02:15 PM

make sure your document has the form tag with name="calendarSelector" and it is declared before you refer to it from the calendar.


virchull - 4/3/2008 at 12:55 AM

Still is not working. The form box appears with the Pick date value in it. A small calendar icon appears next to the box. Here's the code section. As you know, the <span class= ...> stuff is for some CSS - that makes the text blue.

<!--has a name="calendarSelector" in 2 places because the JavaScript calendar documentation seems to require it-->
<!-- <label for="calendarSelector"><span class="required">Date Available: </label> delivers properties to javascript cal1-->
<p>

<form method="post"
name="calendarSelector"
action="rentalInputProcessor.php">
<label for="calendarSelector"><span class="required">Date Available: </span></label>
<input type="text" name="calendarSelector" id="calendarSelector" value="Pick date" size="25" maxlength="50" />
<a href="javascript:cal1.popup();"><img src="img/cal.gif" width="16" height="16" border="0" alt="Select date"></a><br>
<script language="JavaScript">
var cal1=new calendar1(document.forms['calendarSelector'].elements['firstTime']);
</script>
</p>

I get the error statement, as follows:

document.forms.calendarSelector has no properties
[Break on this error] var cal1=new calendar1(document.forms['calendarSelector'].elements['firstTime...

I think I have the name before I call the JavaScript. I don't know what you mean in the other comment.


tigra - 4/3/2008 at 08:20 PM

I don't see input with name="firstTime" defined anywhere in your form.
Same name ("calendarSelector") is assigned to both form and the input box .
The error reported by the browser is not inside the calendar, it relates to

document.forms['calendarSelector'].elements['firstTime']

which is what you pass to the calendar as the parameter.
Another thing that contributes to the problem is

<script language="JavaScript">
var cal1=new calendar1(document.forms['calendarSelector'].elements['firstTime']);
</script>

referring to the form object from inside the form. Move this code below </form> tag.


virchull - 4/3/2008 at 11:17 PM

I tried to follow your instructions, but I don't get a popup. The code is:

<!--has a name= in 2 places because the JavaScript calendar seems to require it-->
<!-- <label for="someFormName"><span class="required">Date Available: </label> delivers properties to javascript cal1-->
<p>

<form method="post"
name="someFormName"
action="rentalInputProcessor.php">
<label for="someFormName"><span class="required">Date Available: </span></label>
<input type="text" name="calendarSelector" id="calendarSelector" value="Pick date" size="25" maxlength="50" />
<a href="javascript:cal1.popup();"><img src="img/cal.gif" width="16" height="16" border="0" alt="Select date"></a><br>
</form>
<script language="JavaScript">
var cal1=new calendar1(document.forms['someFormName'].elements['calendarSelector']);
</script>
</p>

I now get 2 error messages:

1 - document.forms.someFormName has no properties
[Break on this error] var cal1=new calendar1(document.forms['someFormName'].elements['calendarSelec...

2 - cal1 has no properties

Just for the record, my header section has the following statements.

<script language="JavaScript" src="calendar1.js"></script>
<script language="JavaScript" src="calendar2.js"></script>


I understand that calendar1.js works, and the problem is in my code.
In your calendar documentation page, in the Doc Setup and Initialization sections, I don't understand which variables map to where in the statements. I don't know where 'tstest' in that section comes from so I'm shooting in the dark about what variables to put in the document.forms [ ] Itseems that elements[ ] gets the variable associated with name="xx" (your Input1) after the input type="xxx". So that's what I did. Any help would be appreciated.


tigra - 4/4/2008 at 12:41 AM

Attached is your code as in your last post. The only modification I "Pick date" removed from the value.
It works out of the box with the rest of the files added.

to shed some light on document.forms['someFormName'].elements['calendarSelect'] statement:
this is the way to reference element with name="calendarSelect" in the form with name="someFormName"
this works every time when both form and element are defined at the time of the call and both elements have those names exclusively.


virchull - 4/8/2008 at 12:32 AM

Terrific! Got it working, and it looks good, too. Thanks so much for your patient help. Interesting that the value= part is so sensitive to making it work.

I'd like to make 2 improvements in my page. First, I'd like the calendar to open from a click in the formbox - or from a click on the mini-icon. This is an onclick event, but where does it go, and what's the syntax? Second, when the calendar pops up, I'd like to position it on top of the form box so the user must select from the calendar and cannot type into the formbox. This is absolute positioning, but how does the div get created?

Suggestions would be greatly appreciated.


Softcomplex: http://www.softcomplex.com/
Back to forum: http://www.softcomplex.com/forum/