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 3 of 7

  • Hidden text box (TYPE="hidden").
  • Radio button (TYPE="radio")
  • Check box (TYPE="checkbox")
  • Text area (<TEXT AREA>)
  • Lists (<SELECT>)

Using Hidden Text Boxes

From a JavaScript standpoint, hidden text boxes behave just like regular text boxes, sharing the same properties and methods. From a user standpoint, hidden text boxes "don't exist" because they do not appear in the form. Rather, hidden text boxes are the means by which special information can be passed between server and client. They can also be used to hold temporary data that you might want to use later. Because hidden text boxes are used like standard text boxes a separate example won't be provided here.

Using Radio Buttons

Radio buttons are used to allow the user to select one, and only one, item from a group of options. Radio buttons are always used in multiples; there is no logical sense in having just one radio button on a form, because once you click on it, you can't unclick it. If you want a simple click/unclick choice use a check box instead (see below).

To define radio buttons for JavaScript, provide each object with the same name. JavaScript will create an array using the name you've provided; you then reference the buttons using the array indexes. The first button in the series is numbered 0, the second is numbered 1, and so forth. Note that the VALUE attribute is optional for JavaScript-only forms. You'll want to provide a value if you submit the form to a CGI program running on the server, however. 

<INPUT TYPE="radio" NAME="rad" VALUE="radio_button1" onClick=0>
<INPUT TYPE="radio" NAME="rad" VALUE="radio_button2" onClick=0>
<INPUT TYPE="radio" NAME="rad" VALUE="radio_button3" onClick=0>
<INPUT TYPE="radio" NAME="rad" VALUE="radio_button4" onClick=0>

Following is an example of testing which button is selected. The for loop in the testButton function cycles through all of the buttons in the "rad" group. When it finds the button that's selected, it breaks out of the loop and displays the button number (remember: starting from 0).

LIsting 3. form_radio.html

<HTML>
<HEAD>
<TITLE>Radio Button Test</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function testButton (form){
    for (Count = 0; Count < 3; Count++) {
        if (form.rad[Count].checked)
            break;
    }
    alert ("Button " + Count + " is selected");
}
</SCRIPT>
</BODY>
<FORM NAME="testform">
<INPUT TYPE="button" NAME="button" Value="Click" 
    onClick="testButton(this.form)"> <BR>
<INPUT TYPE="radio" NAME="rad" Value="rad_button1" onClick=0><BR>
<INPUT TYPE="radio" NAME="rad" Value="rad_button2" onClick=0><BR>
<INPUT TYPE="radio" NAME="rad" Value="rad_button3" onClick=0><BR>
</FORM>
</HTML>

Setting a radio button selection with HTML market is simple. If you want the form to initially appear with a given radio button selected, add the CHECKED attribute to the HTML markup for that button: 

<INPUT TYPE="radio" NAME="rad" Value="rad_button1" CHECKED onClick=0>

You can also set the button selection programmatically with JavaScript, using the checked property. Specify the index of the radio button array you want to checked.

  • Print
  • Feedback