Safari bug? Error when I have more then one element with the same id

[Stale]

This cannot be right.

I have two forms on one page. Both forms have an input element with the id="lastname". When I use a javascript to access theese input elements, I have to use

document.forms["form1"]["lastname"]

In IE, Firefox, and Opera, this works fine, because the two input elements are inside two different forms.
BUT: It does not work fine in safari.
What I do not understand is that Safari would not allow two elements with the same id in two DIFFERENT forms.

[acoder]

You can have two elements with the same name, but an ID should be unique.

[Stale]

Unique ID?

This is not only a form-input problem, but all elements on a page, Elements that cannot contain the name attribute (like <div>).

So thats why its not good enough. Many webpages, and more to come, are build up by external data, or by multiple webpages, created by different persons. So, when a javascript wants to access an element, it should be able to do so, if the scripts knows where to look. Like my example, the script knows it should look inside form1, and finds the element, in all major browsers except Safari...

[acoder]

If you give your input element the name "lastname", document.forms["form1"]["lastname"] should work.

[drhowarddrfine]

As acoder said, ids are unique names to one element. If you must apply the same style/name to more than one element, use 'class'.

[Stale]

OK I get that.

But it does not resolve my problem.

Lets say you have an application wich are build up by several DIVSs. Inside every DIV you have several SPANs, and you want to change the innerHTML of one or more of the SPANs. The SPANs has id attributes, but the id can be the same as an id inside one of the other DIVs.

This is easy, because you will access the SPAN you wish, by first accessing the DIV and then access the SPAN inside that DIV.

And this is what is working on IE Firefox and Opera but NOT in Safari.

[acoder]

Lets say you have an application wich are build up by several DIVSs. Inside every DIV you have several SPANs, and you want to change the innerHTML of one or more of the SPANs. The SPANs has id attributes, but the id can be the same as an id inside one of the other DIVs.

This is easy, because you will access the SPAN you wish, by first accessing the DIV and then access the SPAN inside that DIV.

An ID should be unique otherwise document.getElementById() is undefined.

If you want spans within a div try:

divEl.getElementsByTagName("span")