The ability to interact with, and obtain information from web site visitors, is a central theme behind the JavaScript language. No JavaScript book would be complete, therefore, without exploring how to handle Graphical User Interface Componments (GUI) objects such as buttons, text input fields, checkboxes, radio boxes and selections, together with the Form object which brings them all together.
+
The ability to interact with, and obtain information from web site visitors, is a central theme behind the JavaScript language. No JavaScript book would be complete therefore, without exploring how to handle Graphical User Interface Components (GUI) objects such as buttons, text input fields, checkboxes, radio boxes and selections, together with the Form object which brings them all together.
−
== JavaScript and The Form Object ==
+
== JavaScript and the Form Object ==
−
The HTML Form object serves a number of purposes. It acts a container for all of the GUI objects that make up a form. It also acts as the mechansism for grouping together the information provided by the user and sending it back to the server for processing.
+
The HTML Form object serves a number of purposes. It acts a container for all of the GUI objects that make up a form. It also acts as the mechanism for grouping together the information provided by the user and sending it back to the server for processing.
The ''<form>'' takes a number of attributes of which the following are the most commonly used:
The ''<form>'' takes a number of attributes of which the following are the most commonly used:
* '''name''' - the name of the form, which will be used when referencing objects within the form using JavaScript code.
* '''name''' - the name of the form, which will be used when referencing objects within the form using JavaScript code.
−
* '''method''' - the method by which data is sent to the server. This will either be "GET" ot "POST" depending on the server-side configuration.
+
* '''method''' - the method by which data is sent to the server. This will either be "GET" or "POST" depending on the server-side configuration.
* '''action''' - the URL of the CGI script to which the data entered by the user will be sent. It is also possible to use ''mailto:'' to have the data sent to an email address.
* '''action''' - the URL of the CGI script to which the data entered by the user will be sent. It is also possible to use ''mailto:'' to have the data sent to an email address.
−
* '''onsubmit''' - an optional function to call, or inline script to execute before the form data is submited to the server. This can be useful for validating user input.
+
* '''onsubmit''' - an optional function to call, or inline script to execute before the form data is submitted to the server. This can be useful for validating user input.
The following is an example of a Form object named ''registerForm'' which submits the user data to a cgi script called register.cgi located in the /cgi-bin directory on the server which hosts the web site. The transfer is configured to use the GET method:
The following is an example of a Form object named ''registerForm'' which submits the user data to a cgi script called register.cgi located in the /cgi-bin directory on the server which hosts the web site. The transfer is configured to use the GET method:
</pre>
</pre>
−
A much easier approach is to access the object using the name that was assigned to it at creation. This is achieved using the getElementById(). Assuming in our first example the Text object was assigned a name of ''phoneNumber'' we could assign the object to a variable as follows:
+
A much easier approach is to access the object using the name that was assigned to it at creation. This is achieved using the ''getElementById()'' method. Assuming in our first example the Text object was assigned a name of ''phoneNumber'' we could assign the object to a variable as follows:
<pre>
<pre>
</pre>
</pre>
−
== JavaScript and The Text Object ==
+
== JavaScript and the Text Object ==
<google>ADSDAQBOX_FLOW</google>
<google>ADSDAQBOX_FLOW</google>
Now that we have covered the basics of the JavaScript Form Object it is time to look at the objects we can place into the Form container to interact with the user. The most common of these objects is the ''Text'' object. The Text object places a single line text field into the form into which the user can type information (such a name, address or telephone number).
Now that we have covered the basics of the JavaScript Form Object it is time to look at the objects we can place into the Form container to interact with the user. The most common of these objects is the ''Text'' object. The Text object places a single line text field into the form into which the user can type information (such a name, address or telephone number).
* '''name''' - represents the name by which this object may be reference in JavaScript.
* '''name''' - represents the name by which this object may be reference in JavaScript.
−
* '''id''' - the id used when accessing Form object elements using the ''getElementById()'' method (decribed later in this chapter)
+
* '''id''' - the id used when accessing Form object elements using the ''getElementById()'' method (described later in this chapter)
* '''value''' - primes the text object with an initial value (optional).
* '''value''' - primes the text object with an initial value (optional).
* '''onFocus''' - triggered when the text field gains focus (typically when the cursor is moved into the field to begin typing).
* '''onFocus''' - triggered when the text field gains focus (typically when the cursor is moved into the field to begin typing).
−
* '''onBlur''' - triggered when the text field loses focus (typically when the user clicks somewhere outsite the text area).
+
* '''onBlur''' - triggered when the text field loses focus (typically when the user clicks somewhere outside the text area).
* '''onChange''' - triggered when the contents of the text area is changed by the user and focus is lost.
* '''onChange''' - triggered when the contents of the text area is changed by the user and focus is lost.
−
Now that we have covered some of the basics of building a FORM we can bring some of these concepts toegther in an example using the text object. The following example creates a Form containing a text field. When the user clicks in the text field the ''onFocus'' event is triggered which, in turn, calls the ''select()'' method to highlight the text in the field. Note that since we are referencing the current object when calling the ''select()'' method we can use the ''this'' keyword to refer to the current object:
+
Now that we have covered some of the basics of building a FORM we can bring some of these concepts together in an example using the text object. The following example creates a Form containing a text field. When the user clicks in the text field the ''onFocus'' event is triggered which, in turn, calls the ''select()'' method to highlight the text in the field. Note that since we are referencing the current object when calling the ''select()'' method we can use the ''this'' keyword to refer to the current object:
<pre>
<pre>
== JavaScript and The Button Object ==
== JavaScript and The Button Object ==
−
Next to the Text object the Button object is probably the second most commonly used GUI componenent when developing JavaScript forms. There are three types of Button object available. As with the Text object the Button objects use the <input> tag. The ''type='' attribute is then used to define which type of button is to be created. The three different types are:
+
Next to the Text object the Button object is probably the second most commonly used GUI component when developing JavaScript forms. There are three types of Button object available. As with the Text object the Button objects use the ''<input>'' tag. The ''type='' attribute is then used to define which type of button is to be created. The three different types are:
* '''type="BUTTON"''' - The basic button which performs no action by default unless an event handler is assigned to it.
* '''type="BUTTON"''' - The basic button which performs no action by default unless an event handler is assigned to it.
−
* '''type="SUBMIT"''' - The submit button. When pressed this button causes the data in the Form to sent to the server using the settings defined in the enclosing <Form> tag. If the ''onsubmit'' attribute on the enclosing ''<form>'' tag has been specified this will be executed before the form data is submitted (useful for form data validation).
+
* '''type="SUBMIT"''' - The submit button. When pressed this button causes the data in the Form to be sent to the server using the settings defined in the enclosing ''<Form>'' tag. If the ''onsubmit'' attribute on the enclosing ''<form>'' tag has been specified this will be executed before the form data is submitted (useful for form data validation).
* '''type="RESET"''' - The reset button. When pressed causes the fields in the Form to be either cleared, or reset to the defaultValue (if one has been specified).
* '''type="RESET"''' - The reset button. When pressed causes the fields in the Form to be either cleared, or reset to the defaultValue (if one has been specified).
[[Image:Javascript radio buttons.jpg]]
[[Image:Javascript radio buttons.jpg]]
−
All three button share the same ''name'' attribute which acts to tie them together into a group. The ''value'' attribute defines the value that is passed through the server to indicate which button is selected when the form is submitted.
+
All three button share the same ''name'' attribute which acts to tie them together into a group. The ''value'' attribute defines the value that is passed through to the server to indicate which button is selected when the form is submitted.
There are number of actions that can be performed in JavaScript when working with Radio Buttons. Firstly, you can find out the number of Radio Buttons in a group by accessing the ''length'' property:
There are number of actions that can be performed in JavaScript when working with Radio Buttons. Firstly, you can find out the number of Radio Buttons in a group by accessing the ''length'' property:
</pre>
</pre>
−
'''Note:''' Programmatically changing the value of one Radio Button in a group using the above technique will not automicatically uncheck the currently checked button (as it would if a user really clicked on it). You must, therefore, remember to progammatically change the ''checked'' status of the other buttons.
+
'''Note:''' Programmatically changing the value of one Radio Button in a group using the above technique will not automatically uncheck the currently checked button (as it would if a user really clicked on it). You must, therefore, remember to programmatically change the ''checked'' status of the other buttons.
