If you remember, we spent the last tutorial dynamically adding entries to a list box. In this tutorial, we will extend upon that example to include new functionality. As a starting point, here is the final form from the last tutorial:
<SCRIPT LANGUAGE="JavaScript">
var numItems = 0; // manual list counter
function addIt() {
var txt = document.entryForm.entry.value;
addOption = new Option(txt,txt);
document.entryForm.entryList.options[numItems++] = addOption;
return true;
}
</SCRIPT>
For our first enhancement, let's add the ability to delete entries from the list. It is highly likely your users will accidently enter the wrong field or change their mind at some point. Currently there is no way for the user to correct the entries without completely reloading the html page and starting over. For starters, we will add a Delete button to the right of the list box. When pressed, it will removed the selected item from the list. The first step is to determine if any of the items in the list have been selected. This is accomplished by asking the list box for the indexes of selected items. A return value of negative one represents no items selected in the list. In this case, a message should be displayed to the user. Once we know that at lease one item was selected, all you have to do is loop through the selection indexes until all selected items are deleted. Note, be sure and keep your numItems list in synch with the deletes, otherwise you will be off on the next add.
function deleteIt() {
var contSearch = 1;
var selIndex;
// check to see if there is at least one item selected
if (document.entryForm_v2.entryList_v2.selectedIndex == -1) {
alert("No entries selected for deletion");
return true;
}
// loop through all selected items and delete them
while (contSearch > 0) {
selIndex = document.entryForm_v2.entryList_v2.selectedIndex;
if (selIndex >= 0) {
document.entryForm_v2.entryList_v2.options[selIndex] = null;
--numItems_v2;
}
else
contSearch = 0;
}
return true;
}
In order make our interface more user friendly, we should add a clear button. This will allow the user to delete all of the entries in the list as well as the entry box with one quick click. As you learned from the previous example, you could simply loop through the list and set each option to NULL. Although this is easy, it is actually less efficient that simply setting the length of the list to 0. The following code shows the clearIt() code. Along with the list, the entry field is also cleared out by setting its value to the empty string.
function clearIt() {
document.entryForm.entryList.length = 0;
numItems = 0;
document.entryForm.entry.value = "";
return true;
}
As I mentioned in the previous tutorial, there is still that annoying feature that you cannot specify the width attribute on list boxes. In our example, if you enter a very long item, it will only display the characters that can fit in the current display (nor will it provide a horizontal scroll bar). There is a quick workaround for this. If you simply recall the page off of the history stack, the list box will re-compute the required size and display the complete text. This is accomplished by simply adding a call to history.go(0) when you want the repaint to occur. For demonstration purposes, this call was added to the addIt method. Now when you add an item, the list box will resize itself to the appropriate width. This does rely on a screen repaint, so you will experience a screen flicker. We recommend this solution only if you have a fairly simple screen that can be repainted quickly. Note, it doesn't always place the window position in the last position, so you may need to scroll down to see the actual list box you were entering in. To limit the impact of this problem, try to keep your repaint pages limited to a page or two.
function addIt() {
var txt = document.entryForm.entry.value;
addOption = new Option(txt,txt);
document.entryForm.entryList.options[numItems++] = addOption;
history.go(0);
return true;
}
Well, that is about all we wanted to do on list boxes. You would definitely want to add some more features to the list box example to make it usable (i.e. check for empty string on the add, verify entry, check for duplicate entries in the list etc.) Those are fairly minor tweaks, so I will leave those for your fun and enjoyment.
See you next tutorial, till then, watch your step, the dog's been out