Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jun 2007
    Posts
    61
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Form not getting accessed through javascript

    I am having a weird problem:

    Code:
    <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!

  • #2
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    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.

  • #3
    New Coder
    Join Date
    Jun 2007
    Posts
    61
    Thanks
    13
    Thanked 0 Times in 0 Posts
    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:

    Code:
    <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.

  • #4
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    If you post a link to the live page itself, it would make things a touch easier to debug.

  • #5
    New Coder
    Join Date
    Jun 2007
    Posts
    61
    Thanks
    13
    Thanked 0 Times in 0 Posts
    Unfortunately, it is not live anywhere - only in my local server .

  • #6
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Imho, the first thing to do would be to properly combome those two radio buttons.

    e.g.
    Code:
    …
    
    <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.

  • Users who have thanked Bill Posters for this post:

    knkk (08-27-2007)

  • #7
    New Coder
    Join Date
    Jun 2007
    Posts
    61
    Thanks
    13
    Thanked 0 Times in 0 Posts
    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...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •