JS -- Lesson 5

Lesson 5

Forms are very useful for grabbing information using the sub-directory or hierarchy style of finding a value (document.form.input.value)

Let me show you some forms and inputs and how they are used.

<INPUT TYPE="text" NAME="alerttext" SIZE="10">

The above code would make an input like the one below.

This wont do anything yet, but let me explain what i did. I made an input and then made it a textbox by changing its TYPE to text. To make sure i can grab what it says later i must give it a name so that javascript knows which input im talking about. Then i change its size to 10, any size works.

Now for a button code.

<INPUT TYPE="button" VALUE="Submit" onClick="alerty()">

The above code results in the button below.

This is a button, let me explain how i did it. Like the first one, this is an input but this time i made its type equal button, which of course made it a button. Using a button i can make it do something when someone clicks it. I gave it a value, it could say anything really, itll just appear on the button. Then i use the event onClick, which means when you click this button something happens. I made it so when you click it javascript runs the function alerty().

<FORM name="Formname">
<INPUT TYPE="text" NAME="alerttext" SIZE="10">
<INPUT TYPE="button" VALUE="Submit" onClick="alerty()">

Write what you want to say....

Kind of cool right? Want to know how i did that?
Well to start off i used the object hierarchy to grab the information you write in the textbox then store it in the alert box.
To do that look at the code below:

function alerty()

var alertytext = document.Formname.alerttext.value;



<FORM name="Formname">
<INPUT TYPE="text" NAME="alerttext" SIZE="10">
<INPUT TYPE="button" VALUE="Submit" onClick="alerty()">

The above code does this:
First we create a form and call it Formname so that we can refer to it later. Then inside the form we put a textbox and a button (which we have already gone over). We give them a name also so that we can refer to them within the form. We give the button an action, onClick, so when it is clicked a function is ran. Then we create a function called alerty() and make its specifications:

1. We create a variable called alertytext and tell it to equal: The value of alerttext (which is the textbox), and to find it look inside the form, formname, and to find the form look inside the document, which we currently have one of.
2. Then we tell the function to alert us of the variable alertytext, which currently holds the value of whatever you have written inside the textbox.

That is it for this lesson on FORMS, head on over to the next lesson when your ready.
Join Today
Join our Website's Jester Forum today!
Its FREE and easy......
Click Here


Enjoy the STAY

If you enjoyed this page,
add 2 favorites or tell a friend

Daily Event
Fortune of the Day

Quick Search
Ads & News
40199 visitors
=> Do you also want a homepage for free? Then click here! <=