Processing_user_input_part_1

This "Part 1" page focuses on making use of the information that users put into text fields, text areas, and popup-lists. In Part 2, we'll look at checkboxes and radio buttons.

Let's consider a form that looks like this:

code format="html4strict"  Pet's name: 

Type of pet:  Choose one Dog Cat Tarantula



X: 

Y: 

  code Please assume the style for this div layer has been setup elsewhere. This form (not including the div layer) would look like:

media type="custom" key="2659957"

As a first exercise, let's try to make the "greet" button pop up an alert dialog that tells you about your pet. We will add an "onclick" command to the "greet" button to call a function that we will write in a moment: code format="html4strict"  code Notice that we don't have to do the "return false;" command that we usually have to add when handling an onClick in an  tag - this is because the button wouldn't normally do anything (the way a hyperlink does) so we don't have to cancel it. If it makes you feel better, though, you can put the "return false;" command in there without harm.

Now let's write a function. code format="html4strict"  function greetPet {      nameOfPet = document.forms[0].petName.value; typeOfPet = document.forms[0].petType.value; alert ("Hello, " + nameOfPet + "! Aren't you a good " + typeOfPet +"?"); } code We create a new variable called "nameOfPet." We fill this variable by starting at the document, getting the first (number zero) form on the page, going to the petName field and asking for its value. We create the "typeOfPet" variable in much the same way. Then we create an alert message with these two fields. Now, if the user hasn't selected the type of pet, this will look a little silly: So, let's add a little to the function. We will give the full message to the user if the user has selected a pet, but a slightly different message if the pet is a "none." To do this, we will make use of the "if" statement. The "if" statement is followed by a true/false statement (a.k.a. an //expression//) and a set of curly brackets. If the expression is true, it will do the commands in the curly bracket. If not, it will skip over them. In the example we are about to give, we will follow this with an "else" command and another set of curly brackets. Each if statement can have zero or one else statement. If it has an "else" statement, those commands will only be executed if the expression was false. Here's how this will work: code format="html4strict"  function greetPet {      nameOfPet = document.forms[0].petName.value; typeOfPet = document.forms[0].petType.value; if (typeOfPet == "none") {          alert("Hello, " + nameOfPet + "!"); }      else {          alert ("Hello, " + nameOfPet + "! Aren't you a good " + typeOfPet +"?"); }  }

code (Notice that we use a "double equals sign" in the expression. A single equals means "make the variable on the left become the value on the right." A double equals means "is the value on the left the same as the value on the right?") If we were being super good, we'd deal with what happens if the user doesn't put in a name for the pet, too. I'll leave that to you.

Phase 2: let's make the popup menu control which updates the image, too. We will suppose that we have four images: "empty.gif," "dog.gif," "cat.gif," and "spider.gif" - I have chosen three of these so the files are named the same as the values of the popup.

In the tag, we can add an "onchange" attribute - this will let us execute a function whenever the user changes the selection in the popup: code format="html4strict" Type of pet: 

code Then in the script section we can create a function for "updatePetPicture" code format="html4strict" function updatePetPicture {      petTypeString = document.forms[0].petType.value; if (petTypeString == "none") {          document.petImg.src="empty.gif"; }      else {          document.petImg.src = petTypeString+".gif"; }   } code Again, we are using an "if" statement to separate the behavior of the 'none' option from the others.

For Phase 3, let's make the text fields hold information about the div layer's position so that changing these values will move the div when we press the "move" button. To start, we need to add an onclick attribute to the "move" button's tag so that it calls a function which we will define in a moment. By now, this should start to look familiar. code format="html4strict" 

code Then in the section, we can apply what we have learned here and combine it with the stuff from the shifting Divs section. code format="html4strict" function moveLayer {   leftNum = parseInt(document.forms[0].petLeft.value); topNum = parseInt(document.forms[0].petTop.value); theLayer = document.getElementById('petLayer');

theLayer.style.left = leftNum + "px"; theLayer.style.top = topNum + "px"; } code In fact, we could even make the textfields update the position automatically by putting an "onchange" attribute in their tags. Then we wouldn't even need the "move" button. I will leave this to you to explore. Another thing to explore would be "dummy-proofing" these controls - what if the user puts in a non-numeric value? How could you deal with that information? (Hint: an if statement comparing the values to "NaN" might work.)