Question

51

Javascript focus() and select() quirk

rated 0 times [ 57] [ 6] / answers: 1 / hits: 48272 / 15 Years ago, mon, april 6, 2009, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

darennevina

Add To Favorites

Follow

Total Points: 422

Total Questions: 128

Total Answers: 105

Location: Comoros

Member since Tue, Mar 14, 2023

1 Year ago

darennevina questions

1 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'address')

Sun, Jun 5, 22, 00:00, 2 Years ago

1 change the active list when scrolling navbar

Fri, Nov 12, 21, 00:00, 3 Years ago

1 DiscordjsError: Request to use token, but token was unavailable to the client

Wed, Nov 25, 20, 00:00, 4 Years ago

1 How to check a checkbox in Google Apps Script and uncheck all the other cells?

Wed, Sep 23, 20, 00:00, 4 Years ago

1 How do I extract data from this NodeList?

Fri, Sep 18, 20, 00:00, 4 Years ago

View All

answered 15 Years ago timothyc · Accepted Answer

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.)