Basics... addressing html elements in js

[Luke]

Elements with name attribute:
form, input, textarea, a, frame, iframe, button, select, map, meta,
applet, object, param, img (if you know more reply...)

Methods of addresing html elements:
<form name="myform">
<input name="myinput" />
</form>
1. var input = document.forms. myform.myinput;//from nn3+
2. var input = document.forms["myform"].myinput;//from nn3+
3. var input = document.forms[0].myinput;//from nn3+, if form is first
in html

<form id="myform">
<input name="myinput" id="myinput"/>
</form>
4. var input = document.all.my form.myinput;//from ie4+
5. var input = document.all["myform"].myinput;//from ie4+
6. var input = document.all("m yform").myinput ;//from ie4+
7. var input = myform.myinput;//from ie4+, dropped document.all
8. var input = document.all.it em("myform").my input;//from ie4+
9. var input = document.all.it em("myinput");//from ie4+

10. var input = document.getEle mentById("myinp ut");//DOM

Questions:
1.
My question is about form showed in points 1,2,3. Does this form can be

applied to form like this (with id, without name attr):
<form id="myform">
</form>
....
document.forms. myform;
....
2.
Does forms showed in points 1,2,3 are most supported by different
browsers ? (also with support addresing via id attr and name attr).

3.
Does forms showed in points 4,5,6,7,8,9 can also be used with form that
have only name attr (without id):
<form name="myform">
</form>
....
document.all.my form;
....

4.
Do you know different ways of addressing elements in html and which is
most commonly supported by wide spread of different browsers ?

Thanks for answer in advance :)

[Randy Webb]

Re: Basics... addressing html elements in js

Luke said the following on 9/24/2005 2:22 PM:
[color=blue]
> Elements with name attribute:
> form, input, textarea, a, frame, iframe, button, select, map, meta,
> applet, object, param, img (if you know more reply...)[/color]

I know a lot more. You can find them in the w3c site in the HTML sections.

<URL: http://www.w3.org/TR/REC-html40/index/elements.html >

And it shows what DTD's each are valid in.
[color=blue]
> Methods of addresing html elements:
> <form name="myform">
> <input name="myinput" />
> </form>
> 1. var input = document.forms. myform.myinput;//from nn3+
> 2. var input = document.forms["myform"].myinput;//from nn3+
> 3. var input = document.forms[0].myinput;//from nn3+, if form is first
> in html[/color]

The best of those 3 is choice 2.
[color=blue]
> <form id="myform">
> <input name="myinput" id="myinput"/>
> </form>
> 4. var input = document.all.my form.myinput;//from ie4+
> 5. var input = document.all["myform"].myinput;//from ie4+
> 6. var input = document.all("m yform").myinput ;//from ie4+
> 7. var input = myform.myinput;//from ie4+, dropped document.all
> 8. var input = document.all.it em("myform").my input;//from ie4+
> 9. var input = document.all.it em("myinput");//from ie4+[/color]

All of the above are IE-only and should be forgotten.
[color=blue]
> 10. var input = document.getEle mentById("myinp ut");//DOM[/color]

Forget that one also if you want backwards compatability.
[color=blue]
> Questions:
> 1.
> My question is about form showed in points 1,2,3. Does this form can be
>
> applied to form like this (with id, without name attr):
> <form id="myform">
> </form>
> ....
> document.forms. myform;[/color]

Yes. With name only. Use choice 2 though.
[color=blue]
> ....
> 2.
> Does forms showed in points 1,2,3 are most supported by different
> browsers ? (also with support addresing via id attr and name attr).[/color]

The most cross-browser way to access a form control is:

document.forms['formNAMEnotID'].elements['elementNAMEnot ID'].value

<form name="formNAMEn otID">
<input name="elementNA MEnotID">

With the exception of select lists in NN4 and Radio elements in just
about every browser on the planet.
[color=blue]
> 3.
> Does forms showed in points 4,5,6,7,8,9 can also be used with form that
> have only name attr (without id):
> <form name="myform">
> </form>
> ....
> document.all.my form;
> ....[/color]

Probably so as IE is so screwed up with it's document.all collection.
But it's IE-only syntax so avoid it.

There is an exception to that in Gecko based browsers but my opinion of
that happening is that it was a stupid mistake on the part of the Gecko
developers.
[color=blue]
> 4.
> Do you know different ways of addressing elements in html and which is
> most commonly supported by wide spread of different browsers ?[/color]

That depends on the element and I don't feel like taking that W3C list
and showing the different ways to access each.

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly

[Luke]

Re: Basics... addressing html elements in js


