...

View Full Version : Form not getting accessed through javascript



knkk
08-26-2007, 05:48 PM
I am having a weird problem:


<SCRIPT language=JavaScript TYPE=text/javascript>
alert("test");
var _temp = document.eventFinder.sorted.value;
alert(_temp);
alert(document.eventFinder.sorted.value);
alert("test1");
</SCRIPT>
<FORM NAME="eventFinder" METHOD="get" ACTION="<?=SEARCH;?>" STYLE="margin: 0">
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="266" BGCOLOR="#FFFFEF">
<INPUT TYPE="hidden" NAME="type" VALUE="events">
<INPUT TYPE="hidden" NAME="sorted" VALUE="date">

</TABLE>
</FORM>

Only the first "test" gets alerted. I am not able to access the eventFinder elements at all.

Of course, the form has more stuff, but I stripped all of that to test the problem. The stuff above alerts only one "test", and nothing afterwards.

Kindly let me know if you spot something amiss. Thank you very much for your time!

Bill Posters
08-26-2007, 05:58 PM
You're running the script line before the form exists.

Move the js to somewhere after the form markup, or defer its occurance using window.onload or one of the library DOMReady events.

knkk
08-27-2007, 09:47 AM
Thanks, Bill_Posters. Yes, that was a rather inane mistake. Actually, that was what I'd dumbed my code down to sequentially in the process of diagnosing it, and it was midnight here, and my brain stops inheriting from its parent classes around then :).

However, my original problem persists, and I'm hoping someone can see what I'm not able to:



<SCRIPT language=JavaScript TYPE=text/javascript>
var cal_last = new Image(); cal_last.src="<?=IMAGES?>cal/cal_last.gif";
var cal_next = new Image(); cal_next.src="<?=IMAGES?>cal/cal_next.gif";
var t = new Image(); t.src="<?=IMAGES?>cal/t.gif";
var mainStyleSheet = new Object(); mainStyleSheet.src="/css/masterIEStyle.css"
</SCRIPT>

