Introduction
In part 6 I showed you how to use If and loops. In this part I will show you how you can manipulate HTML forms with JavaScript to improve your website.
Changing The Value Of A Text Box
Before you can manipulate text boxes you must first know how to create a form and how to create a text box in HTML. I will quickly explain this.
Forms for JavaScript are slightly different to standard ones as they do not require any information or script to handle them. You can do everything by just giving the form a name (although later you may want to add the other information so that you can also have the form submitted):
<form name="formname">
</form>
In this form you can place a text box using:
<input type="text" name="boxname">
Once you have this you can create your first JavaScript to refer to a form:
In part 6 I showed you how to use If and loops. In this part I will show you how you can manipulate HTML forms with JavaScript to improve your website.
Changing The Value Of A Text Box
Before you can manipulate text boxes you must first know how to create a form and how to create a text box in HTML. I will quickly explain this.
Forms for JavaScript are slightly different to standard ones as they do not require any information or script to handle them. You can do everything by just giving the form a name (although later you may want to add the other information so that you can also have the form submitted):
<form name="formname">
</form>
In this form you can place a text box using:
<input type="text" name="boxname">
Once you have this you can create your first JavaScript to refer to a form:
Move the mouse over here to add some text to the box
This is done very easily using the onMouseOver property of the link. It can refer to the text box as follows:
window.document.example1.first_text.value='Hi there';
This tells the browser to put 'Hi there!' into the value of the item called 'first_text' in the form called 'example1'.
You can also do this with multiline text boxes. You can use
/n
to start a new line.
In this section, you have learnt the most important part of this lesson, how to refer to an item in a form.
Events
Just like links, you can set events for items in a form. They are:
onBlur - Happens when the cursor is moved out of the field
onFocus - Happens when the cursor is moved into the field
onChange - Happens when the field is changed and the cursor moves out of it
These are placed into the code as part of the form's item for example:
<input type="text" onBlur="dothis">
JavaScript Functions
JavaScript functions are very useful, and this seems an appropriate place to introduce them. They are pieces of JavaScript which can be declared at the top of your page and can then be referred to again and again in your code. You can even pass parameters to them and make them do different things.
Functions take the following form:
function functionname(parameters)
{
}
For a very basic function you need no parameters and it would be constructed like this (in the <head> of the document):
function sayhi()
{
alert(Hi there!);
}
Then, anywhere in the text you could place this:
<a href="#" onMouseOver="sayhi();">Say Hi</a>
Which would display the alert whenever the mosuse passed over it. Unless you are repeating something many times, though, this will not seem particularly useful. This is where parameters become useful.
Parameters
Parameters are a very useful part of functions. They allow you to pass data to the function when it is called. Here is an example:
function say(what)
{
alert(what);
}
in the head, then:
<a href="#" onMouseOver="say(hi);">Say Hi</a>
<a href="#" onMouseOver="say(bye);">Say Bye</a>
What this is doing is the information in the brackets is passed to the function. In the brackets of the function is the word 'what'. This is telling the JavaScript to assign the information in the brackets to the variable what (the same as var what='something';). You can even do this with multiple pieces of information by separating th
em by commas.
As you can see functions and parameters are very useful.
Part 8
In the next part I will show you more of what you can do using forms and how you can use JavaScript to process them.
This is done very easily using the onMouseOver property of the link. It can refer to the text box as follows:
window.document.example1.first_text.value='Hi there';
This tells the browser to put 'Hi there!' into the value of the item called 'first_text' in the form called 'example1'.
You can also do this with multiline text boxes. You can use
/n
to start a new line.
In this section, you have learnt the most important part of this lesson, how to refer to an item in a form.
Events
Just like links, you can set events for items in a form. They are:
onBlur - Happens when the cursor is moved out of the field
onFocus - Happens when the cursor is moved into the field
onChange - Happens when the field is changed and the cursor moves out of it
These are placed into the code as part of the form's item for example:
<input type="text" onBlur="dothis">
JavaScript Functions
JavaScript functions are very useful, and this seems an appropriate place to introduce them. They are pieces of JavaScript which can be declared at the top of your page and can then be referred to again and again in your code. You can even pass parameters to them and make them do different things.
Functions take the following form:
function functionname(parameters)
{
}
For a very basic function you need no parameters and it would be constructed like this (in the <head> of the document):
function sayhi()
{
alert(Hi there!);
}
Then, anywhere in the text you could place this:
<a href="#" onMouseOver="sayhi();">Say Hi</a>
Which would display the alert whenever the mosuse passed over it. Unless you are repeating something many times, though, this will not seem particularly useful. This is where parameters become useful.
Parameters
Parameters are a very useful part of functions. They allow you to pass data to the function when it is called. Here is an example:
function say(what)
{
alert(what);
}
in the head, then:
<a href="#" onMouseOver="say(hi);">Say Hi</a>
<a href="#" onMouseOver="say(bye);">Say Bye</a>
What this is doing is the information in the brackets is passed to the function. In the brackets of the function is the word 'what'. This is telling the JavaScript to assign the information in the brackets to the variable what (the same as var what='something';). You can even do this with multiple pieces of information by separating th
em by commas.
As you can see functions and parameters are very useful.
Part 8
In the next part I will show you more of what you can do using forms and how you can use JavaScript to process them.
No comments:
Post a Comment