Controlling Data Entry Using Form Fields
Creating 'Encoded' Name & Value Pairs
Passing data from one form to another
Addressing Form Field Validation with Regular Expressions and JavaScript 1.2
You are here: irt.org | Articles | JavaScript | Form | Chapter 6: Beginning JavaScript [ previous next ]
Published on: Sunday 29th April 2001 By: Paul Wilton
I'm starting our look at form elements with the standard button element, as it's probably the most commonly used and is fairly simple. The HTML tag to create a button is the <INPUT> tag. For example, to create a button called myButton, which has the words Click Me on its face, the <INPUT> tag would need to be:
<INPUT TYPE="button" NAME="myButton" VALUE="Click Me">
The TYPE attribute is set to button and the VALUE attribute is set to the text we want to appear on the face of the button. We can leave the VALUE attribute off, but we'll end up with a blank button, which will leave our users guessing as to its purpose.
This element creates an associated Button object; in this example it is called myButton. This object has all the common properties and methods described above, including the value property. This allows you to change the text on the button face using JavaScript, though this is probably not something you'll need to do very often. What the button is really all about is the onclick event.
We connect to the button's onclick event handler just as we did for the onclick events of other HTML tags such as the <A> tag. All we need do is to define a function that we want to execute when the button is clicked (say, button_onclick()) and then add the onclick event handler as an attribute of the <INPUT> tag:
<INPUT TYPE="button" onclick="button_onclick()">
In the example below we use the methods described above to record how often a button has been clicked on the button face.
<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript>
var numberOfClicks = 0;
function myButton_onclick()
{
numberOfClicks++;
window.document.form1.myButton.value = 'Button clicked ' + numberOfClicks +
' times';
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME=form1>
<INPUT TYPE='button' NAME='myButton' VALUE='Button clicked 0 times'
onclick="myButton_onclick()">
</FORM>
</BODY>
</HTML>Save this page as ch6_examp2.htm. If you load this page into your browser, you will see a button with Button clicked 0 times on it. On repeatedly pressing this button, you will see the number of button clicks recorded on the top of the button.
We start the script block in the head of the page by defining a global variable, accessible anywhere inside our page, called numberOfClicks. We record the number of times the button has been clicked in this variable, and use this information to update the button's text.
The other piece of code in the script block is the definition of the function myButton_onclick(). This function is connected to the onclick event handler in the <INPUT> tag in the body of the page. This tag is for a button element called myButton, and is contained within a form called form1.
<FORM NAME=form1> <INPUT TYPE='button' NAME='myButton' VALUE='Button clicked 0 times' onclick="myButton_onclick()"> </FORM>
Let's look at the myButton_onclick() function a little more closely. First, the function increments the value of the variable numberOfClicks by one.
function myButton_onclick()
{
numberOfClicks++;Next, we update the text on the button face using the Button object's value property.
window.document.form1.myButton.value = 'Button clicked ' + numberOfClicks + ' times'; }
The function is specific to this form and button, rather than a generic function we'll be using in other situations. Therefore I've referred to the form and button directly using window.document.form1.myButton. Remember that the window object has a property containing the document object, which itself holds all the elements in a page, including the <FORM> element, and that the button is embedded inside our form.
Two less commonly used events supported by the Button object in version 4 or higher browsers are the onmousedown and onmouseup events. You can see these two events in action in the next example.
<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript>
function myButton_onmouseup()
{
document.form1.myButton.value = "Mouse Goes Up"
}
function myButton_onmousedown()
{
document.form1.myButton.value = "Mouse Goes Down"
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME=form1>
<INPUT TYPE='button' NAME='myButton' VALUE=' Mouse Goes Up '
onmouseup="myButton_onmouseup()"
onmousedown="myButton_onmousedown()">
</FORM>
</BODY>
</HTML>Save this page as ch6_examp3.htm and load it into your browser. If you click the button with your left mouse button and keep it held down, you'll see the text on the button change to "Mouse Goes Down". As soon as you release the button, the text changes to "Mouse Goes Up".
In the body of the page we define a button called myButton within a form called form1. Within the attributes of the <INPUT> tag, we attach the function myButton_onmouseup() to the onmouseup event handler, and the function myButton_onmousedown() to the onmousedown event handler.
<FORM NAME=form1> <INPUT TYPE='button' NAME='myButton' VALUE=' Mouse Goes Up ' onmouseup="myButton_onmouseup()" onmousedown="myButton_onmousedown()"> </FORM>
The myButton_onmouseup() and myButton_onmousedown() functions are defined in a script block in the head of the page. Each function consists of just a single line of code, in which we use the value property of the Button object to change the text that is displayed on the button's face.
An important point to note is that events like onmouseup and onmousedown only trigger when the mouse pointer is actually over the element in question. For example if you click and keep held down the mouse button over our button, then move the mouse away from the button before releasing the mouse button, you'll find that the onmouseup event does not fire and the text on the button's face does not change. In this instance it would be the document object's onmouseup event handler code that would fire, if we'd connected any code to it.
Don't forget that, like all form element objects, the Button object also has the onfocus and onblur events, though they are rarely used in the context of buttons.
Controlling Data Entry Using Form Fields
Creating 'Encoded' Name & Value Pairs
Passing data from one form to another
Addressing Form Field Validation with Regular Expressions and JavaScript 1.2