Basics... addressing html elements in js

L

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.myform.myinput;//from ie4+
5. var input = document.all["myform"].myinput;//from ie4+
6. var input = document.all("myform").myinput;//from ie4+
7. var input = myform.myinput;//from ie4+, dropped document.all
8. var input = document.all.item("myform").myinput;//from ie4+
9. var input = document.all.item("myinput");//from ie4+

10. var input = document.getElementById("myinput");//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.myform;
....

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 :)
 
R

Randy Webb

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

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.
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

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

All of the above are IE-only and should be forgotten.
10. var input = document.getElementById("myinput");//DOM

Forget that one also if you want backwards compatability.
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;

Yes. With name only. Use choice 2 though.
....
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).

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

document.forms['formNAMEnotID'].elements['elementNAMEnotID'].value

<form name="formNAMEnotID">
<input name="elementNAMEnotID">

With the exception of select lists in NN4 and Radio elements in just
about every browser on the planet.
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.myform;
....

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.
4.
Do you know different ways of addressing elements in html and which is
most commonly supported by wide spread of different browsers ?

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

Luke

Randy Webb napisal(a):
Luke said the following on 9/24/2005 2:22 PM:


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 >
I listed all above...
Stricly speaking in HTML 4.01 one element with name attr. is
deprecated(taken 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.anchors[] (for <a name=""...> elements)
document.applets[] (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.getElementByName("nameNotID"); //since IE5+,
NN6+,Mozilla,Safari
or better
document.getElementById("IDNotName); //if i am using id's, since IE5+,
NN6+,Mozilla,Safari
The most cross-browser way to access a form control is:

document.forms['formNAMEnotID'].elements['elementNAMEnotID'].value

<form name="formNAMEnotID">
<input name="elementNAMEnotID">
Thanks for that, i was in dark before i read your reply :)
With the exception of select lists in NN4 and Radio elements in just
about every browser on the planet.
So there is exception ? :( So if we have form like this:
<form name="myFormName">
<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="myFormName">
<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.
 
M

Martin Honnen

Luke said:
Randy Webb napisal(a):
The most cross-browser way to access a form control is:

document.forms['formNAMEnotID'].elements['elementNAMEnotID'].value

With the exception of select lists in NN4 and Radio elements in just
about every browser on the planet.

So there is exception ?

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['elementNAMEnotID']
the complete expression above is
document.forms['formNAMEnotID'].elements['elementNAMEnotID'].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['elementNAMEnotID'];
if (select.selectedIndex > -1) {
var value = select.options[select.selectedIndex].value;
}
 
L

Luke

So for a
select and its value if you want to cover Netscape 4 you need e.g.
var select =
document.forms['formNAMEnotID'].elements['elementNAMEnotID'];
if (select.selectedIndex > -1) {
var value = select.options[select.selectedIndex].value;
}
Thank's for that too :)
For radio buttons i would do the same way e.g.:
var buttonGroup =
document.forms['formNAMEnotID'].elements['elementNAMEnotID'];
for (var i = 0; i < buttonGroup.length; i++) {
if (buttonGroup.checked) {
var value = buttonGroup.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.
 
A

ASM

Luke a écrit :
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+

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

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

2.bis var input = document.forms["myform"].elements['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.myform.myinput;//from ie4+
5. var input = document.all["myform"].myinput;//from ie4+
6. var input = document.all("myform").myinput;//from ie4+
7. var input = myform.myinput;//from ie4+, dropped document.all
8. var input = document.all.item("myform").myinput;//from ie4+
9. var input = document.all.item("myinput");//from ie4+

10. var input = document.getElementById("myinput");//DOM

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

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

no : document.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).

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)
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):

no because only understood by IE
(even if fiew browsers try to play to be IE)
<form name="myform">
</form>
...
document.all.myform;
...

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 :)

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']
 
L

Luke

ASM napisal(a):
Luke a écrit :

checkboxes with same name is non sens

you can't choice 2 times same thing
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.getParemeterValues("mycheck");
In PHP:
foreach ($_GET['mycheck'] as $choice) {

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

Got it ?
 
L

Luke

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="multiple".

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 !
 
A

ASM

Luke a écrit :
ASM napisal(a):


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.

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

interesting (but excuse about style in options is old no?)
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.getParemeterValues("mycheck");
In PHP:
foreach ($_GET['mycheck'] as $choice) {

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

Got it ?

Yeap man :)
 
L

Luke Matuszewski

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:
<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>

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... :)
 
L

Luke Matuszewski

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 :)
 
A

ASM

Luke Matuszewski a écrit :
The topic in this post is "addressing html elements in js" so it is
general,

(*) and because 'elements' has a meaning in forms
it is difficult to understand your are speaking of objects
and because 'object' is also a tag ... no end in misunderstanding
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

no, not in html
in html you have only targets to do something special
or anchors to scroll to a specific part of document
and which is
most commonly supported by wide spread of different browsers ?
"
, so i asked the general method of accessing elements...

then we speak of objects

To acceed general elements/objects in JS (that is to say none in DOM)
understood by old browsers (NN4, IE4) and of course new ones

first collection is : windows

then we attack directly the document and its collections

basicaly you have collections (whom probably some are now deprecated : embeds)
- forms : i.e. var F = document.forms
forms have their own sub collection : elements (*)
- links : i.e. var L = document.links
- anchors : i.e. var A = document.anchors
- images : i.e. var I = document.images
- embeds : i.e. var E = document.embeds
- layers : i.e. var C = document.layers -> NN only
- divs : for some others browsers than NN
- all : specific IE (as it says : anything you want)
Those are tables of objects
that's to say you can get one by its index or by its name (not by its id)
in the collection
When you have goten one then you can know its attributes
i.e. :
you can change an image :
document.images['img_1'].src = 'photo_002.jpg';
you can enter a new value in an input
document.forms['frm'].elements['Name'].value = 'Luke';
or submit a form
document.forms['frm'].submit();
click a button and so one
but ... you can't use DOM, even if some DHTML is possible
(move or resize a layer (NN) a div (IE))

If you use DOM (and you do not more speak to NN4)
possibilities are vaster
divs : var adiv = document.getElementById('aNameOfId');
this time : IDs can absolutly only be unique
no collection of IDs
tagName : collection of any tag you want
i.e. var T = document.getElementsByTagName('TR');
and more
DOM is part of mind browser, JS using/addressing the DOM
 
A

ASM

Luke Matuszewski a écrit :
In theory html 401 specs states that radios and checkboxes should have
-->value<-- attribute (and i forgot about it when showing example).
ok

Correct should be:
<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>


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

Personaly I don't know what are specifications about that
I only know that works
all elements of a form with same name is seen by browsers
as a collection of these elements.

I think I did say it in an other post I can't no more find
(with other title ?)
 
R

Randy Webb

Luke said the following on 9/25/2005 9:20 AM:
Randy Webb napisal(a):


I listed all above...
Stricly speaking in HTML 4.01 one element with name attr. is
deprecated(taken 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

There are more, and the list is very extensive. That is why I posted the
URL and not the list itself.
So i can address some of those elements via its ->name<- attribute by
using document arrays like:
document.anchors[] (for <a name=""...> elements)
document.applets[] (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="">)

window.frames, from experience.
IE supports document.frames to get to an IFrame, but Moz and Opera do not.
, and
document.embeds[] (for dropped <embed name=""> elements in html 401
specs).
document.layers[] (for only NN4 <layer name=""> elements)

They are not "arrays" per se but you use the array syntax. They are HTML
Collections. Close but not quite the same thing.

But, before using any of them, I would test for them:

if (document.anchors){
//browser supports the anchors collection so let's use it.
}
etc..

It's what object detection is all about :)
, for rest elements in the list, that is:
object
map
param
meta
a must use DOM based addresing by
document.getElementByName("nameNotID"); //since IE5+,
NN6+,Mozilla,Safari
or better
document.getElementById("IDNotName); //if i am using id's, since IE5+,
NN6+,Mozilla,Safari

document.all['IDorNAMEBecauseIE4isScrewedUp']

But, getElementsByName and getElementById are not "DOM based
addressing", they are part of the language itself.
The most cross-browser way to access a form control is:

document.forms['formNAMEnotID'].elements['elementNAMEnotID'].value

<form name="formNAMEnotID">
<input name="elementNAMEnotID">

Thanks for that, i was in dark before i read your reply :)

Thats how you learn. :)
So there is exception ? :(

Yes, see the other reply with respects to select lists in Netscape4
series browsers.
So if we have form like this:
<form name="myFormName">
<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).

Test it and see :)

