Part 8 - Form controls in JavaScript

Introduction

In the last part I explained a few of the things you can do using forms. In this, the final part, of the JavaScript tutorial I will explain how you can do some other things with your JavaScript forms.

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. To see the example click here. 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).

Conclusion

In this tutorial I covered some of the most important parts of JavaScript and now you should be able to start writing some quite advanced scripts. There is still a lot of JavaScript left to learn with many more advanced commands. In the future I will do a tutorial on this. One way of improving your skills, though, is to look at the code of other people's pages that use JavaScript. Don't steal them but you can learn more about the language by doing this.