473,396 Members | 1,770 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,396 software developers and data experts.

HTML Twins

I am no JavaScript progammer, and unfortunately am having to babysit an
old code base that has a lot of JavaScript in it.

I have two questions:

(1) Can two HTML controls have the same name? It looks like the obvious
answer is NO.

(2) What if? What if the developer has given two HTML controls the same
name, i.e has created the same button more than once with exactly the
same name and all other attributes? What happens then?

Ok, before you call me lazy, let me tell you, I tried it. Here's what I
did on a spike solution.
<HTML>

<SCRIPT>
function doFoo()
{
document.forms[0].edt.disabled=!document.forms[0].edt.disabled;
}
</SCRIPT>

<FORM name="frmFoo">
<INPUT type="button" value="Edit" name="edt" onClick="return doFoo()"/>
<INPUT type="button" value="Edit" name="edt" onClick="return doFoo()"/>
</FORM>

</HTML>


Like I expected, clicking any of the buttons did not disable either of
them.
So, I wanted to do something like this:
For Each HTML Control In The Form On The Document
If The HTML Control Has a Value Of Edit Then
Disable It, or do something with it like show me its name and
value
End If
Next HTML Control
So, here's what I did:
<HTML>

<SCRIPT>

function doFoo()
{
alert(document.forms[0].children.length)
for(i=0; i<=document.forms[0].children.length-1; i++)
{
alert(document.forms[0].children[i].name)
if (document.forms[0].children[i].value == 'Edit')
document.forms[0].children[i].disabled=false;
}
}

</SCRIPT>

<FORM name="frmFoo">
<INPUT type="button" value="Edit" name="edt" onClick="return doFoo()"/>
<INPUT type="button" value="Edit" name="edt" onClick="return doFoo()"/>
</FORM>

</HTML>
And lo! as I expected, the form has just one element reference that is
valid and the other as an invalid reference.
Given this situation on my "actual" code that I am babysitting (someone
else wrote it), and it is HUGE, and it has all JavaScript and HTML
elements dynamically generated from ASP code and some strong glue by
way of screwed up logic, what options do I have other than re-write the
page?

I am running IE 6 on Win 2000, if that is relevant.

Nov 29 '05 #1
4 1972
Sathyaish wrote:
(1) Can two HTML controls have the same name? It looks like the
obvious answer is NO.
Yes they can. In fact, it's required for radio button groups!
(2) What if? What if the developer has given two HTML controls the
same name, i.e has created the same button more than once with
exactly the same name and all other attributes? What happens then?
Instead of document.forms['formName'].elements['elementName'] referring to a
single input, it will now be a reference to a collection of the inputs with
form name 'elementName'. In fact, the elements with the same name don't even
need to be of the same type!
For Each HTML Control In The Form On The Document
If The HTML Control Has a Value Of Edit Then
Disable It, or do something with it like show me its name and
value
End If
Next HTML Control


var inputs = document.forms['formName'].elements;
for (var i=0; i<inputs.length; i++) {
if (inputs[i].value && inputs[i].value=='Edit') {
inputs[i].dislabed = true;
}
}

Although, wouldn't you want to check for the NAME attribute rather than
VALUE?

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com
Nov 29 '05 #2
Sathyaish wrote:
I am no JavaScript progammer, and unfortunately am having to babysit an
old code base that has a lot of JavaScript in it.

I have two questions:

(1) Can two HTML controls have the same name? It looks like the obvious
answer is NO.
The answer is YES. Creating form elements with the same name creates an
array...

a very simple example may demonstrate:

<script type="text/javascript">
function tally(form){
var prices=form.price;
var sum=0;
for(var i=0; i<prices.length; i++){
sum+=parseFloat(prices[i].value);
}
form.subtotal.value=sum;
}
</script>

<form>
1:<input type="text" name="price" value="1.50"><br>
2:<input type="text" name="price" value="2.70"><br>
3:<input type="text" name="price" value="45.00"><br>
4:<input type="text" name="price" value="4.55"><br>
5:<input type="text" name="price" value="2.09"><br>
<hr>
<input type="text" name="subtotal" size"5"><br>
<input type="button" onclick="tally(this.form)" value="Subtotal">
</form>
(2) What if? What if the developer has given two HTML controls the same
name, i.e has created the same button more than once with exactly the
same name and all other attributes? What happens then?

Ok, before you call me lazy, let me tell you, I tried it. Here's what I
did on a spike solution.
<HTML>

<SCRIPT>
function doFoo()
{
document.forms[0].edt.disabled=!document.forms[0].edt.disabled;
}
</SCRIPT>

<FORM name="frmFoo">
<INPUT type="button" value="Edit" name="edt" onClick="return doFoo()"/>
<INPUT type="button" value="Edit" name="edt" onClick="return doFoo()"/>
</FORM>

</HTML>


They would do the same thing, just like having a duplicate function
buttons say at the top of the page and at the bottom for convenience
<snip>

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Nov 29 '05 #3
> (1) Can two HTML controls have the same name? It looks like the obvious
answer is NO.
Yes they can, for instance, two radio buttons can (should) have the same NAME but
they must (should) have a unique ID.

(2) What if? What if the developer has given two HTML controls the same
name, i.e has created the same button more than once with exactly the
same name and all other attributes? What happens then?


The NAME is only used when a FORM and its child controls are sent back to the
server. The server identifies each control thru its NAME. If the server is not
interested in the value(s) of the controls with the same name, then it does not
matter.

