473,386 Members | 1,679 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,386 software developers and data experts.

getting element IDs from nested standard forms in JavaScript

Okay, after much research, I have discovered a few interesting things in
ASP.NET.

I have a MasterPage that has a WebForm on it and it looks like this:

<body>
<form id="controls" runat="server">
<div id="bodyColumn">
<asp:ContentPlaceHolder id="bodyContentPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>

In a page the dervies from the MasterPage, I use another form but a standard
HTML Form that does not have the "runat=server" attribute.

<form name="MyForm">
<input type="text" name="zipcode" />
</form>

In JavaScript, I cannot do any of the following with success:

document.MyForm.zipcode.value;
document.forms["MyForm"].zipcode.value;

But these work:

document.forms[0].item("zipcode", 0).value;
document.forms[0].zipcode.value;

My question is really why do these behave in that way?

I did some further investigation and found that this snippet:

document.forms[0].name;

....returns a string: "aspnetForm"

However, if I add another standard form to my child page:

<form name="MyForm2">
<input type="text" name="phone">
</form>

then, doing this:

document.MyForm2.phone.value;
document.forms["MyForm2"].phone.value;

....does work. And, this:

document.forms[1].name;

....returns "MyForm2".

Why is all this happening?

Gurus on deck!

Thanks in advance,

Amrit
Jan 25 '07 #1
8 2995
Hi,

Amrit Kohli wrote:
Okay, after much research, I have discovered a few interesting things in
ASP.NET.

I have a MasterPage that has a WebForm on it and it looks like this:

<body>
<form id="controls" runat="server">
<div id="bodyColumn">
<asp:ContentPlaceHolder id="bodyContentPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>

In a page the dervies from the MasterPage, I use another form but a standard
HTML Form that does not have the "runat=server" attribute.

<form name="MyForm">
<input type="text" name="zipcode" />
</form>

In JavaScript, I cannot do any of the following with success:

document.MyForm.zipcode.value;
document.forms["MyForm"].zipcode.value;

But these work:

document.forms[0].item("zipcode", 0).value;
document.forms[0].zipcode.value;

My question is really why do these behave in that way?

I did some further investigation and found that this snippet:

document.forms[0].name;

...returns a string: "aspnetForm"

However, if I add another standard form to my child page:

<form name="MyForm2">
<input type="text" name="phone">
</form>

then, doing this:

document.MyForm2.phone.value;
document.forms["MyForm2"].phone.value;

...does work. And, this:

document.forms[1].name;

...returns "MyForm2".

Why is all this happening?

Gurus on deck!

Thanks in advance,

Amrit
I am confused by your confusion. What did you think would happen?

Note that all these specialized collections (like forms, images...) are
DOM Level 1, and shouldn't be used anymore. Now we have DOM level 2 in
all modern browsers, and document.getElementById is the way to go.

(of course it means that your elements must have a unique ID, which is
recommended anyway).

HTH,
Laurent
--
Laurent Bugnion [MVP ASP.NET]
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch
Jan 25 '07 #2
Not sure where the problem is... but having an 'id' of the form and then
searching is by rather inefficient methdo of document.getElementById(...)
should work.
--
Happy Hacking,
Gaurav Vaish | www.mastergaurav.com
www.edujini-labs.com
http://eduzine.edujinionline.com
-----------------------------------------
"Amrit Kohli" <Am********@discussions.microsoft.comwrote in message
news:64**********************************@microsof t.com...
Okay, after much research, I have discovered a few interesting things in
ASP.NET.

I have a MasterPage that has a WebForm on it and it looks like this:

<body>
<form id="controls" runat="server">
<div id="bodyColumn">
<asp:ContentPlaceHolder id="bodyContentPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>

In a page the dervies from the MasterPage, I use another form but a
standard
HTML Form that does not have the "runat=server" attribute.

<form name="MyForm">
<input type="text" name="zipcode" />
</form>

In JavaScript, I cannot do any of the following with success:

document.MyForm.zipcode.value;
document.forms["MyForm"].zipcode.value;

But these work:

document.forms[0].item("zipcode", 0).value;
document.forms[0].zipcode.value;

My question is really why do these behave in that way?

I did some further investigation and found that this snippet:

document.forms[0].name;

...returns a string: "aspnetForm"

However, if I add another standard form to my child page:

<form name="MyForm2">
<input type="text" name="phone">
</form>

then, doing this:

document.MyForm2.phone.value;
document.forms["MyForm2"].phone.value;

...does work. And, this:

document.forms[1].name;

...returns "MyForm2".

Why is all this happening?

Gurus on deck!

Thanks in advance,

Amrit

Jan 25 '07 #3
Hi...
try the alternative method...
that is
$get('controlID').property
example
$get('txtName').value = 'Masudur';

Thanks
Masudur
www.kaz.com.bd

On Jan 26, 12:31 am, "Gaurav Vaish \(MasterGaurav\)"
<gaurav.vaish.nos...@nospam.gmail.comwrote:
Not sure where the problem is... but having an 'id' of the form and then
searching is by rather inefficient methdo of document.getElementById(...)
should work.

