www.webdeveloper.com
Results 1 to 6 of 6

Thread: Form not getting accessed through javascript

  1. #1
    Join Date
    Jun 2007
    Posts
    61

    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. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    The JavaScript is run BEFORE the form has been loaded.
    Code:
    window.onload=function(){
    alert("test");
    var _temp = document.eventFinder.sorted.value;
    alert(_temp);
    alert(document.eventFinder.sorted.value);
    alert("test1");
    };

  3. #3
    Join Date
    Jun 2007
    Posts
    61
    Thanks, Fang! 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. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    I don't get that, only an error because setDate() is not defined.

  5. #5
    Join Date
    Jun 2007
    Posts
    61
    I solved this problem - it was a JavaScript file I forgot to include (which had, among other things, the definition for the insertMenu function). Thanks everyone for all the help!

  6. #6
    Join Date
    Jun 2007
    Posts
    61
    Also, want to add that it helps greatly to not leave style declarations like the ones in my code above (padding:0 0 0 4;), but specify the units (padding:0 0 0 4px;).

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles