View Full Version : onclick not working in FF. has no properties error.

08-30-2007, 05:52 AM
Hey, sorry if this has been asked before, but I've searched for the last two hours and can't find an answer. It works perfectly in IE and Opera, but the submit button won't do anything in FF.

This is a mockup of my form (doesn't actually use form tags):

URL<br /><input type="text" name="site" value="" size="80" /> (required)<br />
Description<br /><input name="desc" value="" size="80" type="text" /> (required)<br />
Notes<br /><textarea name="note" rows="2" cols="40"></textarea><br />
Tags<br /><input name="tags" value="" size="80" type="text" /><br />
<input type="hidden" name="submit" value="submit">
<button onclick="doSubmit();">submit</button><br /><br />
<div id="message" style="display: inline; font-size: 25px"></div>

in the head i have this:

<script src="ajax.js" type="text/javascript">

and the doSubmit() function in ajax.js looks like this:

function doSubmit(){
var url = "index_asdf.php?site=" + document.getElementById('site').value;
url += "&desc=" + document.getElementById('desc').value;
url += "&note=" + document.getElementById('note').value;
url += "&tags=" + document.getElementById('tags').value;
url += "&submit=" + document.getElementById('submit').value;

http.open("GET", url, true);
http.onreadystatechange = handleHttpResponse;


and the error i get is this:
"document.getElementById("site") has no properties"

i've tried absolutely every suggestion i could find online regarding similar problems, and i'm at a loss. please help! :)

08-30-2007, 06:07 AM
It helps to actually understand what document.getElementById() does. Its looking for an element with id="site" but no such element exists. I see you have this

<input type="text" name="site" value="" size="80" />
but you don't have id="site" in there like you should.

08-30-2007, 06:10 AM
Wow, that's embarassing, lol. Thanks!!!!!!!!!! (Is completely new to javascript)

Bill Posters
08-30-2007, 06:14 AM
<input type="text" name="site" value="" size="80" />


Where is the the element with id="name"?

IE is easily confused and doesn't know the difference between a name attribute and an id attribute, but better browsers, FF included, do.
If you're going to use getElementById, you'll need to be using id attributes. (It's common to repeat the value of the id attribute in the name attribute for form control and input elements.)


<input type="text" name="site" id="site" value="" size="80" />

Also worth knowing (for future reference)

It's advisable to avoid using words as values when that word is also the name of an attribute or property - even if you're not actually using that attribute on the page. Attribute values which use the same name as attribute names can sometimes confuse IE further as it doesn't appear to know the difference between an attribute name and an attribute value in certain circumstances.

i.e. as there is an attribute called name, you should avoid using 'name' as an attribute value, particularly for name or id attributes.

One other tip, use FF as your primary test browser. IE's idiosyncracies can often lead inexperienced developers down some blind alleys.

08-30-2007, 06:22 AM
Thanks for the advice :)