PDA

View Full Version : Adding fields

kathryn
03-05-2003, 08:01 AM
Hi,
I have about 4 text fields on a HTML form which I want to firstly check if data entered in each is numeric if so I wish to add them together and display the result in a fifth field.
Please help,
Thanks Kathryn
glenngv
03-05-2003, 10:11 AM
<html>
<head>
<script>
function addFields(f){
if (isNaN(f.txt1.value)){
alert("Please enter a numeric value in field 1.");
f.txt1.focus();
}
else if (isNaN(f.txt2.value)){
alert("Please enter a numeric value in field 2.");
f.txt2.focus();
}
else if (isNaN(f.txt3.value)){
alert("Please enter a numeric value in field 3.");
f.txt3.focus();
}
else if (isNaN(f.txt4.value)){
alert("Please enter a numeric value in field 4.");
f.txt4.focus();
}
else{
f.sum.value=parseInt(f.txt1.value,10)+parseInt(f.txt2.value,10)+parseInt(f.txt3.value,10)+parseInt(f .txt4.value,10);
}
}
</script>
</head>
<body>
<form>
<input name="txt1"><br>
<input name="txt2"><br>
<input name="txt3"><br>
<input name="txt4"><br>
<input name="sum" readonly><br>
<input type="button" value="Add" onclick="addFields(this.form)">
</form>
</body>
</html>
kathryn
03-05-2003, 10:24 AM
Hi,
Thanks for that but there is a problem
not all the fields must have data only the first so if only the first is filled in NaN appears in the total field.
I tried removing the checks for the other 3 fields but this didn't work?
kathryn
GoHF
03-05-2003, 12:49 PM
If the values are not numbers, it will ignore them.
If all values are not numbers, it will return 0.
---------------------------------------------------------
<html>
<head>
<script>
function addFields(f){
total = 0;
if (f.txt1.value && !isNaN(f.txt1.value))
total += parseInt(f.txt1.value);
if (f.txt2.value && !isNaN(f.txt2.value))
total += parseInt(f.txt2.value);
if (f.txt3.value && !isNaN(f.txt3.value))
total += parseInt(f.txt3.value);
if (f.txt4.value && !isNaN(f.txt4.value))
total += parseInt(f.txt4.value);
f.sum.value=total;
}
</script>
</head>
<body>
<form>
<input name="txt1"><br>
<input name="txt2"><br>
<input name="txt3"><br>
<input name="txt4"><br>
<input name="sum" readonly><br>
<input type="button" value="Add" onclick="addFields(this.form)">
</form>
</body>
</html>
kathryn
03-05-2003, 01:54 PM
Thanks that worked a treat, Kathryn
intenshn
07-13-2003, 11:11 AM
This is exactly what I was looking for, thanks!
I have modified this script to add two fields at a time for my needs, however, I need to be able to mulitply this task.

For example, I have 40 lines in my form, with two fields on each line that need to be added together. How do I do this? I know very little about JS. I appreciate any help at all! :)
cheesebagpipe
07-13-2003, 09:40 PM
Each pair of fields will be summed separately, or all filled-in fields will be added into one sum?
intenshn
07-15-2003, 03:31 AM
Each pair of fields summed separately. Thanks for replying! ;)
cheesebagpipe
07-15-2003, 04:08 AM
Did this in a hurry...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>
<style type="text/css">

td {
font-weight: bold;
}

</style>
<script type="text/javascript" language="javascript">

function getIndex(oElement) {
var el, i = 0, oForm = oElement.form;
while (el = oForm.elements[i])
if (el == oElement)
return i;
else ++i;
return null;
}

function sumPairs(oText) {
if (oText.value == '.')
return true;
if (isNaN(Number(oText.value))) {
alert('Please enter a numeric value here.');
oText.focus();
oText.select();
return false;
}
var oForm = oText.form, idx = getIndex(oText), is_middle_el = (oForm.elements[idx+1].readOnly);
var other_idx = (is_middle_el) ? idx - 1 : idx + 1;
var total_idx = (is_middle_el) ? idx + 1 : idx + 2;
oForm.elements[total_idx].value = Number(oText.value) + Number(oForm.elements[other_idx].value);
return true;
}

</script>
</head>
<body>
<form>
<table>
<tr>
<td>1a__<input type="text" size="4" onkeyup="return sumPairs(this)"></td>
<td>1b__<input type="text" size="4" onkeyup="return sumPairs(this)"></td>
<td>total__<input type="text" size="4" readonly="readonly"></td>
</tr>
<tr>
<td>2a__<input type="text" size="4" onkeyup="return sumPairs(this)"></td>
<td>2b__<input type="text" size="4" onkeyup="return sumPairs(this)"></td>
<td>total__<input type="text" size="4" readonly="readonly"></td>
</tr>
<tr>
<td>3a__<input type="text" size="4" onkeyup="return sumPairs(this)"></td>
<td>4b__<input type="text" size="4" onkeyup="return sumPairs(this)"></td>
<td>total__<input type="text" size="4" readonly="readonly"></td>
</tr>
</table>
</form>
</body>
</html>

No time to test....:D
intenshn
07-15-2003, 07:31 AM
That is so awesome....you are so awesome, thank you!!!!! :p