473,748 Members | 4,178 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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:ContentPla ceHolder id="bodyContent PlaceHolder" runat="server">
</asp:ContentPlac eHolder>
</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=serv er" 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.MyForm 2.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 3049
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:ContentPla ceHolder id="bodyContent PlaceHolder" runat="server">
</asp:ContentPlac eHolder>
</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=serv er" 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.MyForm 2.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.getEle mentById 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.getEle mentById(...)
should work.
--
Happy Hacking,
Gaurav Vaish | www.mastergaurav.com
www.edujini-labs.com
http://eduzine.edujinionline.com
-----------------------------------------
"Amrit Kohli" <Am********@dis cussions.micros oft.comwrote in message
news:64******** *************** ***********@mic rosoft.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:ContentPla ceHolder id="bodyContent PlaceHolder" runat="server">
</asp:ContentPlac eHolder>
</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=serv er" 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.MyForm 2.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.n os...@nospam.gm ail.comwrote:
Not sure where the problem is... but having an 'id' of the form and then
searching is by rather inefficient methdo of document.getEle mentById(...)
should work.

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

"Amrit Kohli" <AmritKo...@dis cussions.micros oft.comwrote in messagenews:64* *************** *************** ***@microsoft.c om...
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:ContentPla ceHolder id="bodyContent PlaceHolder" runat="server">
</asp:ContentPlac eHolder>
</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=serv er" 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.MyForm 2.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.getEle mentById 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.getEle mentById(...)
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.getEle mentById 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.getEle mentById 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:ContentPla ceHolder id="bodyContent PlaceHolder" runat="server">
</asp:ContentPlac eHolder>
</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=serv er" 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.MyForm 2.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.getEle mentById 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, importantRefere nces (= new Object()) and then
whenever I get the IDs and references, I can probably do a:

importantRefere nces[id] = document.getEle mentById(id)

So that next time, I first do a lookup in importantRefere nces

if(!importantRe ferences[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.getEl ementById 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, importantRefere nces (= new Object()) and then
whenever I get the IDs and references, I can probably do a:

importantRefere nces[id] = document.getEle mentById(id)

So that next time, I first do a lookup in importantRefere nces

if(!importantRe ferences[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
8326
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" value="Next >"></a> </p> </form>
18
8005
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 = document.forms; // more code here........ }
21
3986
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 nothing in IE. I'd be greatful for any assistance. Also, if I will have problems the code on Opera or Safari, I'd appreciate any pointers--I don't have a Mac to test Safari. THanks very much, Michael
12
1808
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 getElementById("name").innerText. I need to do it dynamically though, so is there anyway I can look at the object returned by getElementById() and determine if it was a field or a
9
2666
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 it on the client: Control.Attributes = "javascript:document.getElementById('"+this.ClientID+"X"+"').value= 'test';";
2
1918
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 "_MyControl1__ctl16". But then, on the final HTML rendered, if you look at the page, the textbox looks like this:
13
2367
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 HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head>
6
3344
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..... Is there any java script to do this functionality...
10
2438
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 file input element in it. Ultimately what I want to do is get a file off client machine (that they specify) and send it to the server using a standard post request. This is exactly the same as a form post with an file input element, but I don't...
0
8826
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9534
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. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
9316
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9241
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
6793
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4867
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3303
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
2
2777
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2211
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 effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.