Using JavaScript To Manipulate List Boxes

We were recently asked if list boxes could be manipulated dynamically. Standard HTML does not provide for this functionality, however, if we incorporate the built in scripting language within the browsers, we can in fact produce the desired results. For this implementation, we will be focusing in on Netscape Communicator and Javascript.

We will start by supplying a page shell:

<HTML>
<HEAD>
   <TITLE>Manipulating Lists with Javascript Example</TITLE>
</HEAD>
<BODY>
<FORM NAME="entryForm" METHOD="POST" ACTION="?">
<TABLE>
   <TR>
       <TD>Entry:</TD>
       <TD><INPUT NAME="entry" TYPE="text" SIZE=10></TD>
       <TD><INPUT TYPE="button" NAME="add" VALUE="Add" ></TD>
   </TR>
   <TR>
       <TD COLSPAN=3><SELECT NAME="entryList" SIZE=10></SELECT>
</TABLE>
</FORM>

</BODY>
</HTML>

which visually displays as:

Yes, the list box does display the absolutely annoying property of only growing horizontally as big as it needs. There are a few hack workarounds to correct this, but that is for another tutorial. The first thing we need to do is capture the Add button press event. This can be done easily through Javascript by altering the add button tag to:

The onClick event occurs when the user selects the button. This syntax represents a call to a Javascript function called addIt(). Now we need to add the actual function to our HTML. The following code should be placed within the <HEAD> tag and after the <TITLE> tag as in the following: (The placement of the Javascript is not restricted, however, this is the standard location)

<HTML>
<HEAD>
   <TITLE>Manipulating Lists with Javascript Example</TITLE>
   <SCRIPT LANGUAGE="JavaScript">
       function addIt() {
          alert("We are in the addIt function");
          return true;
      }
</SCRIPT>
</HEAD>

Now if you press the button, you will be given an alert button signifying that the addIt function was indeed called correctly (You probably caught us by now, but to get through this tutorial, we actually have to play some games with the function names. )

Retrieving the text in the entry field is very straightforward as long as you remember to name all of your elements. In our case, it is referenced through the Document Object Model as entryField.entry.value (or Form->Entry Field->value). Now let's add this to the alert dialog in our JavaScript:

   <SCRIPT LANGUAGE="JavaScript">
       function addIt() {
          var txt = document.entryForm.entry.value;
          alert("We are in the addIt function: " + txt);
          return true;
      }
</SCRIPT>
</HEAD>

Now if you enter text into the entry field and hit the Add button, you will see that the text is actually added to the end of the dialog message. The next logical step is to actually add it to the list box. The key thing about list boxes is that it is created from Option objects. Just like you code when adding elements by hand, you need to create an Option with the display and value fields. This is done in the following manner:

addItem = new Option("Text to display","Value to receive in form submit");

this equates to the following in HTML:

<OPTION VALUE="Value">Display

Now that we have the item to create, we will simply append it to the end of the list. This is what our addIt function looks like now.

   <SCRIPT LANGUAGE="JavaScript">
       function addIt() {
         var txt = document.entryForm.entry.value;
         alert("We are in the addIt function: " + txt);
         addOption = new Option(txt,txt);
         numItems = document.entryForm_v3.entryList_v3.length;
        document.entryForm.entryList.options[numItems] = addOption;
        return true;
      }
</SCRIPT>
</HEAD>

Now if you enter text into the entry field and hit the add button, you will notice that it does indeed get added to the list. Notice anything odd? This is one of the most annoying things about the list box implemented by Netscape. It does not allow you to specify a width. Instead, it uses the width of the largest item in the list. This worked fine for static HTML, but it falters when it comes to dynamic HTML. We plan on addressing this issue along with additional functionality (such as delete and clear) in our next tutorial. Until then, let's cheat a little and establish a default size. The quickest way to do this is to set a blank item in the list. With some quick code changes, you will be able to workaround the problem. The quick changes consist of handling the extra item in the list. To this, simply keep your own count of items. and use that instead of the actual length of the list.

   <SCRIPT LANGUAGE="JavaScript">
        var numItems = 0; // manual list counter
        function addIt() {
           var txt = document.entryForm_v4.entry_v4.value;
           addOption = new Option(txt,txt);
           document.entryForm_v4.entryList_v4.options[numItems++] = addOption;
           return true;
       }
</SCRIPT>
</HEAD>

Problems still exist if you reload or resize the browser. We will tackle this problem as well as enhance our program in a following tutorial. Hopefully, you are starting to catch on to the object model used to control the list box.

See you next tutorial, till then, watch your step, the dog's been out

Entry:

Entry:

Entry:

Entry: