Handling HTML Forms - Part III

Abstract

This is the third article of the series on HTML forms processing in JavaScript. This article assumes that you know how to write JavaScript functions and create HTML forms. See the last two articles if you are new to this topic. Today we will first analyze radio buttons and then some related topics. So, lets start the work!

Radio Buttons

Radio Buttons are used to select one option from a relatively short list. The only important property associated with a radio button is checked, which tells whether a radio button is selected or not. Following is an HTML code that displays three options for selection and displays a message when the button below them is clicked.

<html>
<head>
<title>HTML Form Processing</title>
<script language="JavaScript">

</script >
</head>

<body>
<form name="survey">
How did you come to know about this site:<br>
<input type="radio" name="refer" value="search"> Search Engine<br>
<input type="radio" name="refer" value="magazine"> Some Magazine<br>
<input type="radio" name="refer"> value="surf"; Just surfed in!<br> <br>
<input type="button" name="submit" value="submit" onClick="check_form(survey)">
</form>

</body>
</html>

Code Explanation

Note a few things about the above code: First of all, the input type of the radio buttons is radio. Secondly, all of them have the same name. That makes sense because they are all part of the same question. These radio buttons differ only in their value attribute. Now try this: Copy, paste, save and then load this script into your browser and click the submit button without selecting any option. The alert message will still appear!

Now, how can you confirm a selection has been made before submitting this form. To comprehend the answer we need to know two things. The first one we will cover is arrays. We will briefly touch them. A more detailed discussion is deferred for some later article.

Array of Radio Buttons

An array, simply put, is a collection of objects referred to by their position in the collection. In the example given above, we have a collection of radio buttons named "refer", or in programming terms: an array "refer" of radio buttons. The value at the first position in an array is supposed to be 0. So, the search option is refer[0]. Similarly, the magazine option is refer[1] and the surf option is refer[1]. We can now re-write the check_form function to tell us the value of the option selected. The new function can also inform us if we click the button without selecting anything.

2. Mar 22, 2001 2:41 AM
In response to message posted by ahunter:

In several C based languages (like C++, JavaScript and Java) the arrays start with index 0 ...

-- posted by ali_baba

For a complete listing of article comments, questions, and other discussions related to Muhammad Ali Shah's JavaScript topic, please visit the Discussions page.