SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Addict
    Join Date
    Sep 2004
    Location
    Denver
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    input image type

    Greetings, I was a little surpised today when I discovered that the .elements of the form object doesn't retrive inputs of type="image". so if you have a

    <input id="img1" type="image" src="img.gif" value="myval" /> and you do a
    document.getElementById('FormID').elements on the parent form.
    The returned array of objects will not contain that input object.

    Is there an easy way for me to grab those input type="image" from the DOM other than having to grab all the inputs and then check their types? Thanks.

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,290
    Mentioned
    198 Post(s)
    Tagged
    3 Thread(s)

    input type image

    It must have something to do with image inputs being for graphic submits.
    Can you access it by getting it's id instead of as a child of the form?

  3. #3
    SitePoint Addict
    Join Date
    Sep 2004
    Location
    Denver
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I can defiantly access by document.getElementById. it's a node in the DOM afterall.

  4. #4
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    function(){
    	var A= document.getElementsByTagName('input');
    	var L= A.length, B= [], who;
    	for(var i= 0; i< L; i++){
    		who=A[i];
    		if(who.type== 'input') B.push(who);
    	}
    	return B;
    }
    Or you could use a general purpose function and call something like this:

    Code:
    function collectTags(wot,pa,att,val){
        if(!pa) pa= document.body;
        var A= pa.getElementsByTagName(wot);
        var L= A.length, B= [], who;
    
        for(var i= 0; i< L; i++){
            who= A[i];
            if(att){
                if(!who.getAttribute(att) ||
                val && who.getAttribute(att) != val) continue;
            }
            B.push(who);
        }
        return B;
    }
    collectTags('input','','type','image');
    Last edited by mrhoo; Dec 5, 2006 at 18:47. Reason: Generalizing function

  5. #5
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I remember correctly, some (or maybe all -- I don't remember) browsers only include form controls that have a name in the elements[] collection. IDs and names aren't the same thing, though some browsers treat them the same some of the time.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  6. #6
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,290
    Mentioned
    198 Post(s)
    Tagged
    3 Thread(s)

    id - name

    Quote Originally Posted by Kravvitz View Post
    If I remember correctly, some (or maybe all -- I don't remember) browsers only include form controls that have a name in the elements[] collection. IDs and names aren't the same thing, though some browsers treat them the same some of the time.
    I always use both id and name becasuse I don't remember which browsers do what either (easier to just use both). Something to do with using one for DOM scripting and the other for CSS in some browsers.

  7. #7
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The name attribute is used with the elements[] collection in all browsers that support it. I'm just not sure which browsers allow IDs to be used as well. I could test it, but am too tired to bother tonight.
    Quote Originally Posted by Mittineague View Post
    ...and the other for CSS in some browsers.
    LOL You mean IE5-6.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  8. #8
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I always use both id and name
    This is invalid in strict xhtml doctypes-
    an element may only have one attribute of the set [name,id]

    names are necessary for form controls sent to the server, but only
    required on client side script for sets of controls with the same name-radio and checkbox.

    Name attributes are deprecated for all html elements other than form controls.

    use document.getElementsByName('namestring')to return an array
    of controls with that name. Often there will be only one member.

  9. #9
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mrhoo View Post
    This is invalid in strict xhtml doctypes-
    an element may only have one attribute of the set [name,id]
    Since when?

    That doesn't make sense. The <label>'s for attribute corresponds to the ID of the form control its associated with. And form controls that need to be used with a <label> need a NAME to be submitted properly, so they really need both.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  10. #10
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I never said it made sense...
    In practice, in IE,Opera and FF, labels with a 'for=str' attribute insert the label before first element in the
    document.getElementsByName(str) array, if there is one, before they look for an element id.

    but to validate in a strict xhtml no element can have two attributes from the set [id,name]

    Its better practice, for keyboard access in a form, to enclose each form element in its label, and forget about 'for' or 'HTMLfor'.

    And labels, like fieldsets and legends and forms themselves, don't use 'name' in strict xhtml. It is deprecated for everything but form control elements.

    If you don't want to change you coding style, or you have a lot of pages that use deprecated elements, don't use a 'strict xhtml' doctype- use an html doctype, or transitional xhtml.

  11. #11
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mrhoo View Post
    but to validate in a strict xhtml no element can have two attributes from the set [id,name]
    Can you show us your reference material for that?

    Quote Originally Posted by mrhoo View Post
    Its better practice, for keyboard access in a form, to enclose each form element in its label, and forget about 'for' or 'HTMLfor'.
    Why?

    Quote Originally Posted by mrhoo View Post
    I never said it made sense...
    In practice, in IE,Opera and FF, labels with a 'for=str' attribute insert the label before first element in the
    document.getElementsByName(str) array, if there is one, before they look for an element id.
    Is this a test case for that?
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title></title>
    <script type="text/javascript"><!--
    window.onload = function() {
      if(!document.getElementsByName) return;
      var els = document.getElementsByName('ti1');
      for(var i=0,max=els.length;i<max;i++) {
        alert(els[i].tagName)
      }
    }
    // -->
    </script>
    </head>
    <body>
    
    <form name="form1" action="#" 
    onsubmit="alert('form submitted');return false;"><div>
    <label for="ti1">text input 1</label> <input type="text" name="ti1" id="ti1">
    </div></form>
    
    </body>
    </html>
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  12. #12
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually Kravitz, a test case would be to try to validate it as xhtml strict-

    There is nothing wrong with writing for html4,
    and you may not even care about xhtml or any xml.


    But if you do, the rules for properly formed xhtml may be found:
    http://www.w3.org/TR/xhtml1/

    And http://www.section508.gov/index.cfm has an overview of
    accessible forms, as does http://www.w3.org/WAI/

    4.10. The elements with 'id' and 'name' attributes
    HTML 4 defined the name attribute for the elements a, applet, form, frame, iframe, img, and map. HTML 4 also introduced the id attribute. Both of these attributes are designed to be used as fragment identifiers.

    Fragment identifiers are of type ID, and there can only be a single attribute of type ID per element. Therefore, in XHTML 1.0 the id attribute is defined to be of type ID. In order to ensure that XHTML 1.0 documents are well-structured XML documents, XHTML 1.0 documents MUST use the id attribute when defining fragment identifiers on the elements listed above. See the HTML Compatibility Guidelines for information on ensuring such anchors are backward compatible when serving XHTML documents as media type text/html.

    Note that in XHTML 1.0, the name attribute of these elements is formally deprecated, and will be removed in a subsequent version of XHTML.

  13. #13
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That doesn't apply to form controls. The name attribute of form controls is of type "CDATA", not "ID".

    Is this a test case then? (It validates.)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
    <meta http-equiv="Content-Type" 
      content="application/xhtml+xml; charset=iso-8859-1" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <title></title>
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    window.onload = function() {
      if(!document.getElementsByName) return;
      var els = document.getElementsByName('ti1');
      for(var i=0,max=els.length;i<max;i++) {
        alert(els[i].tagName)
      }
    }
    //--><!]]>
    </script>
    </head>
    <body>
    
    <form action="#" 
    onsubmit="alert('form submitted');return false;"><div>
    <label for="ti1">text input 1</label> <input type="text" name="ti1" id="ti1" />
    </div></form>
    
    </body>
    </html>
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  14. #14
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The problem is actually with browser implementations that pollute the ID namespace with NAMEs as well as IDs which can then lead to unexpected results in certain circumstances and has nothing to do with the standards (which allows both to be defined in those instances where they are allowed). You just need to make sure that you don't give an ID to one element and the same NAME to a different element or a certain popular browser that doesn't follow the standards all that well may apply processing to the wrong element.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •