473,546 Members | 2,171 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Basics... addressing html elements in js

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

Sep 24 '05 #1
22 3302
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.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+
All of the above are IE-only and should be forgotten.
10. var input = document.getEle mentById("myinp ut");//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['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.
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;
....
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.

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly
Sep 24 '05 #2

Randy Webb napisal(a):
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 >

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

Sep 25 '05 #3


Luke wrote:
Randy Webb napisal(a):

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

document.form s['formNAMEnotID'].elements['elementNAMEnot ID'].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['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/
Sep 25 '05 #4
> 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;
}

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.

Sep 25 '05 #5
ASM
Luke a écrit :
but what about checkboxes with the same name ?


checkboxes with same name is non sens

you can't choice 2 times same thing

--
Stephane Moriaux et son [moins] vieux Mac
Sep 25 '05 #6
ASM
Luke a écrit :
Randy Webb napisal(a):
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 >


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


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
Sep 25 '05 #7
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.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
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.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 :)


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
Sep 25 '05 #8

ASM napisal(a):
Luke a écrit :
but what about checkboxes with the same name ?


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

Sep 25 '05 #9
The fragment form article:
http://www.cs.tut.fi/~jkorpela/forms...#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/...ef-name-APPLET
See it carrefully !

Sep 25 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
1081
by: Xah Lee | last post by:
# in Python, list can be done this way: a = print a # list can be joined with plus sign b = a + print b # list can be extracted by appending a square bracket with index # negative index counts from right.
12
3616
by: Frank Stephan | last post by:
Hi, im using Struts with nested tags for form validation. So I end up with form elements named like this risikenManuell.praemieNeu risikenManuell.praemieNeu .... I would like to do a calculation on the input values
0
940
by: JW | last post by:
How do I create a WSDL (doc/literal) that represents a soap message which includes ws-addressing elements. The addressing elements sit as header blocks directly inside the header so how is this reprensented in a 'part' in a wsdl. This issue is urgent so I gonna be very grateful for any solutions.
2
1266
by: Trev | last post by:
I'm converting a site from VBScript to JavaScript, I have the following code in VBSCript: > Sub ShowSection_OnClick(pintDivNum) > > document.all.item("div_" & pintDivNum & "_details").style.display = "block" > document.all.item("img_" & pintDivNum & "_collapse").style.display = "inline" > document.all.item("img_" & pintDivNum &...
2
4108
by: deko | last post by:
I'm trying to change the font style of a link when that link is clicked. But the link (sometimes) includes a named anchor. So I need to test for a given named anchor and apply style changes if the test is true - since there will be several different named anchors in the page. I don't think this is very advanced, but I'm new to JavaScript ....
7
3340
by: adam | last post by:
i'm working on a portion of a CMS that allows content-admins to browse a product list, and add individual products into the taxonomy by clicking checkboxes next to categories they might belong in. since the taxonomy is a rather long list, i'm hiding and showing divs for the secondary and tertiary links, so when a user clicks on the checkbox...
0
2031
by: Stefan Lischke | last post by:
Hi, I'm really desperate using code generation(wsdl.exe) from wsdl files for latest WS-Eventing(including WS-Addressing) Specs. I'm writing my diploma about "publish subscribe systems based on Web Services" I took the WS-Eventing WSDL file and added <binding>'s and <service>'s... Then i took the apache axis wsdl2java tool and i got nice
3
1532
by: Samuel Shulman | last post by:
I am looking for good guidance for positioning controls on the form.document, it is absolute nightmare and I don't know where to begin Thank you, Samuel Shulman
0
7507
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7698
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
7947
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
0
6030
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
0
3492
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
0
3472
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1922
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1046
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
747
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.