Today we ran accross a unique issue in document.getElementByID, the value was not getting set or updated in the form for a particular user using IE. So i researched little bit and found the following.
document.getElementByID works like a parser on the HTML form, it collects all the elements which has ID and builds a tree like structure as shown below.
<element id>
<value>
<style>
<style tags>
<other element tags>
</element id>
--- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ----
Next element
---- ---------- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ----
Where as document.forms[0] looks into the form element of the design and builds a tree as following
<field element>
<value>
<other tags>
</field element>
------ ---- ----- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ----
Next field
----- ----- --- ----- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ----
therefore the usage is different when you try to access the value by above two methods. Most of the time it is likely that you get a handle to elements using both methods. But make sure you put the id for every element if you are using getElementByID. or you can use document.form[0] which requires only the fieldname.
But some of the DHTML and CSS related code works only with document.getElementByID so in that case, you do not have any other option left.
Final Notes. It is good idea to have a function to access/Update the data. And in turn in the function you can decide which method to use based upon the parameters
document.getElementByID works like a parser on the HTML form, it collects all the elements which has ID and builds a tree like structure as shown below.
<element id>
<value>
<style>
<style tags>
<other element tags>
</element id>
--- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ----
Next element
---- ---------- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ----
Where as document.forms[0] looks into the form element of the design and builds a tree as following
<field element>
<value>
<other tags>
</field element>
------ ---- ----- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ----
Next field
----- ----- --- ----- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ---- --- ----
therefore the usage is different when you try to access the value by above two methods. Most of the time it is likely that you get a handle to elements using both methods. But make sure you put the id for every element if you are using getElementByID. or you can use document.form[0] which requires only the fieldname.
But some of the DHTML and CSS related code works only with document.getElementByID so in that case, you do not have any other option left.
Final Notes. It is good idea to have a function to access/Update the data. And in turn in the function you can decide which method to use based upon the parameters