Newsletter sign-up
View all newsletters

Enterprise Java Newsletter
Stay up to date on the latest tutorials and Java community news posted on JavaWorld

Sponsored Links

Optimize with a SATA RAID Storage Solution
Range of capacities as low as $1250 per TB. Ideal if you currently rely on servers/disks/JBODs

JavaWorld.com > Java Development Tools >

Using JavaScript and forms

Of all the hats JavaScript can wear, its form processing features are among the most sought and used

By Gordon Mccomb, JavaWorld.com, 06/01/96

  • Print
  • Feedback
.

Page 4 of 7

form.rad[0].checked = true;  // sets to first button in the rad group

Using Check Boxes

Check boxes are stand-alone elements; that is, they don't interact with neighboring elements like radio buttons do. Therefore they are a bit easier to use. Using JavaScript you can test if a check box is checked using the checked property, as shown here. Likewise, you can set the checked property to add or remove the checkmark from a check box. In this example an alert message tells you if the first check box is checked. The value is true if the box is checked; false if it is not.

Listing 4. form_check.html

<HTML>
<HEAD>
<TITLE>Checkbox Test</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function testButton (form){
    alert (form.check1.checked);
}
</SCRIPT>
</BODY>
<FORM NAME="testform">
<INPUT TYPE="button" NAME="button" Value="Click" 
    onClick="testButton(this.form)"><BR>
<INPUT TYPE="checkbox" NAME="check1" Value="Check1">Checkbox 1<BR>
<INPUT TYPE="checkbox" NAME="check2" Value="Check2">Checkbox 2<BR>
<INPUT TYPE="checkbox" NAME="check3" Value="Check3">Checkbox 3<BR>
</FORM>
</BODY>
</HTML>

As with the radio button object, add a CHECKED attribute to the HTML markup for that check box you wish to be initially check when the form is first loaded. 

<INPUT TYPE="checkbox" NAME="check1" Value="0" CHECKED>Checkbox 1>

You can also set the button selection programmatically with JavaScript, using the checked property. Specify the name of the checkbox you want to check, as in 

form.check1.checked = true;

Using Text Areas
Text areas are used for multiple-line text entry. The default size of the text box is 1 row by 20 characters. You can change the size using the COLS and ROWS attributes. Here's a typical example of a text area with a text box 40 characters wide by 7 rows: 

<TEXTAREA NAME="myarea" COLS="40" ROWS="7">
</TEXTAREA>

You can use JavaScript to read the contents of the text area box. This is done with the value property. Here is an example:

Listing 5. form_textarea.html

<HTML>
<HEAD>
<TITLE>Text Area Test</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function seeTextArea (form) {
    alert (form.myarea.value);

}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform">
<INPUT TYPE="button" NAME="button3" Value="Test" 
    onClick="seeTextArea(this.form)">
<TEXTAREA NAME="myarea" COLS="40" ROWS="5">
</TEXTAREA>
</FORM>
</BODY>
</HTML>

You can preload text into the text area in either of two ways. One method is to enclose text between the <TEXTAREA> and </TEXTAREA> tags. This method is useful if you wish to include hard returns, as these are retained in the text area box. Or, you can set it programmatically with JavaScript using the following syntax: 

form.textarea.value = "Text goes here";
  • form is the name of the form.
  • textarea is the name of the textarea.
  • "Text goes here" is the text you want to display

Using Selection Lists

List boxes let you pick the item you want out of a multiple-choice box. The listbox itself is created with the <SELECT> tag, and the items inside it are created by one or more <OPTION> tags. You can have any number of <OPTION> tags in a list. The list is terminated with a </SELECT> tag.

  • Print
  • Feedback