Javascript focus() and select() quirk

Question

Im working on a form and getting null or not an object errors in ie.

<form action="#" method="post" name="adv_search">

<input class="inputbox" type="text" name="keyword1" value="none" id="keyword1"/>
</form>

<script>
document.adv_search.keyword1.focus();
document.adv_search.keyword1.select();
</script>

//whereas if I use

<script>
var key1 = document.getElementById('keyword1');
   key1.focus();
   key1.select();
</script>

//everything is fine

i would like to understand why. i would like it to work without having the id tag for the input field

thanks in advance

---

shouldnt the document.formname.fieldname.focus(); and document.formname.fieldname.select(); work?

Answer 1

Your particular example works for me, but if I add another field with the same name:

<input type="text" name="keyword1" />
<input type="text" name="keyword1" />

Then document.adv_search.keyword1.focus() will fail with the error you specify.

The reason is that:

document.adv_search.keyword1

is a shortcut for this syntax (which goes back to DOM Level 0 and the Netscape 2 days!):

document.forms.adv_search.elements.keyword1

(Incidentally, it is better to use this full syntax, instead of relying on the behaviour of the ‘document’ and ‘form’ objects being indexed on names: if a new method is added to HTMLDocument or HTMLFormElement, that might clash with the control name you are using. This is less of an issue when you use the document.forms or form.elements collections. Also, IE mistakenly dumps all names and ids into ‘document’, so if you've got an element with id="adv_search" in addition to the form with that as a name, document.adv_search will return the wrong one.)

Anyway, the DOM Level 0 scripting methods behave slightly curiously when you access an element by name like this. If there is a single matching element, you'll get that one as a standalone object. If, on the other hand, there are more than one, you'll get a list of objects. You can't call focus() or select() on an array-like list, which is why the error appears; you'd have to do something like keyword1[0].focus() when the list was returned.

So you have to decide whether you're going to be using old-school DOM Level 0 methods to access your form controls — in which case you're going to have to cope with sniffing for single-or-multiple-controls — or move to the ID-based methods introduced by ‘DOM Level 1’:

document.getElementById('keyword1').focus();

The ID-based methods are generally a bit more typing (in the script and to add ‘id’s to all elements you wish to access this way, if they don't already have them), but they are simple and unambiguous. (Also you can then drop the name on the <form> itself.)

Answer 2

The ID approach really is best but if you want to go by name, use getElementsByName.

In this case, it might look like this:

<script>
   // retrieves array of objects with the name 'keyword1' 
   // and takes the first one
   var key1 = document.getElementsByName('keyword1')[0]; 
   key1.focus();
   key1.select();
</script>