Randy Webb napisal(a):[color=blue]
> Luke said the following on 9/24/2005 2:22 PM:
>[color=green]
> > Elements with name attribute:
> > form, input, textarea, a, frame, iframe, button, select, map, meta,
> > applet, object, param, img (if you know more reply...)[/color]
>
> I know a lot more. You can find them in the w3c site in the HTML sections.
>
> <URL: http://www.w3.org/TR/REC-html40/index/elements.html >[/color]
I listed all above...
Stricly speaking in HTML 4.01 one element with name attr. is
deprecated(take n form

http://www.w3.org/TR/html401/index/attributes.html):

button
textarea
applet (name attr. deprecated... use object instead)
select
form
frame (only in frameset dtd)
iframe (only in frameset dtd)
img
a
input
object
map
param
meta
So i can address some of those elements via its ->name<- attribute by
using document arrays like:
document.anchor s[] (for <a name=""...> elements)
document.applet s[] (for <applet name=""...> deprecated in html 401
elements)
document.forms[] (for <form name=""..> elements)
document.links[] (for <a name="" href=""> elements)
document.images[] (for <img name=""> elements)
document.frames[] (for <frame name=""> and <iframe name="">)
, and
document.embeds[] (for dropped <embed name=""> elements in html 401
specs).
document.layers[] (for only NN4 <layer name=""> elements)

, for rest elements in the list, that is:
object
map
param
meta
a must use DOM based addresing by
document.getEle mentByName("nam eNotID"); //since IE5+,
NN6+,Mozilla,Sa fari
or better
document.getEle mentById("IDNot Name); //if i am using id's, since IE5+,
NN6+,Mozilla,Sa fari
[color=blue]
> The most cross-browser way to access a form control is:
>
> document.forms['formNAMEnotID'].elements['elementNAMEnot ID'].value
>
> <form name="formNAMEn otID">
> <input name="elementNA MEnotID">[/color]
Thanks for that, i was in dark before i read your reply :)
[color=blue]
> With the exception of select lists in NN4 and Radio elements in just
> about every browser on the planet.[/color]
So there is exception ? :( So if we have form like this:
<form name="myFormNam e">
<input type="radio" name="myRadio" value="Yes" />Yes
<input type="radio" name="myRadio" value="No" />No
</form>

so i can addres the first radio like this(?):
var firstRadio = document.forms["myFormName "].elements["myRadio"][0];
(and for checkboxes with the same name too).

, and for select like this:
<form name="myFormNam e">
<select name="mySelect" >
<option value="Yes">Yes </option>
<option value="No">No</option>
</select>
</form>
i can address it (cross-browser) like this:
var mySelect = document.forms["myFormName "].elements["mySelect"];//for
<select>
and,
var firstOption =
document.forms["myFormName "].elements["mySelect"].options[0];//for
first option element

Thanks for answer in advance.

[Martin Honnen]

Re: Basics... addressing html elements in js



Luke wrote:
[color=blue]
> Randy Webb napisal(a):[/color]
[color=blue][color=green]
>>The most cross-browser way to access a form control is:
>>
>>document.form s['formNAMEnotID'].elements['elementNAMEnot ID'].value
>>[/color][/color]
[color=blue][color=green]
>>With the exception of select lists in NN4 and Radio elements in just
>>about every browser on the planet.[/color]
>
> So there is exception ?[/color]

The exception with <select> elements and the above expression in
Netscape 4 is that the value property of the <select> itself is always
null so while the access to the control is of course
document.forms['formNAMEnotID'].elements['elementNAMEnot ID']
the complete expression above is
document.forms['formNAMEnotID'].elements['elementNAMEnot ID'].value
and that gives null in Netscape 4 and is therefore not useful. So for a
select and its value if you want to cover Netscape 4 you need e.g.
var select =
document.forms['formNAMEnotID'].elements['elementNAMEnot ID'];
if (select.selecte dIndex > -1) {
var value = select.options[select.selected Index].value;
}


--

Martin Honnen

http://JavaScript.FAQTs.com/

[Luke]

Re: Basics... addressing html elements in js

> So for a[color=blue]
> select and its value if you want to cover Netscape 4 you need e.g.
> var select =
> document.forms['formNAMEnotID'].elements['elementNAMEnot ID'];
> if (select.selecte dIndex > -1) {
> var value = select.options[select.selected Index].value;
> }[/color]
Thank's for that too :)
For radio buttons i would do the same way e.g.:
var buttonGroup =
document.forms['formNAMEnotID'].elements['elementNAMEnot ID'];
for (var i = 0; i < buttonGroup.len gth; i++) {
if (buttonGroup[i].checked) {
var value = buttonGroup[i].value;
}
}
,
but what about checkboxes with the same name ? Can i use snipped above
(eg assuming checkboxes with the same name have the lenght property ?).

Thanks for answer in advance.

[ASM]

Re: Basics... addressing html elements in js

Luke a écrit :[color=blue]
>but what about checkboxes with the same name ?[/color]

checkboxes with same name is non sens

you can't choice 2 times same thing



--
Stephane Moriaux et son [moins] vieux Mac

[ASM]

Re: Basics... addressing html elements in js

Luke a écrit :[color=blue]
> Randy Webb napisal(a):
>[color=green]
>>Luke said the following on 9/24/2005 2:22 PM:
>>
>>[color=darkred]
>>>Elements with name attribute:
>>>form, input, textarea, a, frame, iframe, button, select, map, meta,
>>>applet, object, param, img (if you know more reply...)[/color]
>>
>>I know a lot more. You can find them in the w3c site in the HTML sections.
>>
>><URL: http://www.w3.org/TR/REC-html40/index/elements.html >[/color]
>
> I listed all above...
> Stricly speaking in HTML 4.01 one element with name attr. is
> deprecated(take n form
> http://www.w3.org/TR/html401/index/attributes.html):[/color]

I have some difficulties reading english but not to this point !

if you scroll down to 'name' in this table (left col)
what do you see about form and ist elements : no one is deprecated !

--
Stephane Moriaux et son [moins] vieux Mac

[ASM]

Re: Basics... addressing html elements in js

Luke a écrit :[color=blue]
> Elements with name attribute:
> form, input, textarea, a, frame, iframe, button, select, map, meta,
> applet, object, param, img (if you know more reply...)
>
> Methods of addresing html elements:
> <form name="myform">
> <input name="myinput" />
> </form>
> 1. var input = document.forms. myform.myinput;//from nn3+[/color]

on my idea :
1. var input = document.myform .myinput;//from nn3+

[color=blue]
> 2. var input = document.forms["myform"].myinput;//from nn3+[/color]

2.bis var input = document.forms["myform"].elements['myinput'];//from nn3+
[color=blue]
> 3. var input = document.forms[0].myinput;//from nn3+, if form is first
> in html
>
> <form id="myform">
> <input name="myinput" id="myinput"/>
> </form>
> 4. var input = document.all.my form.myinput;//from ie4+
> 5. var input = document.all["myform"].myinput;//from ie4+
> 6. var input = document.all("m yform").myinput ;//from ie4+
> 7. var input = myform.myinput;//from ie4+, dropped document.all
> 8. var input = document.all.it em("myform").my input;//from ie4+
> 9. var input = document.all.it em("myinput");//from ie4+
>
> 10. var input = document.getEle mentById("myinp ut");//DOM
>
> Questions:
> 1.
> My question is about form showed in points 1,2,3. Does this form can be[/color]

point 1 is false
[color=blue]
>
> applied to form like this (with id, without name attr):
> <form id="myform">
> </form>
> ...
> document.forms. myform;[/color]

no : document.myform[color=blue]
> ...
> 2.
> Does forms showed in points 1,2,3 are most supported by different
> browsers ? (also with support addresing via id attr and name attr).[/color]

input = document.forms['myform'].elements['myinput'];
with that you are sure to be understood by any browser
(is myform and myinput are names and not ids)
[color=blue]
>
> 3.
> Does forms showed in points 4,5,6,7,8,9 can also be used with form that
> have only name attr (without id):[/color]

no because only understood by IE
(even if fiew browsers try to play to be IE)
[color=blue]
> <form name="myform">
> </form>
> ...
> document.all.my form;
> ...
>
> 4.
> Do you know different ways of addressing elements in html and which is
> most commonly supported by wide spread of different browsers ?
>
> Thanks for answer in advance :)[/color]

if you use id
you'll be not understood by NC4.5 (at least)

names in form's elements have to exist for submiting
so ... why not to use them ?

document.forms['myformName'].elements['myinputName']


--
Stephane Moriaux et son [moins] vieux Mac

[Luke]

Re: Basics... addressing html elements in js


ASM napisal(a):[color=blue]
> Luke a écrit :[color=green]
> >but what about checkboxes with the same name ?[/color]
>
> checkboxes with same name is non sens
>
> you can't choice 2 times same thing
>[/color]
It makes sense... the input's with the same name are passed on submit
via URL when method is GET or via POST (see specs for HTTP)
<form action="action/" method="get">
<input type="checkbox" name="mycheck" />Option 1
<input type="checkbox" name="mycheck" />Option 2
<input type="submit" />
</form>
, so when you submit it will be passed via URL.

Please read the article:
http://www.cs.tut.fi/~jkorpela/forms/choices.html (find text related to
how to make options many-to-many).

In J2EE you can get values of this parameter "mycheck" from form above
by using in servlet, action or even jsp page simple line:
String[] mycheck = request.getPare meterValues("my check");
In PHP:
foreach ($_GET['mycheck'] as $choice) {

//will iterate as many times as count of values in request
parameter mycheck
}

Got it ?

[Luke]

Re: Basics... addressing html elements in js

The fragment form article:

http://www.cs.tut.fi/~jkorpela/forms/choices.html#select-inflex

,
<cite>
"On the other hand, on Lynx for example a SELECT MULTIPLE is
implemented as a fully visible list of options, with toggleable boxes
for each option separately. This is basically similar to the
implementation of a set of -->checkboxes<-- on most browsers, so by
using such a construct instead, you could make the user interface
easier on most popular browsers too."
</cite>
As you know <select> has one name and can have multiple values with
multiple="multi ple".

Also see more carefully (D means deprecated on the row with name
attribute of <applet> in html 401:

http://www.w3.org/TR/html401/struct/objects.html#adef-name-APPLET

See it carrefully !

[Luke]

Re: Basics... addressing html elements in js

As you can see whole <applet> in html 401 is deprecated (use instead
<object>... and how to do that pleas read about tools in jdk from sun).

http://www.w3.org/TR/html401/index/attributes.html (D means deprecated
on the row with name
attribute of <applet> in html 401)

[ASM]

Re: Basics... addressing html elements in js

Luke a écrit :[color=blue]
> ASM napisal(a):
>[color=green]
>>checkboxes with same name is non sens
>>
>>you can't choice 2 times same thing[/color]
>
> It makes sense... the input's with the same name are passed on submit
> via URL when method is GET or via POST (see specs for HTTP)
> <form action="action/" method="get">
> <input type="checkbox" name="mycheck" />Option 1
> <input type="checkbox" name="mycheck" />Option 2
> <input type="submit" />
> </form>
> , so when you submit it will be passed via URL.[/color]

an you get :
- mycheck=Option 1 and mycheck=Option 2 ?
or
- mycheck= and mycheck= (because no value) ?
[color=blue]
> Please read the article:
> http://www.cs.tut.fi/~jkorpela/forms/choices.html (find text related to
> how to make options many-to-many).[/color]

