?
Solved

Select box length property returns count of option tags instead

Posted on 2003-03-31
8
Medium Priority
?
187 Views
Last Modified: 2008-03-17
I need to find out how many select boxes I have on a page, as the user can push a button and add a row with a new select box.  They all have the same name.  The .length property works if there's more than one, but how do I know that? If there's only one, it returns the number of options in the select box. ARRGH!! Why can't it be consistant?

Thanks in advance,
Mike
0
Comment
Question by:mbrengartner
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
8 Comments
 
LVL 3

Expert Comment

by:DeAn
ID: 8240839
<html>
<head>
<title></title>

<script language="JavaScript">
<!--
function countlists() {
  var f = document.frm;
  var cnt = 0;
  for (var i=0;i<f.elements.length;i++) {
    var e = f.elements[i];
     if(e.type=="select-one") { cnt++;}
  }
  alert(frm.lst.length);
  alert(cnt);
}
onload=countlists;
//-->
</script>

</head>
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#9900CC" alink="#FF0000">

<form name="frm">


<select name="lst">
<option>op1</option>
<option>op2</option>
<option>op3</option>
<option>op4</option>
</select>

</form>

</body>
</html>
0
 

Author Comment

by:mbrengartner
ID: 8240893
So you're saying the only way to do this is I have to loop through the ENTIRE document elements and do a manual count?  Plus, the above code gives me all select boxes, not just the ones with the same name.

Why is this one so much different from all the other elements where I can just use the .length property? If there's more than one select box, it works just fine. Normally I would just check (.length == undefined), but the length is always defined.

It just means two different things.

Thanks,
Mike
0
 

Author Comment

by:mbrengartner
ID: 8240946
So you're saying the only way to do this is I have to loop through the ENTIRE document elements and do a manual count?  Plus, the above code gives me all select boxes, not just the ones with the same name.

Why is this one so much different from all the other elements where I can just use the .length property? If there's more than one select box, it works just fine. Normally I would just check (.length == undefined), but the length is always defined.

It just means two different things.

Thanks,
Mike
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:mbrengartner
ID: 8240994
So you're saying the only way to do this is I have to loop through the ENTIRE document elements and do a manual count?  Plus, the above code gives me all select boxes, not just the ones with the same name.

Why is this one so much different from all the other elements where I can just use the .length property? If there's more than one select box, it works just fine. Normally I would just check (.length == undefined), but the length is always defined.

It just means two different things.

Thanks,
Mike
0
 
LVL 3

Expert Comment

by:DeAn
ID: 8241044
I can't find a good way around this without looping through them all.  they should have made it so if you want the options array, then ask for it.. document.frm.lst.options.length  ..oh well. lame

looping shouldn't be a big prob unless you have a really lot of elements on the form.

If you don't want to loop, you could add a hidden input with the same name so it is index 0 of the array and adjust the count by subtracting 1.  Not sure if this is good to mix element types in an element array, tho.

<html>
<head>
<title></title>

<script language="javascript">
<!--
function countlists() {
  var f = document.frm;
  if(!f.lst[1]) alert("0");
  else alert(f.lst.length-1);
}
onload=countlists;
//-->
</script>

</head>
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#9900CC" alink="#FF0000">

<form name="frm">

<input type="hidden" name="lst">

<select name="lst">
<option>op1</option>
<option>op2</option>
<option>op3</option>
<option>op4</option>
</select>

</form>

</body>
</html>

hope it helps
0
 

Author Comment

by:mbrengartner
ID: 8246672
Thanks, but I figured it out.  

The "getElementsByName" method evidently does that loop for me and returns me a collection of elements that match the ID or NAME.  I don't know why I didn't think of that before.

var obj = document.getElementsByName("select1");
for (var i = 0; i < obj.length; i++)
{
    alert(obj[i].value);
}

Thanks for your help,
Mike
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 10150389
No comment has been added lately, so it's time to clean up this TA.
I will leave the following recommendation for this question in the Cleanup topic area:

PAQ with points refunded

Please leave any comments here within the next seven days.
PLEASE DO NOT ACCEPT THIS COMMENT AS AN ANSWER!

jAy
EE Cleanup Volunteer
0
 

Accepted Solution

by:
SpazMODic earned 0 total points
ID: 10204402
PAQed, with points refunded (75)

SpazMODic
EE Moderator
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question