[thelist] form id instead of name?

Joe Crawford joe at artlung.com
Wed Sep 5 09:15:13 CDT 2001


on 9/4/2001 8:48 PM, Lindsay Evans at lindsay at redsquare.com.au wrote:

>> is there different syntax for using the ID?
> 
> just off the top of my head:
> 
> document.getElementById('theform').thebutton[0].checked=true
> 
> not tested or anything

That *sounds* right to me.

Between HTML 4.0 and 4.01 the w3c "forgot" to include the "name" attribute -
so to do validating code what you end up doing is addressing page elements
by number, rather than by name.

So document.forms[0].elements[3].value.

Which is the first form's 4th element. yes?

NOW, how the receiving end (if you're going out to a CGI) handles not having
that name, I don't know. I presume newer browsers would send the ID, but
older browsers might be a bit tougher.

This is kind of the glory of JavaScript - objects are addressible in many
ways. So for this

<tip subject="the wonders of addressing objects different ways" author="joe
crawford [artlung.com]">

<form name="stones" id="stones"
    onsubmit="alert(this.elements[1].value);alert(this.mick.value);return
false;">
<input name="keith">
<input name="mick" id="mick" value="Singer" onchange="alert(this.value)">
<input type="submit">
</form>

So for the above:

document.stones.mick.value
document.forms[0].mick.value
document.stones.elements[1].value
document.forms[0].elements[1].value

...are all the same.

Lindsay's example probably works as well for modern browsers with that fancy
getElementById --

document.getElementById('mick').value

further, I bet these variations will work as well:
document.getElementById('stones').mick.value
document.getElementById('stones').elements[1].value

And up in the "onchange" event, since we're *in* the element, we can do
"this.value" because we're *in* the element itself.

And in the onsubmit, we're submitting the form, so we can use this.mick or
this.elements[1] to call the same element.

So to recap, that's, uh, 10 different ways to address the same element using
javascript:

document.stones.mick.value
document.forms[0].mick.value
document.stones.elements[1].value
document.forms[0].elements[1].value
document.getElementById('mick').value <--needs modern browser
document.getElementById('stones').mick.value <--needs modern browser
document.getElementById('stones').elements[1].value <--needs modern browser
this.value <--in the element itself
this.mick.value <--in the form
this.elements[1].value) <--in the form

</tip>

And that, is pretty nifty!

    - Joe
--  
...........  Joe Crawford : thinking and design about the web
.... enigmatic narcissism and miscellany : http://artlung.com
.... community instigator : http://WebSanDiego.org
.... San Diego, California, USA .....................AAAFNRAA





More information about the thelist mailing list