Forms Manipulation Let's take this script a step further and verify the data (if a user enters a non-number, we're going to get a script error). And while we're at it, let's say that a user shouldn't be able to enter a number greater than 100 or less than 0. To do this, we're going to have to do some kind of verification to decide whether the
INPUT is valid or not. So let's add this wrapper type function around our function.
In addition, let's do some form manipulation too. Instead of an alert box, let's make it display the answer in our form.
if(isNan(x) || isNan(y) || x =="" || y =="")
alert("The values you entered are invalid.");
if(x > 100 || x < 0 || Y > 100 || y < 0)
alert("Values are outside of valid 0-100 limits");
Try entering invalid numbers and characters and see what happens.
This script is pretty simple. Basically, we check to see if a number is valid with
if(isNan(x) || isNan(y))
We show appropriate message boxes for each error. The only thing we do is:
<INPUT TYPE="button" onClick="this.form.Answer.value=CheckData(this.form.Value1.value,this.form.Value2.value)" value="Answer!">
Notice how we get the answer to the answer box.
AddNumber3 returns the answer to
CheckData, which then returns it to whatever is calling it. In this case, we say that
this.form.Answer.value takes the value of whatever
CheckData returns. As we follow the code, it is what
AddNumber3 returns. And just like that, you can have the answer on screen.
There are other types of form data that require verification, most notably valid phone numbers and email addresses. These are accomplished the same way--by writing a wrapper class. Methods are different (such as for email addresses where you have to check for an
if (x.indexOf("@",0) > 0 )
alert(x + " is a valid email");
alert(x + " is not a valid email address");
In this example we use the
indexOf() function that returns the index of a specific character, in this case the
@ symbol. Basically, we are checking to see if it returns an index; if it doesn't return a value greater than 0, we know it wasn't found. Piece of cake!
<FRAME SRC="page1.html" NAME="page1">
<FRAME SRC="page2.html" NAME="page2">
<FRAME SRC="page3.html" NAME="page3">
In this example, there are going to be three separate frames. Now let's say we want to click on a link on one page and have both frames change to something else. But before we do that, let's understand the heirarchy of the object model involved.
self.* means current window.
parent.* means the parent of current window.
To put this into perspective: if we created a
FRAMESET with our
index.html file, each of the separate frames would have to call its parent if it were to manipulate the location.href (the property of each window).
page3.html. The first two pages are pointless here since they are just blank holder pages; however, page three is the location of our scripting function, so let's look at it.
if (how == "reverse")
This is page three.
We write a function here that is going to check a parameter to see how we handle the frames. As you can see, this is pretty straightforward. We check the parameter that gets passed in to see if it says
original, and then we use our object model to point our frames where we want to!
Notice that most of this is very similar to what we have been doing--however, we called our script in a different way this time. It is being called inside an anchor tag. You can call any of your scripts with a
Part 1 ]
Part 3 > ]