Controlling Data Entry Using Form Fields
Creating 'Encoded' Name & Value Pairs
Passing data from one form to another
Addressing Form Field Validation with Regular Expressions and JavaScript 1.2
You are here: irt.org | Articles | JavaScript | Form | Chapter 6: Beginning JavaScript [ previous next ]
Published on: Sunday 29th April 2001 By: Paul Wilton
One property that all the objects of the form elements have in common is the name property. We can use the value of this property to reference that particular element in our script. Also, if we are sending the information in the form to a server, then the element's name property is sent along with any value of the form element, so that the server knows what the value relates to.
Most form element objects also have the value property in common, which returns the value of the element. For example, for a text box the value property returns the text that the user has entered in the text box. Also, by setting the value of the value property, it allows us to put text inside the text box. However, the use of the value property is specific to each element, so we'll look at what it means as we look at each individual element below.
All form element objects also have the form property, which returns the Form object in which the element is contained. This can be useful in cases where you have a generic routine that checks the validity of data in a form. For example, when the user clicks a submit button, we can pass the Form object referenced by the form property to our data checker which can use it to loop through each element on the form in turn, checking that data in the element is valid. This is handy if you have more than one form defined on the page or where you have a generic data checker that you cut and paste to different pages - this way you don't need to know the form's name in advance.
Sometimes it's useful to know what type of element you're dealing with, particularly where you're looping through the elements in a form using the elements[] array property of the Form object.
This information can be retrieved using the type property, which each element's object has. This property returns the type of the element, for example button or text.
All form element objects also have the focus() and blur() methods. Focus is a concept you might not have come across yet. If an element is the center of the focus then any key presses made by the user will be passed directly to that element. For example, if a text box has focus, then hitting keys will enter values into the text box. Also, if a button has the focus, then hitting the enter key will cause the button's onclick event handler code to fire, just as if a user had clicked the button with their mouse.
The user can set which element currently has the focus by clicking on it or using the tab key to select it. However we, as the programmer, can also decide which element has the focus by using the form element's object's focus() method. For example, if we have a text box for the user's age to be put into and the user enters an invalid value, such as a letter rather than a number, then we can tell them that their input is invalid and send them back to that text box to correct their mistake.
Blur, which perhaps could be better named 'lost focus', is the opposite of focus. If we want to remove a form element from being the focus of the user's attention, then we can use the blur() method. The blur() method, when used with a form element, usually results in the focus shifting to the containing window.
As well as the focus() and blur() methods, all the form element's objects have the onfocus and onblur event handlers. These are fired, as you'd expect, when an element gets the focus or loses the focus, due to user action or the focus() and blur() methods. The onblur event handler can be a good place to check the validity of data in the element that has just lost the focus. If invalid you can set the focus back to the element and let the user know why the data they entered is wrong.
One thing to be careful of is using the focus() or blur() methods in the onfocus or onblur event handler code. There is a danger of an infinite loop occurring. For example, consider two elements, each of whose onfocus events passes the focus to the other element. Then, if one element gets the focus, its onfocus event will pass the focus to the second element, whose onfocus event will pass the focus back to the first element, and so on until the only way out is to close the browser down. This is not likely to please your users!
Also be very wary of using the focus() and blur() methods to put focus back in a problem field if that field or others depend on some of the user's input. For example, say we have two text boxes, one in which we want the user to enter their city and the other in which we want them to enter their state. Also say that the input into the state text box is checked to make sure that the specified city is in that state. If the state does not contain the city, we put the focus back on the state text box so that the user can change the name of the state. However, if the user actually input the wrong city name and the right state name, they may not be able to go back to the city text box to rectify the problem.
Controlling Data Entry Using Form Fields
Creating 'Encoded' Name & Value Pairs
Passing data from one form to another
Addressing Form Field Validation with Regular Expressions and JavaScript 1.2