Hi,
Is it posible to have 3 text fields, as a value is typed into each field, have a read-only field generate the total sum of the 3 text fields without reloading the form?
If so where would I start?
Thanks
Hi,
Is it posible to have 3 text fields, as a value is typed into each field, have a read-only field generate the total sum of the 3 text fields without reloading the form?
If so where would I start?
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.html">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Compute</title>
<script type="text/javascript">
function num(id) {
var e = document.getElementById(id);
if (e != null) {
var v = e.value;
if (/^\\d+$/.test(v)) {
return parseInt(v, 10);
}
}
return 0;
}
function sum() {
var v1 = num("v1");
var v2 = num("v2");
var v3 = num("v3");
var r = document.getElementById("result");
if (r != null) {
r.value = v1 + v2 + v3;
}
}
function addHandler(element, eventName, handler) {
if (element.addEventListener) {
element.addEventListener(eventName, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + eventName, handler);
}
}
addHandler(window, "load",
function() {
addHandler(document.getElementById("v1"), "keyup", sum);
addHandler(document.getElementById("v2"), "keyup", sum);
addHandler(document.getElementById("v3"), "keyup", sum);
});
</script>
</head>
<body>
<form action="">
<fieldset>
<legend>Input</legend>
<label for="v1">Value 1</label>
<input type="text" id="v1">
<br>
<label for="v2">Value 2</label>
<input type="text" id="v2">
<br>
<label for="v3">Value 3</label>
<input type="text" id="v3">
</fieldset>
<fieldset>
<legend>Output</legend>
<input type="text" id="result" readonly>
</fieldset>
</form>
</body>
</html>
<script type="text/javascript">
function calculate(){
var result = document.getElementById('result');
var el, i = 0, total = 0;
while(el = document.getElementById('v'+(i++)) ) {
el.value = el.value.replace(/\\D/,"");
total = total + Number(el.value);
}
result.value = total;
if(document.getElementById('v0').value =="" && document.getElementById('v1').value =="" && document.getElementById('v2').value =="" ){
result.value ="";
}
}
</script>
Some number:<input type="text" id ="v0" onkeyup="calculate()"><br>
Some number:<input type="text" id ="v1" onkeyup="calculate()"><br>
Some number:<input type="text" id ="v2" onkeyup="calculate()"><br>
Result: <input type="text" id="result" onkeyup="calculate()" readonly><br>