Button Object

Topic

How to change button values using javascript?
or
What are the events, properties, functions, associated with form button?

Explanation

Basics of HTML form button
Button Object :
Button is one of the most commonly used form types. The following syntax will get the button object in javascript
Syntax: document.formname.buttonname

Example:


<form name=buttonform>
<input name=button1 value=test type=button>
</form>
<script language="javascript">
var buttonobject= document.buttonform.button1;
</script>

Here are the events, dom properties and method associated with button element.
Event Handlers: Associated with Form Button:
All the example below use a javascript function output


<script language=javascript>
function output()
{
alert("testing button events");
}
</script>
Event Handler Description Example
onMouseOver This is invoked when a mouse is moved over the button <input type=button onMouseOver="output()">
Result :
onMouseOut This is invoked when a mouse is moved over and then out of the button <input type=button onMouseOut="output()">
Result :
onMouseDown This is invoked when a mouse is pressed down on the button <input type=button onMouseDown="output()">
Result :
onMouseUp This is invoked when a mouse is pressed down on the button and released<input type=button onMouseUp="output()">
Result :
onClick "onClick" function is invoked when a mouse click is done on the button <input type=button onClick="output()">
Result :
onBlur Executes some code when the button loses focus using tab <input type=button onBlur="output()">
Result :
onFocus Executes some code when the button gets focus using tab <input type=button onFocus="output()">
Result :

DOM Properties:
The following are the list of DOM (Dynamic Object Model) properties that can be used to get and alter button properties in javascript.
The below examples are based on the form
<form name=testb>
<input name=myb type=button value=xxx>
</form>
DOM Property Description Example
name Used to get button's name To Get:
var ss = document.testb.myb.name;
type Used to get form type To Get:
var ss = document.testb.myb.type;
value Used to set or get button's value To Get:
var ss = document.testb.myb.value;
To Set::
document.testb.myb.value = "testy";
disabled Used to disable or enable a button. By setting this property as true we can disable. To Disable:
document.testb.myb.disabled = true;
To Enable::
document.testb.myb.disabled = false;

DOM Methods:
The following are the list of DOM (Dynamic Object Model) methods that can be used to do dynamic changes like button click using javascript.
DOM Method Description Example
click() Used to dynamically make a button click To Click:
document.testb.myb.click();
blur() Used to dynamically make the button blur To Blur:
document.testb.myb.blur();
focus() Used to dynamically get focus on the button To Focus:
document.testb.myb.focus();

Example:

Change Button value on mouse over
<script language=javascript>
function bevent()
{
var xx = document.xx.btest;
xx.value= "testing button event";
}
</script>
<form name=xx>
<input type=button name=btest value=test onMouseOver="bevent()">
</form>

Result: