Fendi said:
I have encountered 2 variation (at least that's what I think) of
writing javascript to extract the value of a field:
The first being:
document.forms0].fieldname.value
meaning
document.forms[0].fieldname.value
The second being:
document.forms.elements['fieldname'].value
this is invalid as written. Either
document.forms[0].elements['fieldname'].value // or
document.forms.formName.elements['fieldname']
Can someone explain to me what the differences are between the 2, hich
is the one I should be using.
Call "DOM 0" the browser object models which have never been formally
standardised. The Netscape 3 model is a useful benchmark when looking at
other browsers since this model for form access hasn't changed much
since, and I'll simply ignore later document.all and
document.getElementById alternatives.
FORM ACCESS
============
document.forms
is an array of forms defined within the document in source order.
document.forms[0]
is the first, and perhaps only form in the document. This access method
is most useful for unnamed forms which probably havn't been seen since
Netscape 2. Netscape 3 allowed named form objects to be accessed as
named properities of this array, so either
document.forms.formName
document.forms['formName']
should access the form named 'formName'. The second format is more
useful for accessing a form whose name is stored in a variable.
Netscape also defined form name reflection on the document object, so
document.formName // or
document[formNameVariable]
where formNameVariable holds a 'formName' string should also access a
named form. Reflection on the window object:
window.formName
is a kludge in Opera to fix other inconsistancies in their DOM 0
implementation. *Never* access, or assume, named form objects are
reflected as window properties.
In summary standard methods for accessing a *form* are
document.formName // or
document.forms.formName // or
document.forms
// for the i'th form in a document
I have never known document.formName to fail, but would be interested to
hear if it has. *Personally* I would consider failure to be a browser bug.
FIELDS
=======
Netscape defined named fields to be reflected as properties of the form
object.
document.formName.fieldName
should access the field named 'fieldName'. It also defined an elements
array for working with elements without knowing their names, so
document.formName.elements
can be used to iterate through all elements in a form. However, in NS3
and NS4 the same underlying object was used for the form and the
elements array, so
document.formName.elements[fieldName]
returned
document.formName[fieldName]
because the equivalence:
document.formName==document.formName.elements
used to return true. Although this equality no longer holds in current
browsers, named access through the elements array still works (I presume
because of object prototyping). In consequence (IHMO) using named lookup
on the elements array for form object properties is misleading. For
example accessing a radio group name "myRadio" (with multiple radio
inputs) as
document.formName.elements.myRadio
returns an array of fields for the "myRadio" group, but this array is
not an entry in the elements array.
In summary, standard methods for looking up a field by name are
document.formName.fieldName // or
document.forms.formName.fieldName
If some browsers *need* to access fields through the elements array, I
would consider it a browser bug.
ALTERNATIVES
============
Processing of event handler text supplied in HTML attribute values for
forms and their field elements, sets up a scope chain that can access
(at least) field, form, document and global property values. This is
advanced, known to be broken in Opera, and I would not advise using this
in your code.
Form field elements have a 'form' property which refers to the
containing form, and the containing form has named properties referring
to other form field elements. This can simplify event handling code
without relying on the scope chain:
<form>
<input type="text" name="myText" value="hello ">
<input type="button"
onclick="alert(this.form.myText.value)" value="alert">
</form>
uses element properties to get to the text value without going through
document.
Hope it helps,
Dom