SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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
    SitePoint Addict Wildhoney's Avatar
    Join Date
    Apr 2006
    Location
    Nottingham
    Posts
    246
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <script type="text/javascript">
    
    	var pForm = document.getElementById('eventFinder');
    	
    	for(iIndex = 0; iIndex < pForm.childNodes.length; iIndex++)
    	{
    		alert(pForm[iIndex].getAttribute('value'));
    	}
    	
    </script>
    Last edited by Wildhoney; Aug 27, 2007 at 03:38.
    TalkPHP.com - The Friendly PHP Community

    Watch Reaper Online - Watch Chuck Online

  3. #3
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,609
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    A quick test yields this error in the Firefox JS debug window ...

    Code:
    Error: document.eventFinder has no properties
    Source File: http://localhost/test2.htm
    Line: 3
    Edit:

    That's in relation to the original post - not the reply above.
    Ian Anderson
    www.siteguru.co.uk

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Since your script occurs before the form, you are trying to find an element that doesn't exist yet.

    Move the script after the form, or make it run after the document has loaded (using an event listener or an onload event handler).
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,609
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Indeed.

    Code:
    <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>
    <SCRIPT language=JavaScript TYPE=text/javascript>
    alert("test");
    var _temp = document.getElementsByName('sorted')[0].value;
    alert(_temp);
    alert("test1");
    </SCRIPT>
    Ian Anderson
    www.siteguru.co.uk

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, everyone!

    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 (the error is what siteguru pointed out that Firefox was saying - I keep getting that consistently), 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.

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure that Firefox supports the document['eventFinder'] syntax. It's old-school anyway.

    Replace <FORM NAME="eventFinder" …> with <FORM ID="eventFinder" …> and use
    Code JavaScript:
    var _de = document.getElementById("eventFinder");
    Birnam wood is come to Dunsinane

  8. #8
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, AutisticCuckoo. Unfortunately, that doesn't seem to work either .

  9. #9
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have the same syntactical constructs for the form elements.

    Try using _de.elements['exactDateText'].value etc., or use id attributes and document.getElementById().
    Birnam wood is come to Dunsinane

  10. #10
    SitePoint Addict Wildhoney's Avatar
    Join Date
    Apr 2006
    Location
    Nottingham
    Posts
    246
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ...And hence use my code that I compiled for you earlier on this thread. That will loop through every single element in your form so do you as you please with that. The possibilities are endless.
    TalkPHP.com - The Friendly PHP Community

    Watch Reaper Online - Watch Chuck Online

  11. #11
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I solved this problem - it was a JavaScript file I forgot to include (which had, among other things, the definition for the insertMenu function). However, I guess I'll work on both the suggestions above - I do not still know why things are working, because I myself thought the same syntactical constructs could be a problem. They appear to be working.

    And I did change the "form name=" to "form id=", to use the getElementById that Wildhoney suggested - I reverted everything now to what was working, since I am scared that things will go wrong again. But I will try to make it more clean and conventional. Thanks for all the help, AutisticCuckoo and Wildhoney!


Bookmarks

Posting Permissions

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