Is Null, Not an Object, or Not Defined

I downloaded the Firefox hoping that I would get a better description of the "page error" for my Javascript code; but, IE at least gave a clue. The Firefox gave none.

I have tried

1. document.sortKey.value="firstName";
2. document.forms[0].sortKey.value="firstName";
3. document.elements.sortKey.value="firstName";
4. document.form[0].elements.sortKey.value="firstName";

I keep getting those are null or not object type. I do have two forms in my page. But, the form that I am trying to submit is the first one of those two forms. Please help me to spot the problems.

Here is my code:

<HTML>
<HEAD>
<script>
function doSubmit( id )
{
if ( id == 'ascFirstName' )
{
document.sortKey.value = "firstName";
document.orderKey.value = "ASC";
}
if ( id == 'descFirstName' )
{
document.sortKey.value = "firstName";
document.orderKey.value = "DESC";
}
if ( id == 'ascLastName' )
{
document.sortKey.value = "lastName";
document.orderKey.value = "ASC";
}
if ( id == 'descLastName' )
{
document.sortKey.value = "lastName";
document.orderKey.value = "DESC";
}
 
document.forms[0].submit();

}
</script>
<TITLE>XXXXX</TITLE>
</HEAD>
 
<BODY>
<html:form action="/admin/findUsers.do">
...
<span class="dataHeader">First Name 
<A id='ascFirstName' on_click='doSubmit( this.id )'>
<html:img page="/images/upArrow.gif" border="0"
alt="ascending" />
</A>
 
<A id='descFirstName' on_click='doSubmit( this.id )'>
<html:img page="/images/downArrow.gif" border="0"
alt="descending" />
</A>
</span>
<br>
<html:text property="filterFirstName" size="15" onchange="javascript:this.form.submit()"/>
<span class="dataHeader">Last Name 
<A id='ascLastName' on_click='doSubmit( this.id )'>
<html:img page="/images/upArrow.gif" border="0"
alt="ascending" />
</A>
 
<A id='descLastName' on_click='doSubmit( this.id )'>
<html:img page="/images/downArrow.gif" border="0"
alt="descending" />
</A>
</span>
<br>
<html:text property="filterLastName" size="15" onchange="javascript:this.form.submit()"/>
...
</html:form>
 
<html:form action="/admin/maintainuserdetail.do">
                       ....
                </html:form>
</BODY>
</HTML>

Firefox is usually pretty good at flagging problems with JavaScript. Did you use the Tools -> JavaScript Console?

As to the code, more interesting than the source would be the resulting HTML. Then we could see which HTML elements get created, and which names/IDs they have.

Yes, showing us the Struts server-side Struts source is pretty much useless for diagnosing client-side problems.

There are all kinds of Javascript tools available for Firefox. Look into Firebug.

because:

document.FORMNAME.elementName.value

Eric

Thank to all for kind responses.

Follow your instruction, I have used the Firefox Javascript Console. I do have a better clue now. But, it is not enough for me figure out the problem.

I have tried:

document.forms[0].sortKey.value = "firstName";

and

document.FindUsersForm.sortKey.value = "firstName";

The Firefox Javascript Console indicated that both of the two statements above have no property. That is:

document.forms[0].sortKey has no properties.

and

document.FindUsersForm.sortKey has no properties;

I have triple checked my FindUsersForm. It defines String SortKey and String orderKey. Both of them have proper getter and setters.

I have also 'view source' of the displayed web page. But, if offers no clue because the clicking on the link does not work at all.

Thanks in advance.

forms[0] means you are using the first form on the page. You have multiple. So if the field is in the second form, it is not going to find it.

That error message is saying that it has no properties since I can not find the object.

Eric

Good point. It is the third form in my web page. Therefore, I tried:

document.forms[2].sortKey.value = "firstName";
document.forms[2}.submit();

But, I got the same message saying that document.forms[2].sortKey has no properties.

I have also tried:

document.forms[1].sortKey.value = "firstName";
document.forms[1}.submit();

and
document.forms[3].sortKey.value = "firstName";
document.forms[3}.submit();

Error messages are the same.

when you do a view source on the page does the names of your form elements change?

Does it work if you use a form name

document.forms["formName"].

or

document.formName.

Eric

The names of my form elements do not change when I do 'view source'.

I have tried both:

document.forms["FindUsersForm"].sortKey.value = "firstName"
document.forms["FindUsersForm"].submit();

and

document.FindUsersForm.sortKey.value = "firstName"
document.FindUsersForm.submit();

The error messages are the same: has no properties.

Can you post the source? Not the JSP but the source you get with View Source on the browser?

Thanks to all for your continuing and strong support. I really appreciate your help. I am simply working on what clients want to have in the web page although I do not quite agree on the page design.

The error message given by the Firefox has been identified. The error message means that I have to specify the 'sortKey' and 'orderKey' as properties inside the <html:form ....> tag.

Because I have multiple forms in my web page, I have also given an ID to the form that I intend to use the Javascript to submit.

But, while the values entered in text fields inside the form get submitted when any of the links are clicked, the constants for the sortKey and orderKey defined inside the Javascript using those "if" statements do "not" get submitted when the corresponding link is clicked. Therefore, there are still problems with the Javascript. I wonder if you could help in spotting my mistake(s).

Here is the code:

<HTML>
<HEAD>
<script>
function doSubmit( id )
{
if ( id == 'ascFirstName' )
{
document.forms['xxx'].sortKey.value = "firstName";document.forms['xxx'].orderKey.value = "ASC";}
if ( id == 'descFirstName' )
{
document.forms['xxx'].sortKey.value = "firstName";document.forms['xxx'].orderKey.value = "DESC";}
if ( id == 'ascLastName' )
{
document.forms['xxx'].sortKey.value = "lastName";document.forms['xxx'].orderKey.value = "ASC";}
if ( id == 'descLastName' )
{
document.forms['xxx'].sortKey.value = "lastName";document.forms['xxx'].orderKey.value = "DESC";}
 document.forms['xxx'].submit();
}</script>
<TITLE>XXXXX</TITLE>
</HEAD>
<BODY>
<html:form id="xxx" action="/admin/findUsers.do">
<html:hidden property="sortKey" />
<html:hidden property="orderKey" />
...
<span class="dataHeader">First Name
 <A id='ascFirstName' on_click='doSubmit( this.id )'>
<html:img page="/images/upArrow.gif" border="0"alt="ascending" />
</A>
 <A id='descFirstName' on_click='doSubmit( this.id )'>
<html:img page="/images/downArrow.gif" border="0"alt="descending" />
</A></span>
<br>
<html:text property="filterFirstName" size="15" onchange="javascript:this.form.submit()"/>
<span class="dataHeader">Last Name
 <A id='ascLastName' on_click='doSubmit( this.id )'>
<html:img page="/images/upArrow.gif" border="0"alt="ascending" />
</A>
 <A id='descLastName' on_click='doSubmit( this.id )'>
<html:img page="/images/downArrow.gif" border="0"alt="descending" />
</A></span>
<br><html:text property="filterLastName" size="15" onchange="javascript:this.form.submit()"/>
...
</html:form>
 <html:form action="/admin/maintainuserdetail.do">
                       ....                </html:form></BODY></HTML>

[ July 25, 2006: Message edited by: Natalie Kopple ]

[ July 25, 2006: Message edited by: Natalie Kopple ]

[ July 25, 2006: Message edited by: Natalie Kopple ]
[ July 25, 2006: Message edited by: Natalie Kopple ]

well if you use an ID you need to use getElementById().

Also you need to make sure that your element names are correct.

Eric