Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Count elements (DIV) inside a form

    Hi all
    I have a form with one or more DIV elements inside it.
    When I try to count form elements I get result=0?
    How is this possible?
    See the example:
    Code:
    <html>
    <head>
    <script language="javascript">
    function Count()
    {
    	alert(document.frm1.elements.length);
    	
    	for(i=0; i<document.frm1.elements.length; i++)
    	{
    		alert(document.frm1.elements[i].name);
    	}
    }
    </script>
    </head>
    <body>
    <form id="frm1" name="frm1">
    	<div id="div1" name="div1">.</div>
    </form>
    <input type="button" onclick="Count();" />
    </body>
    </html>

    If I put other element (textbox) inside the form, the count result is correct.
    Is DIV not an element?!

    How can I count one or more DIV and inner DIV's?

    Thanks for your help.

    Z.

  • #2
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,237
    Thanks
    12
    Thanked 340 Times in 336 Posts
    document.frm1.elements refers to all form control elements. <div>s ain’t that.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #3
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Dormilich View Post
    document.frm1.elements refers to all form control elements. <div>s ain’t that.
    So, what would be the right solution to count DIV elements inside a form?

    getElementsByTagName ? or other(s)?

  • #4
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,237
    Thanks
    12
    Thanked 340 Times in 336 Posts
    document.frm1.getElementsByTagName("div")

    PS. make sure your form controls are inside the form element, otherwise they have no effect.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    One more question: all the DIVs inside a FORM? Or all the DIVs which are the first level (direct) child nodes?
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,237
    Thanks
    12
    Thanked 340 Times in 336 Posts
    Quote Originally Posted by Kor View Post
    One more question: all the DIVs inside a FORM? Or all the DIVs which are the first level (direct) child nodes?
    the latter would be a job for jQuery.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #7
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok thanks for your help.
    As I thought i will have to use getElementsByTagName.

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,907
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Try this to count the number of divs within a specified form:-

    Code:
    <form name = "frm1">
    <div id = "formDiv1"></div>
    <div id = "formDiv2"></div>
    <div id = "formDiv3"></div>
    </form>
    
    <script type = "text/javascript">
    
    function countDivs() {
    
    var alldivs = document.frm1.getElementsByTagName('div');
    var el, i = 0, howmany = 0;
    while (el = alldivs.item(i++)) {howmany++};
    alert (howmany);
    }
    
    countDivs();
    
    </script>

    Quizmaster: Name the 4th state of the USA to join the Union. It was named after a British king.
    Contestant: Texas.
    Last edited by Philip M; 10-26-2010 at 01:13 PM.

  • #9
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by Philip M View Post
    Try this:-

    Code:
    <script type = "text/javascript">
    
    function countDivs() {
    
    var alldivs = document.frm1.getElementsByTagName('div');
    var el, i = 0, howmany = 0;
    while (el = alldivs.item(i++)) {howmany++};
    alert (howmany);
    }
    
    countDivs();
    
    </script>
    You must be tired Noobie error Shouldn't you call that function window.onload?
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,907
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by Kor View Post
    You must be tired Noobie error Shouldn't you call that function window.onload?
    Yes, of course. That is only for testing/demonstration of the script as a stand-alone.

  • #11
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by Dormilich View Post
    the latter would be a job for jQuery.
    Or not.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Count Outer Divs Contained in an Element</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" >
    <style type='text/css'>
    
    div{border:solid #f00 1px}
    
    </style>
    </head>
    <body>
    <p>
    <form name = "frm1" action=''>
     <div>#</div>
     <div>#</div>
     <div>#
      <div>inner
       <div>innerMost
       </div>
      </div>
     </div>
    </form>
    
    <script type = "text/javascript">
    
    function countOuterDivs( elem ) 
    {
     var allNodes = elem.childNodes,
         node;     
            
     for( var i = 0, count = 0; ( node = allNodes[ i ] ); i++ )
      if( node.nodeName == 'DIV' )
       count++;
      
     return count;
    }
    
    alert( countOuterDivs( document.forms.frm1 ) );
    
    </script>
    </body>
    </html>

  • #12
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,237
    Thanks
    12
    Thanked 340 Times in 336 Posts
    Quote Originally Posted by Philip M View Post
    Try this to count the number of divs within a specified form:-

    Code:
    <form name = "frm1">
    <div id = "formDiv1"></div>
    <div id = "formDiv2"></div>
    <div id = "formDiv3"></div>
    </form>
    
    <script type = "text/javascript">
    
    function countDivs() {
    
    var alldivs = document.frm1.getElementsByTagName('div');
    var el, i = 0, howmany = 0;
    while (el = alldivs.item(i++)) {howmany++};
    alert (howmany);
    }
    
    countDivs();
    
    </script>

    Quizmaster: Name the 4th state of the USA to join the Union. It was named after a British king.
    Contestant: Texas.
    er,
    Code:
    alert(document.frm1.getElementsByTagName('div').length);
    ?

    Quote Originally Posted by Logic Ali View Post
    Or not.
    the jQuery call would be easier. probably something along $("form + div")
    Last edited by Dormilich; 10-26-2010 at 02:42 PM.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #13
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,907
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by Dormilich View Post
    er,
    Code:
    alert(document.frm1.getElementsByTagName('div').length);
    Yes, OK, I had simplified my script which counts divs with a particular name:-

    Code:
    <form name = "frm1">
    <div id = "MainDiv1"></div>
    <div id = "MainDiv2"></div>
    <div id = "MainDiv3"></div>
    <div id = "InnerDiv1"></div>
    <div id = "MainDiv4"></div>
    <div id = "InnerDiv2"></div>
    
    </form>
    
    <script type = "text/javascript">
    
    function countDivs() {
    
    var alldivs = document.frm1.getElementsByTagName('div');
    var el, i = 0, howmany = 0;
    while (el = alldivs.item(i++)) if (el.id.substr(0,7) == 'MainDiv') {howmany++};
    alert (howmany);
    }
    
    countDivs();
    
    </script>

  • #14
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,237
    Thanks
    12
    Thanked 340 Times in 336 Posts
    you can do that with Array.filter() as well.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #15
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    JQuery can not be easier in this case. It implies OP to learn JQuery custom methods as well, which would be an useless effort for a simple job like this: counting the elements within a DOM collection. C'mon...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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