[Previous reference file]
Object. A set of radio buttons on an HTML form. The user
can use a set of radio to choose one item from a list.
To define a set of radio buttons, use standard HTML syntax
with the addition of JavaScript event handlers:
<INPUT
TYPE="radio"
NAME="radioName"
VALUE="buttonValue"
[CHECKED]
[onBlur="handlerText"]
[onClick="handlerText"]
[onFocus="handlerText"]>
textToDisplay
NAME="radioName" specifies the name of the
Radio object. All radio buttons in a group have the same NAME attribute.
You can access this value using the name property, and you can use
this name when indexing the elements array.
VALUE="buttonValue" specifies a value that is returned
to the server when the radio button is selected and the form is submitted.
This defaults to "on." You can access this value using the value
property.
CHECKED specifies that the radio button is selected.
You can access this value using the defaultChecked property.
textToDisplay specifies the label to display beside
the radio button.
To use a radio button's properties and methods:
1. radioName[index1].propertyName
2. radioName[index1].methodName(parameters)
3. formName.elements[index2].propertyName
4. formName.elements[index2].methodName(parameters)
radioName is the value of the NAME attribute of a
Radio object.
index1 is an integer representing a radio button
in a Radio object.
formName is either the value of the NAME attribute
of a Form object or an element in the forms array.
index2 is an integer representing a radio button
on a form. The elements array contains an entry for each radio button
in a Radio object.
propertyName is one of the properties listed below.
methodName is one of the methods listed below.
Form object
-
-
Navigator 2.0
-
Navigator 3.0: added type property; added blur and focus
methods
A Radio object on a form looks as follows:
A Radio object is a form element and must be defined
within a <FORM> tag.
All radio buttons in a radio button group use the same
name property. To access the individual radio buttons in your code,
follow the object name with an index starting from zero, one for each button
the same way you would for an array such as forms:
document.forms[0].radioName[0] is the first,
document.forms[0].radioName[1] is the second, and so on.
The Radio object has the following properties:
The Radio object has the following methods:
Example 1. The following example defines a radio
button group to choose among three music catalogs. Each radio button is given
the same name, NAME="musicChoice," forming a group of buttons for
which only one choice can be selected. The example also defines a text field
that defaults to what was chosen via the radio buttons but that allows the
user to type a nonstandard catalog name as well. The onClick event handler
sets the catalog name input field when the user clicks a radio button.
<INPUT TYPE="text" NAME="catalog" SIZE="20">
<INPUT TYPE="radio" NAME="musicChoice" VALUE="soul-and-r&b"
onClick="musicForm.catalog.value = 'soul-and-r&b'"> Soul and R&B
<INPUT TYPE="radio" NAME="musicChoice" VALUE="jazz"
onClick="musicForm.catalog.value = 'jazz'"> Jazz
<INPUT TYPE="radio" NAME="musicChoice" VALUE="classical"
onClick="musicForm.catalog.value = 'classical'"> Classical
Example 2. The following example contains a form
with three text boxes and three radio buttons. The radio buttons let the
user choose whether the text fields are converted to uppercase or lowercase,
or not converted at all. Each text field has an onChange event handler that
converts the field value depending on which radio button is checked. The
radio buttons for uppercase and lowercase have onClick event handlers that
convert all fields when the user clicks the radio button.
<HTML>
<HEAD>
<TITLE>Radio object example</TITLE>
</HEAD>
<SCRIPT>
function convertField(field) {
if (document.form1.conversion[0].checked) {
field.value = field.value.toUpperCase()}
else {
if (document.form1.conversion[1].checked) {
field.value = field.value.toLowerCase()}
}
}
function convertAllFields(caseChange) {
if (caseChange=="upper") {
document.form1.lastName.value = document.form1.lastName.value.toUpperCase()
document.form1.firstName.value = document.form1.firstName.value.toUpperCase()
document.form1.cityName.value = document.form1.cityName.value.toUpperCase()}
else {
document.form1.lastName.value = document.form1.lastName.value.toLowerCase()
document.form1.firstName.value = document.form1.firstName.value.toLowerCase()
document.form1.cityName.value = document.form1.cityName.value.toLowerCase()
}
}
</SCRIPT>
<BODY>
<FORM NAME="form1">
<B>Last name:</B>
<INPUT TYPE="text" NAME="lastName" SIZE=20 onChange="convertField(this)">
<BR><B>First name:</B>
<INPUT TYPE="text" NAME="firstName" SIZE=20 onChange="convertField(this)">
<BR><B>City:</B>
<INPUT TYPE="text" NAME="cityName" SIZE=20 onChange="convertField(this)">
<P><B>Convert values to:</B>
<BR><INPUT TYPE="radio" NAME="conversion" VALUE="upper"
onClick="if (this.checked) {convertAllFields('upper')}"> Upper case
<BR><INPUT TYPE="radio" NAME="conversion" VALUE="lower"
onClick="if (this.checked) {convertAllFields('lower')}"> Lower case
<BR><INPUT TYPE="radio" NAME="conversion" VALUE="noChange"> No conversion
</FORM>
</BODY>
</HTML>
See also the example for the Link
object.
Checkbox object,
Form object, Select
object
Method. Returns a pseudo-random number between zero and one.
The random number generator is seeded from current time, as in Java.
Math.random()
Math
-
-
Navigator 2.0
-
Navigator 3.0: works on all platforms. In previous releases, it worked on
Unix platforms only.
//Returns a random number between 0 and 1
function getRandom() {
return Math.random()
}
Property. Specifies the URL of the calling document when
a user clicks a link.
document.referrer
document
Navigator 2.0
Yes
When a user navigates to a destination document by clicking
a Link object on a source document, the referrer property contains
the URL of the source document. Evaluate the referrer property from
the destination document.
If the user clicked on a link to get to the current URL,
referrer contains the URL the user linked from. referrer is empty
if the user typed a URL in the Location box, or used some other means to
get to the current URL. referrer is also empty if the server does
not provide environment variable information.
referrer is a read-only property.
In the following example, the getReferrer function
is called from the destination document. It returns the URL of the source
document.
function getReferrer() {
return document.referrer
}
Method. Makes newly installed plug-ins available, updates
related arrays such as the plugins array, and optionally reloads open
documents that contain plug-ins.
navigator.plugins.refresh([true|false])
true refreshes the plugins array to make newly
installed plug-ins available, and reloads all open documents that contain
embedded objects (<EMBED> tag).
false refreshes the plugins array to make
newly installed plug-ins available, but does not reload open documents.
plugins array
Navigator 3.0
The refresh method makes newly installed plug-ins
available by updating related arrays such as the plugins array. If
the true keyword is specified, refresh reloads all open documents
that contain plug-ins.
When the user installs a plug-in, that plug-in is not available
until refresh is called or the user closes and restarts Navigator.
The following code refreshes arrays and reloads open documents
containing embedded objects:
navigator.plugins.refresh(true)
go,
reload,
replace methods
Method. Forces a reload of the window's current document.
location.reload([true])
true forces an unconditional HTTP GET of the document
from the server. This should not be used unless you have reason to believe
that disk and memory caches are off or broken, or the server has a new version
of the document (possibly it is generated by a CGI on each request).
location
Navigator 3.0
The reload method forces a reload of the document
specified by the URL in the location.href property.
This method uses the same policy that the Navigator's Reload
button uses (Once per Session, Every Time, or Never). The user sets the default
value of this policy by choosing Network Preferences from the Options menu
and specifying Verify Documents on the Cache tab of the Preferences dialog
box.
The reload method does not force
a transaction with the server, unless the user has set the preference to
Every Time, in which case it does a "conditional GET" request using an
If-modified-since HTTP header, to ask the server to return the document only
if its last-modified time is newer than the time the client keeps in its
cache. In other words, reload will reload from the cache, unless the
user has specified Every Time and the document has changed on the
server since it was last loaded and saved in the cache.
In event handlers, you must specify
window.location.reload() instead of simply using
location.reload(). Due to the scoping of static objects in
JavaScript, a call to location without specifying an object
name is equivalent to document.location, which is a synonym
for document.URL.
The following example displays an image and three radio
buttons. The user can click the radio buttons to choose which image is displayed.
Clicking another button lets the user reload the document.
<SCRIPT>
function displayImage(theImage) {
document.images[0].src=theImage
}
</SCRIPT>
<FORM NAME="imageForm">
<B>Choose an image:</B>
<BR><INPUT TYPE="radio" NAME="imageChoice" VALUE="image1" CHECKED
onClick="displayImage('seaotter.gif')">Sea otter
<BR><INPUT TYPE="radio" NAME="imageChoice" VALUE="image2"
onClick="displayImage('orca.gif')">Killer whale
<BR><INPUT TYPE="radio" NAME="imageChoice" VALUE="image3"
onClick="displayImage('humpback.gif')">Humpback whale
<BR>
<IMG NAME="marineMammal" SRC="seaotter.gif" ALIGN="left" VSPACE="10">
<P><INPUT TYPE="button" VALUE="Click here to reload"
onClick="window.location.reload()">
</FORM>
go,
refresh,
replace methods
Method. Loads the specified URL over the current history
entry.
location.replace("URL")
URL specifies the URL to load.
location
Navigator 3.0
The replace method loads the specified URL over the
current history entry, so after the replace method is used, the user
cannot navigate to the previous URL by using Navigator's Back button.
In event handlers, you must specify
window.location.replace() instead of simply using
location.replace(). Due to the scoping of static objects in
JavaScript, a call to location without specifying an object
name is equivalent to document.location, which is a synonym
for document.URL.
If your program will be run with JavaScript in Navigator
2.0, you could put the following line in a <SCRIPT> tag early in your
program. This emulates replace, which was introduced in Navigator
3.0:
if (location.replace == null)
location.replace = location.assign
The replace method does not create a new entry in
the history list. To create an entry in the history list while loading a
URL, use go.
The following example lets the user choose among several
catalogs to display. The example displays two sets of radio buttons which
let the user choose a season and a category, for example the Spring/Summer
Clothing catalog or the Fall/Winter Home & Garden catalog. When the user
clicks the Go button, the displayCatalog function executes the
replace method, replacing the current URL with the URL appropriate
for the catalog the user has chosen. Note that after the replace method
is used, the user cannot navigate to the previous URL (the list of catalogs)
by using Navigator's Back button.
<SCRIPT>
function displayCatalog() {
var seaName=""
var catName=""
for (var i=0; i < document.catalogForm.season.length; i++) {
if (document.catalogForm.season[i].checked) {
seaName=document.catalogForm.season[i].value
i=document.catalogForm.season.length
}
}
for (var i in document.catalogForm.category) {
if (document.catalogForm.category[i].checked) {
catName=document.catalogForm.category[i].value
i=document.catalogForm.category.length
}
}
fileName=seaName + catName + ".html"
location.replace(fileName)
}
</SCRIPT>
<FORM NAME="catalogForm">
<B>Which catalog do you want to see?</B>
<P><B>Season</B>
<BR><INPUT TYPE="radio" NAME="season" VALUE="q1" CHECKED>Spring/Summer
<BR><INPUT TYPE="radio" NAME="season" VALUE="q3">Fall/Winter
<P><B>Category</B>
<BR><INPUT TYPE="radio" NAME="category" VALUE="clo" CHECKED>Clothing
<BR><INPUT TYPE="radio" NAME="category" VALUE="lin">Linens
<BR><INPUT TYPE="radio" NAME="category" VALUE="hom">Home & Garden
<P><INPUT TYPE="button" VALUE="Go" onClick="displayCatalog()">
</FORM>
history object; "replace"
parameter of open (document object) method;
go, refresh,
reload methods
Method. Simulates a mouse click on a reset button for the
calling form.
formName.reset()
formName is the name of any form or an element in
the forms array.
Form object
Navigator 3.0
The reset method restores a form element's default
values. A reset button does not need to be defined for the form.
The following example displays a Text object in which
the user is to type "CA" or "AZ". The Text object's onChange event
handler calls a function that executes the form's reset method if
the user provides incorrect input. When the reset method executes,
defaults are restored and the form's onReset event handler displays a
message.
<SCRIPT>
function verifyInput(textObject) {
if (textObject.value == 'CA' || textObject.value == 'AZ') {
alert('Nice input')
}
else { document.form1.reset() }
}
</SCRIPT>
<FORM NAME="form1" onReset="alert('Please enter CA or AZ.')">
Enter CA or AZ:
<INPUT TYPE="text" NAME="state" SIZE="2" onChange=verifyInput(this)><P>
</FORM>
onReset event handler,
Reset object
Object. A reset button on an HTML form. A reset button resets
all elements in a form to their defaults.
To define a reset button, use standard HTML syntax with
the addition of JavaScript event handlers:
<INPUT
TYPE="reset"
NAME="resetName"
VALUE="buttonText"
[onBlur="handlerText"]
[onClick="handlerText"]
[onFocus="handlerText"]>
NAME="resetName" specifies the name of the
Reset object. You can access this value using the name property,
and you can use this name when indexing the elements array.
VALUE="buttonText" specifies the text to display
on the button face. You can access this value using the value
property.
To use a Reset object's properties and methods:
1. resetName.propertyName
2. resetName.methodName(parameters)
3. formName.elements[index].propertyName
4. formName.elements[index].methodName(parameters)
resetName is the value of the NAME attribute of a
Reset object.
formName is either the value of the NAME attribute
of a Form object or an element in the forms array.
index is an integer representing a Reset object
on a form or the name of a Reset object as specified by the NAME
attribute.
propertyName is one of the properties listed below.
methodName is one of the methods listed below.
Form object
-
-
Navigator 2.0
-
Navigator 3.0: added type property; added onBlur and onFocus event
handlers; added blur and focus methods
A Reset object on a form looks as follows:
A Reset object is a form element and must be defined
within a <FORM> tag.
The reset button's onClick event handler cannot prevent
a form from being reset; once the button is clicked, the reset cannot be
canceled.
The Reset object has the following properties:
The Reset object has the following methods:
Example 1. The following example displays a
Text object with the default value "CA" and a reset button with the
text "Clear Form" displayed on its face. If the user types a state abbreviation
in the Text object and then clicks the Clear Form button, the
original value of "CA" is restored.
<B>State: </B><INPUT TYPE="text" NAME="state" VALUE="CA" SIZE="2">
<P><INPUT TYPE="reset" VALUE="Clear Form">
Example 2. The following example displays two
Text objects, a Select object, and three radio buttons; all
of these objects have default values. The form also has a reset button with
the text "Defaults" on its face. If the user changes the value of any of
the objects and then clicks the Defaults button, the original values
are restored.
<HTML>
<HEAD>
<TITLE>Reset object example</TITLE>
</HEAD>
<BODY>
<FORM NAME="form1">
<BR><B>City: </B><INPUT TYPE="text" NAME="city" VALUE="Santa Cruz" SIZE="20">
<B>State: </B><INPUT TYPE="text" NAME="state" VALUE="CA" SIZE="2">
<P><SELECT NAME="colorChoice">
<OPTION SELECTED> Blue
<OPTION> Yellow
<OPTION> Green
<OPTION> Red
</SELECT>
<P><INPUT TYPE="radio" NAME="musicChoice" VALUE="soul-and-r&b"
CHECKED> Soul and R&B
<BR><INPUT TYPE="radio" NAME="musicChoice" VALUE="jazz">
Jazz
<BR><INPUT TYPE="radio" NAME="musicChoice" VALUE="classical">
Classical
<P><INPUT TYPE="reset" VALUE="Defaults" NAME="reset1">
</FORM>
</BODY>
</HTML>
Button object,
Form object,
onReset event handler,
reset method,
Submit object
Method. Transposes the elements of an array: the first array
element becomes the last and the last becomes the first.
arrayName.reverse()
arrayName is the name of an Array object or
a property of an existing object.
Array
Navigator 3.0
The reverse method transposes the elements of the
calling array object.
The following example creates an array myArray,
containing three elements, then reverses the array.
myArray = new Array("one", "two", "three")
myArray.reverse()
This code changes myArray so that:
-
-
myArray[0] is "three"
-
myArray[1] is "two"
-
myArray[2] is "one"
join,
sort methods
Method. Returns the value of a number rounded to the nearest
integer.
Math.round(number)
number is any numeric expression or a property of an
existing object.
Math
Navigator 2.0
If the fractional portion of number is .5 or greater,
the argument is rounded to the next highest integer. If the fractional portion
of number is less than .5, the argument is rounded to the next lowest
integer.
//Displays the value 20
document.write("The rounded value is " + Math.round(20.49))
//Displays the value 21
document.write("<P>The rounded value is " + Math.round(20.5))
//Displays the value -20
document.write("<P>The rounded value is " + Math.round(-20.5))
//Displays the value -21
document.write("<P>The rounded value is " + Math.round(-20.51))
[Next reference file]
file: /Techref/language/java/script/ref_r-r.htm,
41KB, , updated: 2009年2月2日 14:27, local time: 2025年9月7日 02:19,
©2025 These pages are served without commercial sponsorship. (No popup ads, etc...).Bandwidth abuse increases hosting cost forcing sponsorship or shutdown. This server aggressively defends against automated copying for any reason including offline viewing, duplication, etc... Please respect this requirement and DO NOT RIP THIS SITE.
Questions?<A HREF="http://techref.massmind.org/techref/language/java/script/ref_r-r.htm"> Radio </A>
Did you find what you needed?
Welcome to massmind.org!
Welcome to techref.massmind.org!
.