Web Development: Unraveling HTML, CSS, and JavaScript/

...

/

Using Buttons

Using Buttons

In this lesson, we'll cover the usage of buttons in HTML forms. Let's begin!

We'll cover the following...

In the previous form examples, you only used one kind of button, the submit button, which was represented by an <input> tag with type set to “submit”. You have other options to use buttons in your forms, here you will review them.

In the Exercise folder, you’ll find a project that includes a number of HTML files.

When you work with forms, you do not have to send the form back to the server, you may run a JavaScript function to respond to the event when the user submits the form.

The Listing below demonstrates this; it shows that every time the user clicks the submit button, the changeBy() JavaScript method is called with “1” passed as the function argument.

Listing: Using the changeBy() JavaScript method

function changeBy(byVal) {
  var range = document.getElementById('noMachines');
  var newVal = parseInt(range.value) + byVal;
  if (newVal < range.min) newVal = range.min;
  if (newVal > range.max) newVal = range.max;
  range.value = newVal;
}
...