Day 5 Homework Controls

Add to a listbox

Here's what is on the html document:

<option selected>Add to your list

<option>http://www.enetopia.com/javascript
<option>http://www.enetopia.com/xmlSamples
<option>http://www.enetopia.com/asp
<option>http://www.enetopia.com/aspMail
<option>http://www.enetopia.com/aPlus

</select>

</form>

What's happening here?

Name our form

<form name="list_form">
Set up our link to the javascript, now our function is called "addToList()"

<a href="#" onClick="addToList(); return false;"><img src="../tutorials/docHtml/images/add.gif" border="0"></a>
Name our listbox and set the attribute: size (optional - just showing you that this is an available attribute for listboxes)

<select name="myList" size="1">
set up our selected selection: "Selected" is an available attribute for an option in your list and by default it will be shown when the page loads.

<option selected>Add to your list

Now, The script:

function addToList()

{


	var the_url = prompt("Add which URL to your favorites? ","http://");

	if ((the_url != "") && (the_url != null) && (the_url != false)) {

		var the_list = window.document.list_form.myList;
	
		var num_options = the_list.options.length;

		var new_option = new Option;

		new_option.text = the_url;

		the_list.options[num_options]= new_option;
		
	}	

}

Now, the rundown:

Here's our function

function addToList() {
Set up a prompt box to get the new information ( a textbox could have been used here, too)

var the_url = prompt("Add which URL to your favorites? ","http://");
Give the input from our prompt box a value with a variable name that we can use later

var the_url = prompt("Add which URL to your favorites? ","http://");
Check the input for input

if ((the_url != "") && (the_url != null) && (the_url != false)) {
I use && to check for all the conditions at the same time -- because ALL conditions must be met

if ((the_url != "") && (the_url != null) && (the_url != false)) {
Here is an example of using the "not equal" modifier

if ((the_url != "") && (the_url != null) && (the_url != false)) {
Set up our variable "the_list"

var the_list = window.document.list_form.myList;
Set this variable equal to the listbox that we created on this html document -- "myList" was the name that we gave it.

<select name="myList" size="1"> -- in the body of our form

var the_list = window.document.list_form.myList; -- in the javascript function
We have to identify which form we are getting the list from......We ALWAYS have to identify the form we are getting our information from

var the_list = window.document.list_form.myList; -- in the javascript function
All listboxes have an attribute that identifies how many items are included in the list - it's called "length". Since we will need that attribute, let's set it to a variable -- This attribute is a running count, starting at ONE, not ZERO

var num_options = the_list.options.length;
Now we need to add a new option to our listbox ... so here we tell javascript that we are going to need it, and give it a name --

var new_option = new Option;
Since our new_option variable is an option -- it has an attribute called "text", (no NOT value like a textbox uses - No reason here, this is just how they set it up)

new_option.text = the_url;
"the_url" was our variable name for the stuff that our user typed into that prompt box, remember?? So now that text is in the listbox. BUT......

new_option.text = the_url;
BUT.. it's not showing in our listbox yet. Here's the code for that

the_list.options[num_options]= new_option;
Hmmmm...

the_list -- window.document.list_form.myList; -- the specified form, with the specified listbox
options[num_options] -- that was the Length of our listbox
new_option -- that was the var new_option = new Option; that we added some text to (which that variable is still carrying because it remembers every attribute we set - could be many attributes that we set)

So in English:

myList. options(6 - to start off with). = the text in that option that we set up
If you are having trouble seeing all these nodes and dots identifying what form and what list with which attribute we are using -- check out this tutorial, and then come back here (use your back button) DotNotation
Why are we just using the plain number "6" if there are 6 items, when we want to add the 7th item??

the index that javascript set up starts with a ZERO, not a One -- so we have item

option(0) to get to our first option
option(1) to get to our second option
option(2) to get to our third option
option(3) to get to our fourth
option(4) to get to our FIFTH option
option(5) to get to "http://www.enetopia.com/aPlus"
and, finally
......
option(6) to add our Seventh option -- that's the new option we added with code.

Welp, that's it for now.