--
Happy Hacking,
Gaurav Vaish |http://www.mastergaurav.comwww.eduji...jinionline.com
-----------------------------------------

"Amrit Kohli" <AmritKo...@discussions.microsoft.comwrote in messagenews:64**********************************@m icrosoft.com...
Okay, after much research, I have discovered a few interesting things in
ASP.NET.
I have a MasterPage that has a WebForm on it and it looks like this:
<body>
<form id="controls" runat="server">
<div id="bodyColumn">
<asp:ContentPlaceHolder id="bodyContentPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
In a page the dervies from the MasterPage, I use another form but a
standard
HTML Form that does not have the "runat=server" attribute.
<form name="MyForm">
<input type="text" name="zipcode" />
</form>
In JavaScript, I cannot do any of the following with success:
document.MyForm.zipcode.value;
document.forms["MyForm"].zipcode.value;
But these work:
document.forms[0].item("zipcode", 0).value;
document.forms[0].zipcode.value;
My question is really why do these behave in that way?
I did some further investigation and found that this snippet:
document.forms[0].name;
...returns a string: "aspnetForm"
However, if I add another standard form to my child page:
<form name="MyForm2">
<input type="text" name="phone">
</form>
then, doing this:
document.MyForm2.phone.value;
document.forms["MyForm2"].phone.value;
...does work. And, this:
document.forms[1].name;
...returns "MyForm2".
Why is all this happening?
Gurus on deck!
Thanks in advance,
Amrit- Hide quoted text -- Show quoted text -
Jan 25 '07 #4
Hi,

Masudur wrote:
Hi...
try the alternative method...
that is
$get('controlID').property
example
$get('txtName').value = 'Masudur';
There is not $get method in client side JavaScript, at least not in all
the browsers I know. Some 3rd party frameworks declare new methods with
shorter name to avoid typing document.getElementById every time, but in
the end, it's still that method that is called. I personally find this
practice very bad.

HTH,
Laurent
--
Laurent Bugnion [MVP ASP.NET]
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch
Jan 25 '07 #5
Hi,

Gaurav Vaish (MasterGaurav) wrote:
Not sure where the problem is... but having an 'id' of the form and then
searching is by rather inefficient methdo of document.getElementById(...)
should work.
Could you change the settings of your newsreader so that your signature
appears after the quoted material? (alternatively, you could follow good
practice and bottom post... :-)

document.getElementById is not very performant, that's true. It has
however huge advantages over DOM Level 1 collections. Cross
compatibility has a cost, I guess...

For methods accessing the DOM in an intensive way, one could always save
the reference to the Node after it has been gotten using
document.getElementById once. Also, once you get hold of a node using
that method, you can navigate to DOM using firstChild, lastChild, etc...
which are *extremely* faster.

HTH,
Laurent
--
Laurent Bugnion [MVP ASP.NET]
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch
Jan 25 '07 #6
nested forms are not supported by html, so erratic results are expected.

now as what is happening. master pages create a form named aspnetForm
which will be form[0]. as people are used to putting form tags on asp
pages, this would cause trouble with a master page (as nested forms are
not allowed, nor do aspnet control support nesting), so if found the
first form is thrown away. any additional forms (which is still an html
error) are left alone.
-- bruce (sqlwork.com)

Amrit Kohli wrote:
Okay, after much research, I have discovered a few interesting things in
ASP.NET.

I have a MasterPage that has a WebForm on it and it looks like this:

<body>
<form id="controls" runat="server">
<div id="bodyColumn">
<asp:ContentPlaceHolder id="bodyContentPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>

In a page the dervies from the MasterPage, I use another form but a standard
HTML Form that does not have the "runat=server" attribute.

<form name="MyForm">
<input type="text" name="zipcode" />
</form>

In JavaScript, I cannot do any of the following with success:

document.MyForm.zipcode.value;
document.forms["MyForm"].zipcode.value;

But these work:

document.forms[0].item("zipcode", 0).value;
document.forms[0].zipcode.value;

My question is really why do these behave in that way?

I did some further investigation and found that this snippet:

document.forms[0].name;

...returns a string: "aspnetForm"

However, if I add another standard form to my child page:

<form name="MyForm2">
<input type="text" name="phone">
</form>

then, doing this:

document.MyForm2.phone.value;
document.forms["MyForm2"].phone.value;

...does work. And, this:

document.forms[1].name;

...returns "MyForm2".

Why is all this happening?

Gurus on deck!

Thanks in advance,

Amrit
Jan 25 '07 #7
Could you change the settings of your newsreader so that your signature
appears after the quoted material? (alternatively, you could follow good
practice and bottom post... :-)
I generally follow the 'bottom post'... I think I missed that here :D
the reference to the Node after it has been gotten using
document.getElementById once. Also, once you get hold of a node using that
method, you can navigate to DOM using firstChild, lastChild, etc... which
are *extremely* faster.
One question here... I was just wondering about the 'Node-Caching'.
If I know that I will need to use 10-15 nodes whose references are not known
during page loading, I can probably use a global-variable (may be
packaged/moduled), say, importantReferences (= new Object()) and then
whenever I get the IDs and references, I can probably do a:

importantReferences[id] = document.getElementById(id)

So that next time, I first do a lookup in importantReferences

if(!importantReferences[id]) { document... }

Do you see any issues with this in terms of memory hogging or leakage?
Yes... one thing that I need to take care is that when the node is removed
from the HTML-tree, I must not forget to remove it from my 'cache'.

Anything else?
--
Happy Hacking,
Gaurav Vaish | www.mastergaurav.com
www.edujini-labs.com
http://eduzine.edujinionline.com
-----------------------------------------
Jan 26 '07 #8
Hi,

Gaurav Vaish (MasterGaurav) wrote:
>Could you change the settings of your newsreader so that your signature
appears after the quoted material? (alternatively, you could follow good
practice and bottom post... :-)

I generally follow the 'bottom post'... I think I missed that here :D
>the reference to the Node after it has been gotten using
document.getElementById once. Also, once you get hold of a node using that
method, you can navigate to DOM using firstChild, lastChild, etc... which
are *extremely* faster.

One question here... I was just wondering about the 'Node-Caching'.
If I know that I will need to use 10-15 nodes whose references are not known
during page loading, I can probably use a global-variable (may be
packaged/moduled), say, importantReferences (= new Object()) and then
whenever I get the IDs and references, I can probably do a:

importantReferences[id] = document.getElementById(id)

So that next time, I first do a lookup in importantReferences

if(!importantReferences[id]) { document... }

Do you see any issues with this in terms of memory hogging or leakage?
Yes... one thing that I need to take care is that when the node is removed
from the HTML-tree, I must not forget to remove it from my 'cache'.

Anything else?
Generally speaking, memory leaks on the web are rare, because all the
JavaScript variables are recycled when the page is refreshed, and
garbage collected. However, with the appearance of AJAX-enabled pages,
we have scenarios where a page can remain active for days without being
refreshed. In this case, memory leaks can appear on the client. They are
not catastrophic for the machine, because it doesn't crash, but it can
slow things down extremely, and finally force the user to restart IE.

Memory leaks are actually quite easy to cause, because the JavaScript
engine, the HTML engine (DOM) and the CSS engine do not share
references. It's quite easy to create circular references, which will
then prevent the object to be garbage collected, even when the variable
is not used anymore. This is where you have to be extra careful.

Also, due probably to IE's implementation, and though we talked often
and quite long with Microsoft's IE team, we still notice that the number
of handles grows continuously when leaving a webpage open and usng AJAX
to refresh parts of it regularly. Not really a memory leak, but bottom
line is: IE was not made for such scenarios. After 2 weeks or so, we
restart the client to solve these problems.

Other than that, for example in "normal" scenarios where the client is
refreshed regularly, and where sessions usually don't last more than a
few minutes or a few hours, I don't see any problems with storing nodes
the way you propose.

I want to underline again the possibility to store one node and to then
navigate to the others using firstChild, lastChild and other such
properties. It avoids saving too many nodes, and it's very fast.

HTH,
Laurent
--
Laurent Bugnion [MVP ASP.NET]
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch
Jan 26 '07 #9

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

Similar topics

1
by: Stanimir Stamenkov | last post by:
Here's an example: <form action="bogus" method="post"> <p> <a href="prev.cgi"><input type="submit" name="prev" value="< Back"></a> <a href="next.cgi"><input type="submit" name="next"...
18
by: lawrence | last post by:
If I'm pretty sure there is just one form on the page, can i do this? var myForm = document.forms; If I'm not sure about the form, is it safer to do this? if (document.forms) { var myForm =...
21
by: Michael Bierman | last post by:
Please forgive the simplicy of this question. I have the following code which attempts to determine the color of some text and set other text to match that color. It works fine in Firefox, but does...
12
by: Adam Lipscombe | last post by:
Folks, I need to get the contents of a form attribute. In Read/Write mode this is field, so I can use getElementById("name").value In ReadOnly this is just plain text, so I can use...
9
by: kw | last post by:
What is the proper way to get the element ID for a client script? For example, suppose in the WebControl: TextBox t=new TextBox; t.ID=this.ClientID+"X"; .... Then elsewhere we want to access...
2
by: kw | last post by:
TextBox t=new TextBox(); Controls.Add(t); t.ID=t.ClientID; //reads: "_MyControl1__ctl16" And even in OnPreRender, I examine the Controls collection and verify that the ID of the TextBox is...
13
by: Oliver Hauger | last post by:
Hello, In my html form I show a select-element and if this element is clicked I fill it per JavaScript/DOM with option-elements. I use the following code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD...
6
by: Charleees | last post by:
Hi all, I have a DropDown and a TextBox just bekeow it... I have to get the selected value from dropdown and set it as textBox Text.. The thing is i have to do this Without PostBack..... ...
10
by: eggie5 | last post by:
Is it possible to get a file without using a form post? I want to get the data (bytes) of a file, text or binary, and just save it to a variable. Similar to the post body of a form that has a...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
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,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
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,...
0
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...

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.