Seriously, nothing will teach you faster than trying it for yourself and
figuring out what does and does not work. You don't seem to be a true
beginner and have a grasp for the concept, so if you run into one that
you can't figure out, try iterating through the collection and see what
the browser gives back.
, and for select like this:
<form name="myFormName">
<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

Except for the exception I gave for selects in NN4, yes.

Resist the urge to use the gEBI syntax when the browser already has a
collections for it. Meaning, don't fall for the "use gEBI unless I
can't" mentality. It will go a long way in your future to keep you out
of that mistake.
Thanks for answer in advance.

Welcome and good luck.


--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Answer:It destroys the order of the conversation
Question: Why?
Answer: Top-Posting.
Question: Whats the most annoying thing on Usenet?
 
L

Luke Matuszewski

Randy Webb napisal(a):
Luke said the following on 9/25/2005 9:20 AM:

There are more, and the list is very extensive. That is why I posted the
URL and not the list itself.
I concerned only on elements definded in HTML 401 spec with the
-->name<-- attribute. The attributes listed in:
http://www.w3.org/TR/html401/index/attributes.html
(here you see that listed elements have -->name<-- attribute, no other
else...
so correct me if i am wrong :)...)
But, getElementsByName and getElementById are not "DOM based
addressing", they are part of the language itself. OK


Seriously, nothing will teach you faster than trying it for yourself and
figuring out what does and does not work. You don't seem to be a true
beginner and have a grasp for the concept, so if you run into one that
you can't figure out, try iterating through the collection and see what
the browser gives back.
Testing is good, but if i ask here i will know that it is allowed for
older browsers too (NN4+)... There are guys like you that know about
history and capabilities of older browsers, i am not such guy...
Resist the urge to use the gEBI syntax when the browser already has a
collections for it. Meaning, don't fall for the "use gEBI unless I
can't" mentality. It will go a long way in your future to keep you out
of that mistake.
If document.getElementById(' '); is not DOM based (supported from IE5+,
NN6+, Mozilla, Safari) than Danny Goodman quick ref are mistaken.
You can download it from here:
http://www.dannyg.com/ref/jsquickref.html (as pdf)
Welcome and good luck.


PS I am sick on cold so my nervous are shattered.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top