interesting (but excuse about style in options is old no?)
[color=blue]
> In J2EE you can get values of this parameter "mycheck" from form above
> by using in servlet, action or even jsp page simple line:
> String[] mycheck = request.getPare meterValues("my check");
> In PHP:
> foreach ($_GET['mycheck'] as $choice) {
>
> //will iterate as many times as count of values in request
> parameter mycheck
> }
>
> Got it ?[/color]

Yeap man :-)



--
Stephane Moriaux et son [moins] vieux Mac

[Luke Matuszewski]

Re: Basics... addressing html elements in js

In theory html 401 specs states that radios and checkboxes should have
-->value<-- attribute (and i forgot about it when showing example).
Correct should be:[color=blue]
> <form name="myform" action="action/" method="get">
> <input type="checkbox" name="mycheck" value="opt1"/>Option 1
> <input type="checkbox" name="mycheck" value="opt2"/>Option 2
> <input type="submit" />
> </form>[/color]

to address it in JS you could do:
forms["myform"].elements["mycheck"] to get collection of elements in
html.

So my question is reasonable... why?
- for radios the lenght is defined in js;
- for checkboxes with the same name it is not defined, but i assume it
is html collection (special collection) and my question was about this
property...
To be more general i asked also about inputs/textareas and other
controls with the same name does HAVE -->lenght<-- property.

So please try to make as little noise as you can... and try to make
your post look straight
- ANSWERS should be only WRITTEN IF YOU KNOW THE DIRECT SOLUTION;
It will make people life easier... :)

[ASM]

Re: Basics... addressing html elements in js

Luke a écrit :[color=blue]
>
> Also see more carefully (D means deprecated on the row with name
> attribute of <applet> in html 401:
> http://www.w3.org/TR/html401/struct/...ef-name-APPLET
> See it carrefully ![/color]

I'm lost
do you answer to somebody ?

What does do an applet in a form?



--
Stephane Moriaux et son [moins] vieux Mac

[Luke Matuszewski]

Re: Basics... addressing html elements in js

The topic in this post is "addressing html elements in js" so it is
general, but it is true that i focused on forms...However the point 4
in my first post states:
"4.
Do you know different ways of addressing elements in html and which is
most commonly supported by wide spread of different browsers ?
"
, so i asked the general method of accessing elements...

I think that now you understand everything...
Best greets...peace :)