<INPUT
TYPE="radio"
NAME="radioName"
VALUE="buttonValue"
[CHECKED]
[onBlur="handlerText"]
[onClick="handlerText"]
[onFocus="handlerText"]>
textToDisplay
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.
propertyName is one of the properties listed below.
methodName is one of the methods listed below.
A Radio object on a form looks as follows:
A Radio object is a form element and must be defined within a <FORM> tag.
The Radio object has the following properties:
The Radio object has the following methods:
<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
<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
Math.random()
//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
referrer is a read-only property.
function getReferrer() {
return document.referrer
}
navigator.plugins.refresh([true|false])
plugins array
The following code refreshes arrays and reloads open documents containing embedded objects:
navigator.plugins.refresh(true)
Method. Forces a reload of the window's current document.
location.reload([true])
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.
<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>
Method. Loads the specified URL over the current history entry.
location.replace("URL")
URL specifies the URL to load.
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.
<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.
<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
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"]>
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.
propertyName is one of the properties listed below.
methodName is one of the methods listed below.
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 object has the following properties:
| Property | Description |
|---|---|
| form property |
Specifies the form containing the Reset object
|
| name |
Reflects the NAME attribute |
| type |
Reflects the TYPE attribute |
| value |
Reflects the VALUE attribute |
The Reset object has the following methods:
<B>State: </B><INPUT TYPE="text" NAME="state" VALUE="CA" SIZE="2">
<P><INPUT TYPE="reset" VALUE="Clear Form">
<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
arrayName.reverse()
arrayName is the name of an Array object or a property of an existing object.
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:
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.
//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))