HTML Twins

Discussion in 'Javascript' started by Sathyaish, Nov 29, 2005.

  1. Sathyaish

    Sathyaish Guest

    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.name)
    if (document.forms[0].children.value == 'Edit')
    document.forms[0].children.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.
    Sathyaish, Nov 29, 2005
    #1
    1. Advertising

  2. Sathyaish

    Matt Kruse Guest

    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.value && inputs.value=='Edit') {
    inputs.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
    Matt Kruse, Nov 29, 2005
    #2
    1. Advertising

  3. 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.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
    Jonathan N. Little, Nov 29, 2005
    #3
  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;

    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.name)
    > if (document.forms[0].children.value == 'Edit')
    > document.forms[0].children.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
    Thomas 'PointedEars' Lahn, Nov 29, 2005
    #4
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Mark Kamoski
    Replies:
    1
    Views:
    7,077
  2. Mitchua
    Replies:
    1
    Views:
    7,048
    Ice Demon
    Jul 15, 2003
  3. Laura
    Replies:
    1
    Views:
    518
    Gunnar Hjalmarsson
    Jun 5, 2004
  4. Sathyaish

    HTML Twins

    Sathyaish, Nov 29, 2005, in forum: HTML
    Replies:
    4
    Views:
    472
    Thomas 'PointedEars' Lahn
    Nov 29, 2005
  5. Adam Akhtar
    Replies:
    9
    Views:
    508
    Florian Gilcher
    Aug 16, 2008
Loading...

Share This Page