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:
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">Using The Submit Button
The most common use of forms is to submit data to a script so that it can be processed. This is fine if you are using CGI to do a mailto form or something like that, but if you just want to run a piece of JavaScript from a form you will need to do things a little differently. The first part you must learn about is the return false; attribute. It can be used as follows:
<form name="myform" onSubmit="return false;"> <input type="submit" value="Submit"> </form>You can try it out below:
What this code does is tell the JavaScript that when the form is submitted it should do nothing. This stops Netscape from refreshing the page (as it would do if there was just a submit button and the form had no action). Now what you can do is to call a function using the submit button:
<form name="myform" onSubmit="MyFunction(); return false;"> Which will tell the browser to run the function 'MyFunction' when the Submit button is clicked. You can, of course, use this without the:
return false;
part. This would be useful if, for example, you want to validate a form before it is sent to a CGI script. You would include the form's action as normal. Then, in the onSubmit part you would call your function to check what had been entered.
Checkboxes
Checkboxes and radio buttons are two of the remaining form items. First I will cover checkboxes.
Checkboxes have two possible values:
Unchecked Box
Checked Box
As there are only two possible values, the JavaScript to refer to a checkbox is slightly different to that of a text box. In the example below the checkbox has been given the name my_checkbox and is in the form example1.
if(window.document.example1.my_checkbox.checked=true) { alert('The box is checked!') } else { window.document.example1.my_checkbox.checked=true; alert('The box was not checked so I have checked it!'); } I will now explain what this code does. It will check the value of the checkbox. If the value is ture (which means the checkbox is checked) then it will display an alert box which will tell you the box is checked. If it is not checked it will check the box (put a checkmark in it) and tell you what it has done.
If, of course, you want to check or refer to the unchecked value of a checkbox the code would be:
window.document.example1.my_checkbox.checked=false; Remember that, when refering to check boxes you do not need to inclose true or false in quotations.
As with all other form objects you can use onBlur, onChange and onFocus.
Radio Buttons
Radio buttons are usually found in groups like this:
Blue
Red
Green
Only one button in the group can be checked at a time. Radio buttons work in exactly the same way as a checkbox, having a .checked property which can either be true or false.
Selects and Menus
The two remaining form elements are selects and menus. I will cover menus first. Menus are drop down boxes with several options in them (they are mainly used for things like selecting your country on a form). Selects are really just menus with multiple lines and scrollbars. To show how they work I will show you a quick example of a menu in action and the code for it. For a select box I would just change the height propery. The code used is below:
<form name="go" onSubmit="return false;"> <select name="select" onChange="window.document.location=window.document.go.select.value;"> <option value="#" selected>Please Select</option> <option value="http://www.microsoft.com">Microsoft</option> <option value="http://www.yahoo.com">Yahoo!</option> <option value="http://www.gowansnet.com">Gowansnet</option> </select> </form> What this code is doing is, when the select is changed it is telling the page in the browser to change its location to the value of the select box. The location of the document is accessed using:
window.document.location As you can see, this is could be very useful, both for getting feedback from visitors and for redirecting them (as in the example above).
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.
