CIS 89C Client-Side Programming with JavaScript

Unit 17 - buttons & select lists (week 7)

References:

McDuffie - Chapter 12 Forms and JavaScript

Topics:

Opening statement

buttons - McDuffie page 417

submit buttons - McDuffie page 420

reset buttons - McDuffie page 420

select lists - McDuffie page-409

Summary

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

Opening statement

Buttons can be built as input elements or as button elements.

A button can be a form submit button, a form reset button,

or just a button with no predefined use.

Select lists give the user a list, from which they can choose options.

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

buttons

There are three types of buttons:

• button (ordinary button; not submit or reset)
• submit a form
• reset a form

Submit and reset buttons must be in a form container element. The other ordinary buttons may, or may not, be within a form container element.

There are alternate ways to build a button:

• Ordinary button
• button element type="button"
• input element type="button"
• Button to submit a form
• button element type="submit"
• input element type="submit"
• Button to reset a form
• button element type="reset"
• input element type="reset"

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

ordinary button

A typical ordinary button is:

<button type="button" id="data_ready_button"

onclick="process_ready()">

Click when ready

</button>

OR

<input type="button" id="data_ready_button"

onclick="process_ready()">

Click when ready

</input>

The type="button" is the default for a button element, so you can just code:

<button id="data_ready_button"

onclick="process_ready()">

Click when ready

</button>

Any one of the three XHTML elements will create a button with the words:

Click when ready

on the face of the button.

Any one of these will invoke the JavaScript function:

process_ready()

when the user clicks on the button.

The JavaScript function can then do whatever processing you wish.

An ordinary button may be within a form, or may not be within a form.

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

submit button

A typical submit button is:

<form id="a_form" onsubmit="return validate()">

<button id="submit_button" type="submit">

Click to submit

</button>

</form>

OR

<form id="a_form" onsubmit="return validate()">

<input id="submit_button" type="submit">

Click to submit

</input>

</form>

Either of these will create a submit button.

A submit button MUST be within a form container.

Notice that the button does NOT have event processing.

The onsubmit attribute is in the form element.

Return from validation function

The validation function looks at the values provided by the user, and determines if they are all valid.

If everything is valid, the validation function returns true.

The code in the onsubmit has a return keyword, which returns the true value to the browser.

When the browser receives the true value, it submits the form to the server.

It is important that the onsubmit attribute value must have the return keyword to return the return value from the validation function to the browser, to cause the browser to submit the form to the server.

If some of the data, provided by the user, then the validation function should return false, which will cause the browser to NOT submit the form to the server.

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

reset button

A typical reset button is:

<form id="a_form" onreset="return process()">

<button id="reset_button" type="reset" />

</form>

OR

<form id="a_form" onreset="return process()">

<input id="reset_button" type="reset" />

</form>

Usually there is no onreset processing function.

If you want one you can have one.

The management of the return value from the process() function is similar to the way the submit processing manages the return value from the validation function.

If the process() function returns true, the form is reset.

If the process() function returns false, the form is NOT reset.

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

select list - with a single selection

By default, a select list only allows the user to select one option from the list.

Example - xhtml:

<select id="pet" onchange="pet_function();">

<option>cat</option>

<option>dog</option>

<option>rabbit</option>

<option selected="selected">none</option>

</select>

<p id="result"></p>

This example creates a pull-down list. The user clicks the small arrowhead at the right, and the list drops down. Then the user can select one of the options.

( Initially none is selected. )

The list can be processed onchange, as this example has been set up, or onsubmit of the form.

The Document Object Model has a Select object, corresponding to the xhtml element. The Select object has two properties of interest:

options - a read-only array of references to the options, in the order they appear.

selectedIndex - a number, which is the subscript of the selected option.

So we can access the option which has been selected:

Example JavaScript:

// select list onchange handler

function pet_function()

{

var pet_list = document.getElementById("pet");

var pet_index = pet_list.selectedIndex;

var value = pet_list.options[pet_index].value;

et cetera.

This value is the value of the option which is selected.

We can then write it somewherer.

Example continued:

var result_area = document.getElementById("result");

result_area.innerHTML = "index: "+pet_index+" pet: "+pet_list.options[pet_index].value;

}

The innerHTML property is not standard JavaScript, but is generally well supported. It writes the text (and also included elements) into the specified html element.

Here we write the value of the option, which is "cat", "dog", or "rabbit", into the element with the id "result", which could be a paragraph.

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

select list - with multiple selections

To allow the user to select multiple options in the select list, two additional options are required in the select element:

- size="n" // where n is a number greater than 1

// this number is the number of options that can be seen.

// If the number is less than the total number of options,

// there is a scrollable list

- multiple="multiple" // allows multiple selections

Example - xhtml:

<select id="pet"

onchange="pet_function();" multiple="multiple"

size="4"

>

<option>cat</option>

<option>dog</option>

<option>rabbit</option>

<option selected="selected">none</option>

</select>

<p id="result"></p>

Example - JavaScript:

// select list onchange handler

function pet_function()

{

var pet_list = document.getElementById("pet");

var result_area = document.getElementById("result");

result_area.innerHTML = "Selected pets<br />"; // reset result text

for(var pet_index=0; pet_index<pet_list.options.length; pet_index++)

{

if(pet_list.options[pet_index].selected)

{

var index_result = index: "+pet_index;

var pet_result = +" &nbsp; pet: "+pet_list.options[pet_index].value;

result_area.innerHTML = result_area.innerHTML+"index_result+pet_result+"<br />";

}

}

}

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

Summary

The ordinary button can be used within a form, or outside a form.

You can provide any kind of processing function for the onclick attribute value of an ordinary button.

submit and reset buttons MUST be within a form.

If you have no processing function, the submit or reset action occurs.

If you have a processing function, the submit or reset action only occurs if it returns true. There is no submit or reset action if the processing function returns false.

Select lists selection, with a single selection, can be accessed using the select properties:

- options - an array of references to the options

- selectedIndex - the index of the option that is selected

If multiple selections are permitted, a loop can be used to look at all the options in the options array.

The selected options have their selected property set to true.