<FORM NAME="eventFinder" METHOD="get" ACTION="<?=SEARCH;?>" STYLE="margin: 0">
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="266" BGCOLOR="#FFFFEF">
<INPUT TYPE="hidden" NAME="type" VALUE="events">
<INPUT TYPE="hidden" NAME="sorted" VALUE="date">
<TR>
<TD STYLE="padding: 15 0 0 7;" COLSPAN="2">
<SELECT NAME="subcat">
<OPTION VALUE="">----- Any Category -----</OPTION>
<OPTION VALUE="books">Books</OPTION>
<OPTION VALUE="campus">Campus</OPTION>
<OPTION VALUE="workshops">Workshops</OPTION>
<OPTION VALUE="other">Others</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TD COLSPAN="2" STYLE="padding:10 0 0 0;">
<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" CLASS="Basic_MEDIUM_BLACK">
<TR>
<TD>
<INPUT ONCLICK="clearOthers('anyDate')" TYPE="radio" CHECKED NAME="anyDate">
</TD>
<TD STYLE="padding:0 0 0 4;">
Any Date
</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD COLSPAN="2" STYLE="padding:10 0 0 0;">
<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" CLASS="Basic_MEDIUM_BLACK">
<TR>
<TD>
<INPUT ONCLICK="clearOthers('exactDate'); setDate(todaysDate.month, todaysDate.day, todaysDate.year, 'exactDate')" TYPE="radio" NAME="exactDate">
</TD>
<TD STYLE="padding:0 0 0 4;">
Exact Date
</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD STYLE="padding:10 0 0 5;"></TD>
<TD STYLE="padding:0 0 0 19;">
<INPUT ONFOCUS="clearOthers('exactDate')" SIZE="9" NAME="exactDateText">
<A ONCLICK="drawCalendar(todaysDate.month, todaysDate.day, todaysDate.year, 'exactDate')" HREF="javascript:void(0)">
<SCRIPT LANGUAGE=JavaScript>
document.write(insertMenu('exactDateCal',21,0,0,0))
</SCRIPT><IMG id=caldrop HEIGHT="21" SRC="<?=IMAGES?>cal/caldrop.gif" WIDTH="34"
ALIGN="absMiddle" BORDER="0"></A>
</TD>
</TR>
<TR>
<TD COLSPAN="2" STYLE="padding:10 0 0 0;">
<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" CLASS="Basic_MEDIUM_BLACK">
<TR>
<TD>
<INPUT ONCLICK="clearOthers('dateRange'); setDate(todaysDate.month, todaysDate.day, todaysDate.year, 'dateRangeBegin'); setDate(todaysDate.month, todaysDate.day, todaysDate.year, 'dateRangeEnd');" TYPE="radio" NAME="dateRange">
</TD>
<TD STYLE="padding:0 0 0 4;">Date Range</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD STYLE="padding:10 0 0 5;"></TD>
<TD STYLE="padding:0 0 0 19;" CLASS="Basic_MEDIUM_BLACK">
<INPUT ONFOCUS="clearOthers('dateRange')" SIZE="9" NAME="dateRangeBeginText"> <A
ONCLICK="drawCalendar(todaysDate.month, todaysDate.day, todaysDate.year,
'dateRangeBegin')" HREF="javascript:void(0)">
<SCRIPT
language=JavaScript>document.write(insertMenu('dateRangeBeginCal',21,0,0,0))</SCRIPT>
<IMG id=caldrop HEIGHT="21" SRC="<?=IMAGES?>cal/caldrop.gif" WIDTH="34" ALIGN="absMiddle"
BORDER=0></A> &nbsp;&nbsp;to&nbsp;
<INPUT ONFOCUS="clearOthers('dateRange');" SIZE="9" NAME="dateRangeEndText"> <A ONCLICK="drawCalendar(todaysDate.month, todaysDate.day, todaysDate.year,
'dateRangeEnd')" href="javascript:void(0)">
<SCRIPT
language=JavaScript>document.write(insertMenu('dateRangeEndCal',21,0,0,0))</SCRIPT>
<IMG id=caldrop HEIGHT="21" SRC="<?=IMAGES?>cal/caldrop.gif" WIDTH="34" ALIGN="absMiddle"
border=0></A>
</TD>
</TR>
<TR>
<TD STYLE="padding: 5 0 15 5"></TD>
<TD STYLE="padding: 5 0 15 21;">
<div STYLE="padding: 0; margin: 0">
<!-- THIS DIV TO TAKE CARE OF AN IE PROBLEM WHERE AN EXTRA GAP WAS APPEARING UNDER THE BUTTON -->
<A HREF="javascript:document.eventFinder.submit()"><DIV><IMG
src="<?=IMAGES?>common/go_go.gif" WIDTH="49" BORDER="0"></DIV></A>
</DIV>
</TD>
</TR>
</TABLE>
</FORM>
<SCRIPT>
function clearOthers(field) {
var _de = document['eventFinder'];
if (field == 'anyDate') {
_de['exactDateText'].value = '';
_de['exactDate'].checked = false;
_de['dateRangeBeginText'].value = '';
_de['dateRange'].checked = false;
_de['dateRangeEndText'].value = '';
}
if (field == 'exactDate') {
alert("test");
_de['exactDate'].checked = true;
_de['dateRangeBeginText'].value = '';
_de['dateRangeEndText'].value = '';
_de['dateRange'].checked = false;
_de['anyDate'].checked = false;
}
if (field == 'dateRange') {
_de['dateRange'].checked = true;
_de['exactDateText'].value = '';
_de['anyDate'].checked = false;
_de['exactDate'].checked = false;
}
}
</SCRIPT>


This is basically a form with two radio buttons - the first has a text field to fill an exact date, which the user can get by clicking on a calendar image, and the next is 2 text fields, with 2 dates to be filled (a date range), with calendar images next to each text field.

If I click on the radio button named 'exactDate' now (line 42) which calls the function clearOthers, I get a message in IE that "'exactDate' is null or not an object."

I am basically not able to access any of the form elements through the _de varuable.

I'd be grateful for any pointers.

Bill Posters
08-27-2007, 09:57 AM
If you post a link to the live page itself, it would make things a touch easier to debug.

knkk
08-27-2007, 10:49 AM
Unfortunately, it is not live anywhere - only in my local server :(.

Bill Posters
08-27-2007, 11:04 AM
Imho, the first thing to do would be to properly combome those two radio buttons.

e.g.



<input type="radio" name="dateOption" value="anydate" checked="checked">

<input type="radio" name="dateOption" value="exactdate">

They are both 'answers' to the same question, so should have the same name attribute value. This will make them perform as they should, - i.e. only one can be selected and selecting one deselects the other - instead of using js to reproduce that functionality as you're currently doing.

Start by reworking that markup to how it should properly be used, then rework the js around it.

For some tutorials on how to use form controls…
http://www.w3schools.com/tags/tag_input.asp


If there are any problems, post in this thread again. :)

knkk
08-27-2007, 11:55 AM
I solved this problem, Bill_Posters - it was a JavaScript file I forgot to include (which had, among other things, the definition for the insertMenu function). Thanks for all the help! However, I still do not understand why not including that file would cause the document.eventFinder.exactDate to cause an error saying it has no properties. However, all's well that ends well, I guess...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum