Variable not defined in Firefox

Variable not defined.

[gosman]

I have a search form that works fine in IE but fails to work in Firefox.

I have downloaded firebug and this is the error I'm receiving when I click the submit button.

product is not defined

This is the button code

<input type="image" src="/images/button-go.gif" onclick="showResult(product.value)" name="go">

and this is the textbox code

<input class="search" type="text" id="product" name="product" size="34" />

[rocknbil]

Two things:

<input type="image" src="/images/button-go.gif" onclick="showResult(document.getElementById('product').value)" name="go">

But you must remember, a image is not a "natural click event object" and this will always fail in IE 6. IMO, you should always use the right tool for the job:

<a href="#" id="go-link" onclick="showResult(document.getElementById('product').value; return false;"><input type="image" src="/images/button-go.gif" name="go"></a>

Corollary to the above, you could make this completely unobtrusive by making this an external function. Note I've ID'ed the link above.

In the external or head-of-doc JS:

window.onload=function() { 
 if (document.getElementById('go-link')) { 
 document.getElementById('go-link').onclick=function() { 
 return showResult(document.getElementById('product').value; 
 }; 
 } 
}; 

Be sure to add return false; to the end of your showResult function. Return false is what prevents the link from doing what it normally does, going to the specified location.

Now your document code is lean and mean:

<a href="#" id="go-link"><input type="image" src="/images/button-go.gif" name="go"></a>

[gosman]

Thanks rocknbil