PDA

View Full Version : Max number of values in a list

Dominick
07-11-2003, 09:42 PM
Hello everyone. Sincere thanks in advance for all your help in the past and hopefully the present.

I've modified a function that allows you to select items from a list box and move them to another list box. I then took that function, duplicated it and then reversed the variables so that you can transfer the items back to their original list box. Works in NN 4.7 and late-model NN and IE, so I was thrilled. Feeling quite confident at that point, I added alert messages so that a user would be informed if they tried to move an item from either list box without actually selecting one from the list. That also worked well and I was beside myself with joy - until I decided that I would like to set a maximum number of five values in the second list box - in other words, if a user tries to add a sixth value, they will be alerted that the maximum is five.

I've tried a number of methods, to no avail...Any suggestions would be greatly appreciated.

Regards,

Dominick

==============================================


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

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

<script language="JavaScript">
<!--
function transferAtoB(object) {
var index = object.dropdownlistA.selectedIndex;
if (index > -1) {
var newoption = new Option(object.dropdownlistA.options[index].text, object.dropdownlistA.options[index].value, true, true);
object.dropdownlistB.options[object.dropdownlistB.length] = newoption;

if (!document.getElementById) history.go(0);
object.dropdownlistA.options[index] = null;
object.dropdownlistA.selectedIndex = 0;
}
else
alert ('Please select an item from List A that you would like to add to List B.');
}

function transferBtoA(object) {
var index = object.dropdownlistB.selectedIndex;
if (index > -1) {
var newoption = new Option(object.dropdownlistB.options[index].text, object.dropdownlistB.options[index].value, true, true);
object.dropdownlistA.options[object.dropdownlistA.length] = newoption;
if (!document.getElementById) history.go(0);
object.dropdownlistB.options[index] = null;
object.dropdownlistB.selectedIndex = 0;
}
else
alert ('Please select an item from List B that you would like to return to List A.');
}
//-->
</script>

</head>

<body>

<form name="MyForm">

<table border="0" cellpadding="0" cellspacing="0">

<tr>
<td align="center" valign="top" width="220">List A</td>
<td width="50"></td>
<td align="center" valign="top" width="220">List B</td>
</tr>

<tr>
<td align="center" valign="top">
<select name="dropdownlistA" size="6" style="width:200px;">
<option value="Option 01">Entry 01</option>
<option value="Option 02">Entry 02</option>
<option value="Option 03">Entry 03</option>
<option value="Option 04">Entry 04</option>
<option value="Option 05">Entry 05</option>
<option value="Option 06">Entry 06</option>
<option value="Option 07">Entry 07</option>
<option value="Option 08">Entry 08</option>
<option value="Option 09">Entry 09</option>
<option value="Option 10">Entry 10</option>
</select>
<br><br>
<input type="button" value="Add to List B" onClick="if (document.images) transferAtoB(this.form)">
</td>

<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>

<td align="center" valign="top">
<select name="dropdownlistB" size="6" style="width:200px;">
</select>
<br><br>
<input type="button" value="Return to List A" onClick="if (document.images) transferBtoA(this.form)">
</td>
</tr>
</table>

</form>


</body>
</html>
beetle
07-12-2003, 07:54 AM
a generic reference

form.select.options.length

The length of the options collection is the number you're after
Dominick
07-17-2003, 03:04 PM
beetle:

Sincere thanks for the tip. Using your advice, I created an alternate function that counts the values and disables the appropriate button based on the number. Works great in late model IE, NN but I need to work it out for NN 4.7. I wish 4.7 would just disappear...

Here's what's going on:

===========================================

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

<style>

body,td {
font : verdana;
font-size : 11px;
}
</style>

<script>
function buttonState()
{
var SL=0;
var SLTOT=document.MyForm.dropdownlistB.options;

for(var i=0;i<SLTOT.length;i++)
{
SL+=(SLTOT[i])?1:0;
}

if (SL < 1)
{
document.MyForm.BtoA.disabled=true;
document.MyForm.AtoB.disabled=false;
}

if (SL >= 1)
{
document.MyForm.BtoA.disabled=false;
document.MyForm.AtoB.disabled=false;
}

if (SL <= 5)
{
return true;
}

if (SL = 6)
{
document.MyForm.AtoB.disabled=true;
return false;
}
}

</script>


<script language="JavaScript">
<!--
function transferAtoB(object) {
var index = object.dropdownlistA.selectedIndex;

if (index > -1) {
var newoption = new Option(object.dropdownlistA.options[index].text, object.dropdownlistA.options[index].value, true, true);
object.dropdownlistB.options[object.dropdownlistB.length] = newoption;
if (!document.getElementById) history.go(0);
object.dropdownlistA.options[index] = null;
object.dropdownlistA.selectedIndex = 0;
}
else
alert ('Please select an item from List A that you would like to add to List B.');
}



function transferBtoA(object) {
var index = object.dropdownlistB.selectedIndex;
if (index > -1) {
var newoption = new Option(object.dropdownlistB.options[index].text, object.dropdownlistB.options[index].value, true, true);
object.dropdownlistA.options[object.dropdownlistA.length] = newoption;
if (!document.getElementById) history.go(0);
object.dropdownlistB.options[index] = null;
object.dropdownlistB.selectedIndex = 0;
}
else
alert ('Please select an item from List B that you would like to return to List A.');
}

//-->
</script>

</head>

<body onLoad="buttonState();">

<form name="MyForm">

<table border="0" cellpadding="0" cellspacing="0">

<tr>
<td align="center" valign="top" width="220">List A</td>
<td width="50"></td>
<td align="center" valign="top" width="220">List B</td>
</tr>

<tr>
<td align="center" valign="top">
<select name="dropdownlistA" size="6" style="width:200px;">
<option value="Option 01">Entry 01</option>
<option value="Option 02">Entry 02</option>
<option value="Option 03">Entry 03</option>
<option value="Option 04">Entry 04</option>
<option value="Option 05">Entry 05</option>
<option value="Option 06">Entry 06</option>
<option value="Option 07">Entry 07</option>
<option value="Option 08">Entry 08</option>
<option value="Option 09">Entry 09</option>
<option value="Option 10">Entry 10</option>
</select>
<br><br>
<input name="AtoB" type="button" value="A to B" onClick="if (document.images) transferAtoB(this.form); buttonState();" style="width:165px;">
</td>

<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>

<td align="center" valign="top">
<select name="dropdownlistB" size="6" style="width:200px;">
</select>
<br><br>
<input name="BtoA" type="button" value="B to A" onClick="if (document.images) transferBtoA(this.form); buttonState();" style="width:165px;">
</td>
</tr>
</table>

</form>

</body>
</html>


===========================================
arnyinc
07-17-2003, 06:15 PM
Originally posted by Dominick
]I wish 4.7 would just disappear...


It pretty much has. Something like 1 or maybe 2 percent of users will use NN4.
glenngv
07-18-2003, 03:50 AM
it's better to have the checking in your move functions and display alert msg if the length of option has reach the maximum.