Buttons

Buttons

Along with text fields, buttons are the primary controls you see in web pages. All you need to do is to click them to make something happen. The properties, methods , and events of all buttons are the same in JavaScript. Here are the various button types:

• Buttons. <BUTTON> , <BUTTON TYPE="BUTTON"> , <INPUT TYPE="BUTTON"> .

• Submit buttons. <INPUT TYPE="SUBMIT"> and <BUTTON TYPE="SUBMIT"> .

• Reset buttons. <INPUT TYPE="RESET"> and <BUTTON TYPE="RESET"> .

You can see the properties, methods, and events of buttons in Table 12.5 in overview, their properties in depth in Table 12.6, their methods in depth in Table 12.7, and their events in Table 12.8. Note that JavaScript's core HTML properties, methods, and events (such as onclick ), as covered in Chapters 5, "Using Core HTML Properties," and 6, "Using Core HTML Methods and Events," also apply to buttons.

Table 12.5. Overview of the Properties, Methods, and Events of the Button Elements (See Chapters 5 and 6 for the JavaScript core HTML properties, methods, and events that also apply to these elements.)

Properties	Methods	Events
defaultValue	click	onafterupdate
form	createTextRange	onbeforeupdate
name	select	onerrorupdate
size
type
value

Table 12.6. The Properties of the Button Elements (See Chapters 5 and 6 for the JavaScript core HTML properties, methods, and events that also apply to these elements.)

Property	NS2	NS3	NS4	NS6	IE3a	IE3b	IE4	IE5	IE5.5	IE6
defaultValue	x	x	x	x	x	x	x	x	x	x
	Read/write
	Holds the default value of the button as a string. This is the caption the button will display if the form is reset.
form	x	x	x	x	x	x	x	x	x	x
	Read-only
	This property holds the form that the button is a member of. Useful if you want to access other controls in the same form.
name	x	x	x	x	x	x	x	x	x	x
	Read/write
	This property holds the name of the button as a string, as set with the NAME attribute. Note that you can change the name of the button in code, because this property is read/write.
size	x	x	x	x	x	x	x	x	x	x
	Read/write
	Sets or retrieves the size of the control, measured in characters .
type		x	x	x	x		x	x	x	x
	Read-only
	This property holds the type of button, as set with the TYPE attribute in an <INPUT> or <BUTTON> element. Holds the string "button" , "submit" ,or "reset" . For an example, see "Using Radio Buttons" in this chapter. As of Internet Explorer 5, the type property is read/write, but only once, when an element is created with the createElement method and before it is added to the document.
value	x	x	x	x	x	x	x	x	x	x
	Read/write
	Holds the caption of the button. This is a read/write property, so you can set it from your code. Set to a string. Note, however, that browsers earlier than Internet Explorer 4.0 and Netscape Navigator do not resize the button for the new caption. See "Resetting Button Captions" in this chapter.

Table 12.7. The Methods of the Button Elements (See Chapters 5 and 6 for the JavaScript core HTML properties, methods, and events that also apply to these elements.)

Method	NS2	NS3	NS4	NS6	IE3a	IE3b	IE4	IE5	IE5.5	IE6
click	x	x	x	x	x	x	x	x	x	x
	Returns: Nothing
	Calling this button method is the same as clicking a button, and it causes the onclick event to occur. See "Clicking a Button from Code" in this chapter.
createTextRange							x	x	x	x
	Returns: TextRange object
	Creates a TextRange object for the button.
	Syntax: createTextRange() . More on TextRange objects in Chapter 11, "Working with HTML Text Elements."
select							x	x	x	x
	Returns: Nothing
	Selects the control.
	Syntax: select() .

Table 12.8. The Events of the Button Elements (See Chapters 5 and 6 for the JavaScript core HTML properties, methods, and events that also apply to these elements.)

Event	NS2	NS3	NS4	NS6	IE3a	IE3b	IE4	IE5	IE5.5	IE6
onafterupdate							x	x	x	x
	Occurs in a data-bound object after updating the data in the data source.
onbeforeupdate							x	x	x	x
	Occurs in a data-bound object before updating the data in the data source.
onerrorupdate							x	x	x	x
	Occurs in a data-bound object when an error happens while updating data in the data source.