CIS 89C Client-Side Programming with JavaScript

CIS 89C Client-Side Programming with JavaScript

Unit 16 - input (week 7)

type="radio" type="checkbox"

textarea

References:

McDuffie - Chapter 12 Forms and JavaScript

Topics:

Opening statement

input type="radio" - McDuffie page 413

input type="checkbox" - McDuffie page 394

textarea - McDuffie page 407

Summary

***********************************************************

Opening statement

There are several types of input elements.

We will look at two more of the input types:

We will also look at:

***********************************************************

input type="radio"

The <input type="radio" /> creates a small, round radio button.

Radio buttons are organized into a set of radio buttons.

If you click one of the radio buttons, it is selected,

and the other radio buttons "pop out", so no more than one radio button is selected at a time.

Initially you may specify one of the radio buttons in the set with the attribute selected="selected"

Do not select more than one.

If you do not initially select one of the radio buttons, initially none will be selected.

After the use selects one of the radio buttons, there will always be ONE radio button selected. When the user selects a new one, the previously selected radio button "pops out".

All radio buttons in a set have the same name.

Remember that more than one element may have the same name.

This is a case where several elements have the same name.

Give each radio button a different value, example:

value="red"

When radio buttons are processed by the server, the value is used to identify which button is selected.

Processing a set of radio buttons:

The radio button can be processed when it is clicked,

or we can wait until the form is submitted.

Processing may be ether by:

- submit the form, which will then be processed by the server

this is beyond the scope of this class

- process the form using JavaScript

- or both.

We may wish to process the input data at either of two times:

- onclick

- This event occurs when the user uses the mouse to click the button

- we use the onclick attribute of the <input type="radio" />

element

- onsubmit

- This event occurs when the user presses the submit button for the form

- we use the onsubmit attribute of the <form> element

Processing onclick, passing this:

When you process a radio button onclick event, it is best to pass this.

this is a reference to the object in the Document Object Model, corresponding to the XHTML element.

Example taken from an example in our web site:

<input type="radio" name="color-radio"

       onclick="color_radio_function(this);"

       style="color: black; background-color: #ffffcc;" />

type="radio" means that this is a radio button

name="color-radio" means that this is a member of the set of

all radio buttons that have the same name

onclick="color_radio_function(this);"

calls our JavaScript function, passing the

object in the DOM corresponding to this radio button.

style="color: black; background-color: #ffffcc;"

The style does not really do anything for the

radio button. It is used here to contain

style information, that we want to use in our function.

When the user clicks on this radio button, it invokes our JavaScript function:

// onclick copy radio button color and backgroundColor

// to the div

// the selected radio button object is passed as

// the argument

function color_radio_function(e)

{

var my_div = document.getElementById("my-div");

my_div.style.color = e.style.color;

my_div.style.backgroundColor = e.style.backgroundColor;

}

In this function, this was received in the parameter, which we have named e.

So, in the function, when we say e, we get a reference to the object passed by the onclick event, which is the object representing the radio button which was clicked.

The code for this function picks up the color and backgroundColor from the style in the html element, which is referred to by e,

our currently clicked radio button.

This color and backbroundColor are applied to style in the division element with id="my-div".

Using this as an argument passed to a JavaScript function is a very good way for the JavaScript function to know what is the object representing the current

HTMLelement

Processing onsubmit:

When the use clicks a submit button in the form, the onsubmit event fires for the form. REMEMBER: the onsubmit event is for the form, not for the submit button.

I HAVE NOT TESTED THESE:

When the form is submitted, we want to look at all the radio buttons in a set, to find the one that is selected.

There are two ways, that I know of, to look at all the radio buttons.

1) The method given by the book is:

First get the form. I suggest document.getElementById() to do this.

Example:

var myForm = document.getElementById("myForm");

Then get an array containing all the elements with the specified name.

The

way to do this is to look at:

var mySet = myForm.nameOfButtonSet;

where:

- myForm is a reference to the form object in the DOM.

(which we can obtain with document.getElementById().

- nameOfButtonSet is the value of the name attribute, which we gave to each of the radio buttons in this set.

Then we can use an array subscript to look at all of the radio button objects in the set:

for ( var I = 0; I < mySet.length; i++)

{

if ( mySet[i].selected )

{ process the selected button }

}

I think the problem with this method, is that it will not work is there are any intervening elements between the form and the controls. Often, the best way to make a form look good is to put a table inside the form, and put the controls inside the cells in the table. This aligns the controls neatly.

Perhaps it should be:

if ( mySet[i].checked )

rather than:

if ( mySet[i].selected )

I am not sure.

How do you make this code work?

Because I have not tested this example, there is probably something wrong with it. How do you proceed to make it work? The answer is to use alert to look at each step of the code, until you get it working.

Start by just writing one line, followed by the alert:

var myForm = document.getElementById("myForm");

alert(myForm);

Once you get that working, add the next line, and use alert to look at everything in that line. This will probably bog down, if you try to put the controls in a table.

2) An alternate method

An alternate method is to use the Element method: getElementsByTagName().

This method can be used with any object in the DOM that represents an html element. It will get all descendent elements with the tag name specified, in an array, in the order they appear in the html document.

Because it gets all descendent elements with the specified tag name, it works even when there is an intervening table.

Once we have this array of descendent elements with the tag name "input", we can search through them all, looking for an element with the name of our radio button set, and the selected value true.

var myForm = document.getElementById("myForm");

var mySet = myForm.getElementsByTagName("input");

for ( var I = 0; I < mySet.length; i++)

{

if ( myset.name = "nameOfMySet" && mySet[i].selected )

{ process the selected button }

}

Again, this code probably has some bug in it. To use it, code one line at a time and watch it, using alert.

Why do I give you code, that probably will not work?

There are two reasons:

1) I have not had time to check all the code for the material used in the last two weeks of the course.

2) It is probably time for you to be able to begin to write code, that does not follow the carefully tested code that you can find in the class web site. You will want to write much code, that is not exactly like what we have done in the class. Now is a good time to start.

***********************************************************

input type="checkbox"

The input type="checkbox" are independent checkboxes.

They are not in a related set, as radio buttons are in a set.

Each checkbox is independent of all the other checkboxes.

You can give each checkbox an id and use document.getElementById() to access a checkbox.

An example:

var cats_box = document.getElementById("cats");

if(cats_box.checked)

alert("The cats meow";

You can process a checkbox when it is clicked.

You can also process each checkbox when the form is submitted.

Note: In the book by McDuffie, there is an example where all the checkboxes are given the same name. You can give any set of elements the same name. I am not sure why you would want to have checkboxes with the same name, when it is easy to access each one by id.

***********************************************************

textarea

A textarea provides a place for multiple lines of text.

Because this is a less controlled set of text, rather than one line, to contain one specific piece of information, you are less likely to do anything to validate the data in a text area.

Sometimes, you might wish to write in a text area.

Example:

var area = document.getElementById("write_area");

area.value = "This is/ntext, written/nin the textarea";

***********************************************************

Summary

To process a set of radio buttons, you probably want to get the form by id.

Then use getElementsByTagName("input") to get all the input elements in the form. Then use a for loop to look at all the input elements. Select the input elements that have the name of your radio button set. Look for one of these radio buttons that is seclected.

Note: I have not tested the radio button code.

checkboxes are independent. Get the one you want, by getting it by id.

Then see if its checked value is true or not.

You can put data in the value attribute's value of a textarea, to put the data in the text area. You are less likely to process the text form a text area, but you can do it, if needed.