Javascript Tutorial





Español Français 中文 Deutsch Portuguese Japanese nederlands
   
 
Java-Script Tutorial
Introduction Introduction
Variables Variables
Operators Operators
Statements Statements
Loops Loops
Functions Functions
Objects Objects
Arrays Arrays
Cookies JS Cookies
Browser Objects Browser Objects
Form DOM Form DOM
Style Objects DOM Style Objects
Forums Ask Your Doubts
Scraps More about Javascript
Feedback Feedback
 




Button Object


Tutorials Javascript

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 Code:
<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:





A Note
Javascript (JS) is one of the most used languages in the world. Some times spelled as Java Script. Hope you enjoy this tutorial. Do send your feedback or suggestions on this javascript or java script tutorial. This is a copyright content.

Other Links

web hosting