I have several dropdowns displaying

extempore · Jul 26, 2003

I have several dropdowns displaying the same list of values. These values are not hardcoded but populated from a table. The table also has a column which indicates the maximum number of times the values can be selected. IF the user tries to select the values more than the nbr of times indicated in the table there should be message prompted saying "MAXIMUM REACHED!" and defaulted back to it original selected value(NewYork can be selected as many times as possible as the assigns allowed value is 0 - no restrictions for '0' values). I have also sent a section of code from my JSP which is supposed to call this javascript with Onchange event. I need help writing the Javascript. Please advise as I am a newbie to Javascript. Thanks a bunch.

Table Columns:
EAT Id EAT Name Assigns Allowed

Values:
EAT1 Florida 2
EAT2 Texas 1
EAT3 NewYork 0

JsP:

<SELECT name="exportType" onchange="assignPrompt()">
<OPTION value="NS"><%= eatList .getDefaultName()%>
<%
ExportAssetTypeList eatList = (ExportAssetTypeList) session.getAttribute("ExportAssetTypeList&quot

;
for(int j = 0 ; j < eatList.size(); j ++)
{
%>
<OPTION value="<%=eat.getId()%>"><%=eat.getName() + " (" + eat.getNumAssignsAllowed() +&quot

"%>
<%
}
%>
</SELECT>

LFI · Jul 27, 2003

Depending on how many dropdowns you have, this could get clunky. Given that you are using a JSP, I hazard a guess there might be a better way, but what I have below works (in IE, anyway).

Code:

<html>
<head>
<script>
//for holding an array of select list OBJECTS:
var allDropdowns;

//to collect all select-lists-of-interest into one array of OBJECTS:
function collectSelects()
{
 allDropDowns = document.getElementsByName(&quot;selectGroup&quot;);
}//end collectSelects()

//clunky but effective method for checking whether last choice
// violates maximum-choice rule
function checkTotals(dropdown, index)
{
 //0 means unlimited selections allowed, so...
 if(dropdown[index].max == 0)
 {
  dropdown.lastchoice = index;
  return;
 }//end if
 else
 {
  var count=0;
  var max = dropdown[index].max;
  var chosenVal = dropdown[index].value;

  //add up number of times chosenVal is selected and compare it
  // to max.
  for(i=0; i<allDropDowns.length; i++)
  {
   var list = allDropDowns[i];
   if(list.options[list.selectedIndex].value == chosenVal)
   {
    count++;

    if(count > max)
    {
     //too many.  tell user.
     alert(&quot;You have exceeded the maximum number of selections of this 

item (&quot;+max+&quot;).&quot;);

     //reset to lastchoice before returning
     dropdown.options[dropdown.lastchoice].selected = true;
     return;
    }//end if
   }//end if
  }//end for

  //didn't return, so selection must be okay.
  dropdown.lastchoice = index;
 }//end else
}//end checkTotals(var, var)
</script>
</head>
<body onload=collectSelects()>
<select name=select1 id=selectGroup 

onChange=checkTotals(this,this.selectedIndex) lastchoice=0>
<option value=null max=0>Choose One...
<option value=EAT1 max=2>Florida (2)
<option value=EAT2 max=1>Texas (1)
<option value=EAT3 max=0>New York (0)
</select>
<BR>
<select name=select2 id=selectGroup 

onChange=checkTotals(this,this.selectedIndex) lastchoice=0>
<option value=null max=0>Choose One...
<option value=EAT1 max=2>Florida (2)
<option value=EAT2 max=1>Texas (1)
<option value=EAT3 max=0>New York (0)
</select>
<BR>
<select name=select3 id=selectGroup 

onChange=checkTotals(this,this.selectedIndex) lastchoice=0>
<option value=null max=0>Choose One...
<option value=EAT1 max=2>Florida (2)
<option value=EAT2 max=1>Texas (1)
<option value=EAT3 max=0>New York (0)
</select>
</body>
</html>

Notice the made-up attribute in each option called "max" and how it is used in the function checkTotals(...) and how all the select-lists-of-interest have the same "id" and how they are gathered using the document.getElementsByName("selectGroup&quot

function.

I tried to comment it enough to explain itself, but ask if you have any other questions.

'hope this helped.

--Dave

extempore · Jul 29, 2003

Thanks a lot for the code. Let me try it and see how it works. Thanks again.

extempore · Jul 30, 2003

Dave,

Your code works great for HTML. But when I use it in the jsp page it somehow does not work. It always says allDropDowns.length is null or not an obhject. I have pasted my JSP code here. Can you tell me what I am doing wrong? Thanks again for your help.

<html>
<head>
<title>
<script language="javascript">

//for holding an array of select list OBJECTS:
var allDropDowns;

//to collect all select-lists-of-interest into one array of OBJECTS:
function collectSelects(){
allDropDowns = document.getElementsByName("selectGroup&quot

;
}//end collectSelects()

//checking whether last choice - violates maximum-assignment rule
function checkTotals(dropdown, index){
//0 means unlimited selections allowed, so...
if(dropdown[index].max == 0){
dropdown.lastchoice = index;
return;
}//end if
else{
var count=0;
var max = dropdown[index].max;
var chosenVal = dropdown[index].value;

//add up number of times chosenVal is selected and compare it to max.
for(i=0; i<allDropDowns.length; i++){
var list = allDropDowns;
if(list.options[list.selectedIndex].value == chosenVal){
count++;

if(count > max){
//too many. tell user.
alert("You have exceeded the maximum number of assignments allowed for this asset"

//reset to lastchoice before returning
dropdown.options[dropdown.lastchoice].selected = true;
return;
}//end if
}//end if
}//end for

//didn't return, so selection must be okay.
dropdown.lastchoice = index;
}//end else
}//end checkTotals(var, var)
</script>
</head>
<body bgcolor="#FFFFFF" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" onload="collectSelects()">
<form method="POST" name="selectAssetAssign">
<table border="0" width="100%" align="center">

<tr>
<td align="center">
<select id="selectGroup" name="exportType<%=extAsset.getAssetUoiId()%>" onChange="checkTotals(this,this.selectedIndex)" lastchoice="0">
<option>
<%
ExportAssetTypeList eatList = (ExportAssetTypeList) session.getAttribute("ExportAssetTypeList"
for(int j = 0 ; j < eatList.size(); j ++)
{
ExportAssetType eat = (ExportAssetType) eatList.get(j);
String selected = "";
if(eat.getName().equals(extAsset.getExportAssetTypeName()))
{
selected = "selected";
}
%>
<option <%=selected%> value="<%=eat.getId()%>" max="<%=eat.getNumAssignsAllowed()%>">
<%=eat.getName() + " (" + eat.getNumAssignsAllowed() +&quot"%>
<%
}
%>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>

LFI · Jul 30, 2003

If you copied your jsp exactly as you have it now, then you are missing a </TITLE> tag. My browser just doesn't render the page at all until I add it, but perhaps yours is a little too forgiving of this fact.

Try that and see what happens. The script looks fine otherwise. What browser are you using?

--Dave

extempore · Jul 30, 2003

Dave ,

Sorry I do have my </TITLE> tag but somehow didnt paste it properly. Could the problem be related to the SELECT dropdown objects not being available during the Onload of the body tag in JSP. Since its hardcoded do you think it is readily available in HTML ? And one more thing all the dropdowns have the same id as 'selectGroup' and you used getElementsByName to get the objects. I read from the microsoft site that id should all be unique and this function should be used only with identical names instead of id's. I do not understand how it will work in HTML and not in JSP. Let me know what you think. Thanks.

extempore · Jul 30, 2003

Dave,

I figured it out myself. The code does not work with onload in the body tag but when I have the line:

allDropDowns = document.getElementsByName("selectGroup&quot

;

moved to the checkTotals function it work perfect. Meaning I have to get rid of collectSelects() called from onload and do this during onChange. Which I think is weird!. Do u think it will bomb out if I do this? Please let me know. But thanks for ur wonderful help.

LFI · Jul 30, 2003

Interesting... I use BODY onLoad's all the time with my JSPs at work. Hmmm...

Anyway, I don't think there's a problem with calling collectSelects() from insdie of checkTotals(...), but try this first: before the closing </BODY> tag, add:

Code:

<SCRIPT>
collectSelects();
</SCRIPT>

...and see what that does.

Good luck!

--Dave

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

I have several dropdowns displaying

extempore

Programmer

LFI

Programmer

extempore

Programmer

extempore

Programmer

LFI

Programmer

extempore

Programmer

extempore

Programmer

LFI

Programmer

Similar threads

Part and Inventory Search

Sponsor