JavaScript® 24-Hour Trainer

Chapter 27. Scripting Buttons

Probably the most common form control is the button. Even though you can submit a form by calling its submit() method (and thus without using a submit button), most forms have a button because of the relationship between a form and its controls.

Button controls can be created in one of two ways. You can use the <input/> element, like this:

<input type="submit" name="myButton" value="Button Text" />

Or you can use the <button/> element, like this:

<button type="submit" name="myButton2" value="Button Text"/>

Regardless of how you create a button, you can directly access its DOM object in one of two ways. First, you can get to the button through the form. The following code shows how to access the <input/> element named myButton (from the top of the page), assuming it's in a form named theForm:

var button = document.theForm.myButton;

Form control objects are automatically added as properties to the forms they reside in. So this code first gets the <form name="theForm" /> element object and then gets the myButton property. The second way to get to the button through the form is the ever-easy document.getElementById() method, but in the case of the myButton button, getElementById() will not work because it has no id attribute.

After you have access to the DOM object, you can manipulate it however you see fit. For example, the following code sets a click event handler (using the event utility) to modify the button every time it's clicked:

var count = 0; var button ...