Java Reference
In-Depth Information
var completionProgress = document.getElementById("completionProgress");
var speedMeter = document.getElementById("speedMeter");
function countFieldData() {
var count = 0;
for (var index = 0; index < myForm.length; index++) {
var element = myForm[index];
if (element.value) {
count++;
}
}
return count;
}
function formInputChange() {
completionProgress.value = countFieldData();
speedMeter.value = myForm.speed.value;
}
myForm.addEventListener("input", formInputChange);
</script>
</body>
</html>
Save this as
ch11 _ example12.html
. Open the page in your browser (including IE—this example mostly
works in IE9, IE10, and IE11), and you'll see a form with three fields: a driver's name, the driver's speed,
and the type of vehicle the driver drove. As you fill out the form, you'll notice a few things going on.
First, the progress bar below the form changes in value. This indicates your progress in filling out the
form. When all fields have a value, you're done! Second, you'll notice the meter next to the Speed field
updates to visually represent the data from that field.
Now let's look at the HTML. In the body of the page, you define a form with three
<input/>
elements.
The first is a normal text box for the driver's name:
<form id="form1" name="form1">
<p>
<label for="driverName">Driver Name: </label>
<input type="text" id="driverName" name="driverName" />
</p>
The next field is a number field for inputting the driver's speed:
<p>
<label for="speed">Speed (Miles/Hour): </label>
<input type="number" id="speed" name="speed" />
<meter id="speedMeter" value="0" low="55" optimum="75"
high="90" max="120"></meter>
</p>