JavaScript on the client-side though typically uses the ID (which should be
unique), but if an ID is not specified, then it will use the NAME.

Brian

Nov 29 '05 #4
Sathyaish wrote:
(1) Can two HTML controls have the same name? It looks like the obvious
answer is NO.
No, the answer is YES, of course! For example, there would be no way
to implement radio buttons if it was NO.
(2) What if? What if the developer has given two HTML controls the same
name, i.e has created the same button more than once with exactly the
same name and all other attributes? What happens then?
Then all controls with the same name, as all elements with the same
name, become part of a NodeList collection where each element can be
referred to by zero-based index.
[...]
<HTML>

<SCRIPT>
That is not Valid (X)HTML. <URL:http://validator.w3.org/>
function doFoo()
{
document.forms[0].edt.disabled=!document.forms[0].edt.disabled;
Should be at least

var es = document.forms[0].elements, edt0;
if (((edt0 = es['edt'][0]).disabled = !es['edt'][1].disabled))
{
edt0.disabled = !es['edt'][1].disabled ? "disabled" : "";
}
}
</SCRIPT>

<FORM name="frmFoo">
<INPUT type="button" value="Edit" name="edt" onClick="return doFoo()"/>
<INPUT type="button" value="Edit" name="edt" onClick="return doFoo()"/>
</FORM>
It is not necessary to refer to the form by index/name or to the event
target by name. Use `this' within intrinsic event handler attribute
values to refer to the event target and use `this.form' (or the
equivalent in the called method) to refer to the ancestor `form'
element.
Like I expected, clicking any of the buttons did not disable either of
them.
Because you referred to the wrong object. The same-named elements were in a
collection, and the collection itself had no `disabled' property before you
added one. Of course the user-defined property, if it was even created,
did not change presentation of the respective elements.
So, I wanted to do something like this:
For Each HTML Control In The Form On The Document
If The HTML Control Has a Value Of Edit Then
Disable It, or do something with it like show me its name and
value
End If
Next HTML Control
// For Each HTML Control In The Form On The Document
var f = referenceToFormOnTheDocument;
for (var es = f.elements, i = es.length; i--;)
{
var e = es[i];

if (e.value == "Edit")
{
// Disable It,
if ((e.disabled = false))
{
e.disabled = "disabled";
}

// or do something with it like show me its name and value
alert([e.name, " = ", e.value].join(""));

// End If
}
// Next HTML Control
}
[...]
<HTML>

<SCRIPT>
That's not Valid (X)HTML either.
function doFoo()
{
alert(document.forms[0].children.length)
`children' is a non-standard property of the IE-DOM. You are looking for
the both standards compliant and downwards compatible `elements' property
instead which includes all form controls, rather than the standard
equivalent to `children' of `childNodes' which would include all child
elements as well.
for(i=0; i<=document.forms[0].children.length-1; i++)
for (var i = 0, len = document.forms[0].children.length; i < len; i++)
{
alert(document.forms[0].children[i].name)
if (document.forms[0].children[i].value == 'Edit')
document.forms[0].children[i].disabled=false;
}
}

</SCRIPT>

<FORM name="frmFoo">
<INPUT type="button" value="Edit" name="edt" onClick="return doFoo()"/>
<INPUT type="button" value="Edit" name="edt" onClick="return doFoo()"/> ^[1] </FORM>

</HTML>
And lo! as I expected, the form has just one element reference that is
valid and the other as an invalid reference.
That is probably because you referred to all the child nodes of
the element instead of to all form control child element nodes.
[...]
I am running IE 6 on Win 2000, if that is relevant.


Yes, IE does not support XHTML.[1]

<URL:http://hixie.ch/advocacy/xhtml>
HTH

PointedEars, X-Post & F'up2 comp.lang.javascript
Nov 29 '05 #5

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

Similar topics

4
by: VK | last post by:
09/30/03 Phil Powell posted his "Radio buttons do not appear checked" question. This question led to a long discussion about the naming rules applying to variables, objects, methods and properties...
0
by: Boris Ammerlaan | last post by:
This notice is posted about every week. I'll endeavor to use the same subject line so that those of you who have seen it can kill-file the subject; additionally, Supersedes: headers are used to...
20
by: Al Moritz | last post by:
Hi all, I was always told that the conversion of Word files to HTML as done by Word itself sucks - you get a lot of unnecessary code that can influence the design on web browsers other than...
4
by: Francois Keyeux | last post by:
hello everyone: i have a web site built using vbasic active server scripting running on iis (it works on either iis 50 and 60, but is designed for iis 50) i know how to create a plain text...
5
by: serge calderara | last post by:
Dear all, I am new in asp.net and prepare myself for exam I still have dificulties to understand the difference between server control and HTML control. Okey things whcih are clear are the fact...
4
by: Working_Girl | last post by:
Hi, I have a database with insurance clients and their dependents (spouses and children). We had a problem in the past with the twins and some of them have been entered with one month...
13
kestrel
by: kestrel | last post by:
Sheila and He-Man are twins; Sheila is the OLDER twin. Assume they were born immediately after each other, an infinitesimally small - but nonzero - amount of time apart. During one year in the...
6
by: Guy Macon | last post by:
cwdjrxyz wrote: HTML 5 has solved the above probem. See the following web page: HTML 5, one vocabulary, two serializations http://www.w3.org/QA/2008/01/html5-is-html-and-xml.html
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
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
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...
0
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...

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.