I'm trying to write a script that dynamically calculates a total from 4 inputs that are editable by the user.
I'm having some trouble when I use parseFloat on my input values. They return as NaN.
So far, I've tried using parseInt instead of parseFloat, used .val() instead of .value, using name attributes instead of id attributes, and a couple of other things, that I can't remember off hand.
I haven't seen any other answers to similar questions, that have worked for me yet, so if you wouldn't mind taking a look at my code to see where I might've gone wrong, I'd appreciate it. Thanks!
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Calc</title>
<style>
</style>
</head>
<body>
<table width = "250" border="1">
<tr>
<th align="left">A</th>
<th align="left">B</th>
</tr>
<tr>
<td>Rent</td>
<td id="rent" align="right">
<input type="text" size="7" value="0" onchange="calc()"></td>
</tr>
<tr>
<td>Food</td>
<td id="food" align="right">
<input type="text" size="7" value="0" onchange="calc()"></td>
</tr>
<tr>
<td>Entertainment</td>
<td id="ent" align="right">
<input type="text" size="7" value="0" onchange="calc()"></td>
</tr>
<tr>
<td>Transportation</td>
<td id="trans" align="right">
<input type="text" size="7" value="0" onchange="calc()"></td>
</tr>
<tr>
<th align="left">Total</th>
<td id="total" align="right"></td>
</tr>
</table>
<script>
function calc() {
var w = parseFloat(document.getElementById("rent").value);
var x = parseFloat(document.getElementById("food").value);
var y = parseFloat(document.getElementById("ent").value);
var z = parseFloat(document.getElementById("trans").value);
document.getElementById("total").innerHTML=w+x+y+z;
}
</script>
</body>
</html>
You were giving your cells (<td> tags) id attributes, rather than your actual input fields.
Moving the id attributes to the input elements solves the issue.
In addition, since your are going to call the calc function repeatedly, it would make more sense to just scan the document once to get the references to the elements you are going to want to use over and over.
Lastly, it's best not to hook your HTML elements up to the JavaScript functions that should fire when an event happens in the HTML itself. You can see in my code snippet how I've removed that from the HTML and put it into the JavaScript.
// Wait until the DOM is fully loaded
window.addEventListener("DOMContentLoaded", function(){
// Declare and initialze variable references to needed elements:
var wElement = document.getElementById("rent");
var xElement = document.getElementById("food");
var yElement = document.getElementById("ent");
var zElement = document.getElementById("trans");
// Wire elements to event handlers:
wElement.addEventListener("change", calc);
xElement.addEventListener("change", calc);
yElement.addEventListener("change", calc);
zElement.addEventListener("change", calc);
// Event handler:
function calc() {
var w = parseFloat(wElement.value);
var x = parseFloat(xElement.value);
var y = parseFloat(yElement.value);
var z = parseFloat(zElement.value);
document.getElementById("total").textContent = w + x + y + z;
}
});
<table width = "250" border="1">
<tr>
<th align="left">A</th>
<th align="left">B</th>
</tr>
<tr>
<td>Rent</td>
<td align="right">
<input type="text" id="rent" size="7" value="0"></td>
</tr>
<tr>
<td>Food</td>
<td align="right">
<input type="text" id="food" size="7" value="0"></td>
</tr>
<tr>
<td>Entertainment</td>
<td align="right">
<input type="text" id="ent" size="7" value="0"></td>
</tr>
<tr>
<td>Transportation</td>
<td align="right">
<input type="text" id="trans" size="7" value="0"></td>
</tr>
<tr>
<th align="left">Total</th>
<td id="total" align="right"></td>
</tr>
</table>
You're trying to get the value of td's when you should target the inputs inside those tds, so you could use :
var w = parseFloat(document.querySelector("#rent input").value);
var x = parseFloat(document.querySelector("#food input").value);
var y = parseFloat(document.querySelector("#ent input").value);
var z = parseFloat(document.querySelector("#trans input").value);
Hope this helps.
function calc() {
var w = parseFloat(document.querySelector("#rent input").value);
var x = parseFloat(document.querySelector("#food input").value);
var y = parseFloat(document.querySelector("#ent input").value);
var z = parseFloat(document.querySelector("#trans input").value);
document.getElementById("total").innerHTML=w+x+y+z;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Calc</title>
<style>
</style>
</head>
<body>
<table width = "250" border="1">
<tr>
<th align="left">A</th>
<th align="left">B</th>
</tr>
<tr>
<td>Rent</td>
<td id="rent" align="right">
<input type="text" size="7" value="0" onchange="calc()"></td>
</tr>
<tr>
<td>Food</td>
<td id="food" align="right">
<input type="text" size="7" value="0" onchange="calc()"></td>
</tr>
<tr>
<td>Entertainment</td>
<td id="ent" align="right">
<input type="text" size="7" value="0" onchange="calc()"></td>
</tr>
<tr>
<td>Transportation</td>
<td id="trans" align="right">
<input type="text" size="7" value="0" onchange="calc()"></td>
</tr>
<tr>
<th align="left">Total</th>
<td id="total" align="right"></td>
</tr>
</table>
</body>
</html>
Related
I tried to calculate the total on the table using jquery, but when run totals do not appear. so I want to show the total live when I enter the input value, total auto-summing, what's wrong?
HTML
<table class="table table-condensed">
<thead>
<tr>
<td class="text-left"><strong>Product</strong></td>
<td class="text-center"><strong>Value</strong></td>
</tr>
</thead>
<tbody>
<tr>
<td>Microwave</td>
<td><input type="text" id="product_a" name="producta" value="12.000"></td>
</tr>
<tr>
<td>Microwave</td>
<td><input type="text" id="product_b" name="producta" value="19.000"></td>
</tr>
<tr>
<td>Microwave</td>
<td><input type="text" id="product_c" name="producta" value="15.000"></td>
</tr>
<tr>
<td class="thick-line"><strong>Total</strong></td>
<td class="thick-line"><input type="text" id="total" name="total" /></td>
</tr>
</tbody>
</table>
JS
jQuery(document).ready(function(){
var total = ($('#product_a').val() + $('#product_b').val() + $('#product_c').val()) ;
$('#total').val(total);
});
You're doing it wrong. val() returns a string on an input[type=text] and currently you're just concatenating string values.
I want to show the total live when I enter the input value
Then, you need to add a listener when the inputs are being changed as you type. This could be done with keyup event.
E.g.
$(function() {
var $aProduct = $('#product_a'),
$bProduct = $('#product_b'),
$cProduct = $('#product_c'),
$total = $('#total'),
runTotal = function() {
var a = parseInt($aProduct.val()),
b = parseInt($bProduct.val()),
c = parseInt($cProduct.val());
$total.val(a + b + c);
};
$('.inputVal').on('keyup', runTotal);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-condensed">
<thead>
<tr>
<td class="text-left"><strong>Product</strong>
</td>
<td class="text-center"><strong>Value</strong>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>Microwave</td>
<td>
<input type="text" id="product_a" name="producta" class="inputVal" value="12.000">
</td>
</tr>
<tr>
<td>Microwave</td>
<td>
<input type="text" id="product_b" name="productb" class="inputVal" value="19.000">
</td>
</tr>
<tr>
<td>Microwave</td>
<td>
<input type="text" id="product_c" name="productc" class="inputVal" value="15.000">
</td>
</tr>
<tr>
<td class="thick-line"><strong>Total</strong>
</td>
<td class="thick-line">
<input type="text" id="total" name="total" />
</td>
</tr>
</tbody>
</table>
Hi try following code....
jQuery(document).ready(function(){
$("input").on("change",updateTotal); // this will total on change input.
updateTotal(); //this will total on start..
});
function updateTotal()
{
var total = ($('#product_a').val()*1 + $('#product_b').val()*1 + $('#product_c').val()*1) ;
//By multiplying 1 to any string format number it will convert to number datatype.
//var total = (Number($('#product_a').val()) + Number($('#product_b').val()) + Number($('#product_c').val()));
//You can also uncomment above line to get your desire output.
$('#total').val(total);
}
I am trying to find the position of an input value from a list of input values in a table then display the position. This is after sorting the values from highest to lowest value.
In the example below, I expect the input with value of 10 to be position 2. Similarly, if I would test it with input with value of 45 the position will be 1 and so on.
I have tried the code below but I get a -1 position
<script type="text/javascript">
// Get the values as numbers
var marks = document.getElementsByClassName('sm');
var valArr = Array.prototype.map.call(marks, function(el) {
return parseInt(el.value)
});
// Sort value array in descending order
var marks = valArr.sort(function(a, b) {
return b - a
});
</script>
<table id="tableID" width="200" border="1">
<tr>
<td width="122" class="">
<input name="name" class="sm" id="sm" type="text" value="4" />
</td>
<td width="62" class="pos"></td>
</tr>
<tr>
<td class="">
<input name="name" class="sm" id="sm1" type="text" value="6" />
</td>
<td class="pos1"></td>
</tr>
<tr>
<td class="">
<input name="name" class="sm" id="sm2" type="text" value="10" />
</td>
<td class="pos2">
<script type="text/javascript">
var marksID = document.getElementById('sm2').value;
var mark = parseInt(marksID);
var valPos = marks.indexOf(mark);
document.getElementsByClassName('pos2')[0].textContent = valPos;
</script>
</td>
</tr>
<tr>
<td class="">
<input name="name" class="sm" id="sm3" type="text" value="45" />
</td>
<td class="pos3"></td>
</tr>
<tr>
<td class="">
<input name="name" class="sm" id="sm4" type="text" value="1" />
</td>
<td class="pos4"></td>
</tr>
</table>
You must call your javascript after the page loaded.
Put that code at the end of your body element :
</body>
<script type="text/javascript">
(function() {
var marksID = document.getElementById('sm2').value;
var mark = parseInt(marksID);
var valPos = marks.indexOf(mark);
document.getElementsByClassName('pos2')[0].textContent = valPos;
})();
</script>
I figured out .Using DOMContentLoaded as suggested by Steven P on one of the comments. Here is the demo of what i made. A good way of saying position of numbers in a list after sorting from highest to lowest.
<table id="tableID" width="200" border="1">
<tr>
<td width="122" class=""> <input name="name" class="sm" id="sm" type="text" value="4" /> </td>
<td width="62" class="pos"></td>
</tr>
<tr>
<td class=""> <input name="name" class="sm" id="sm1" type="text" value="6" /> </td>
<td class="pos1"> </td>
</tr>
<tr>
<td class=""> <input name="name" class="sm" id="sm2" type="text" value="10" /> </td>
<td class="pos2">
</td>
</tr>
<tr>
<td class=""> <input name="name" class="sm" id="sm3" type="text" value="6" /> </td>
<td class="pos3">
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
var marksID3 = document.getElementById('sm3').value;
var mark3 = parseInt(marksID3);
//alert (mark3)
var valPos3 = marks.indexOf(mark3);
var valPost3 = parseInt(valPos3 + 1);
document.getElementsByClassName('pos3')[0].textContent = valPost3;
});
</script></td>
</tr>
<tr>
<td class=""> <input name="name" class="sm" id="sm4" type="text" value="45" /> </td>
<td class="pos4">
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
var marksID4 = document.getElementById('sm4').value;
var mark4 = parseInt(marksID4);
//alert (mark4)
var valPos4 = marks.indexOf(mark4);
var valPost4 = parseInt(valPos4 + 1);
document.getElementsByClassName('pos4')[0].textContent = valPost4;
});
</script></td>
</tr>
</table>
<script type="text/javascript">
// Get the values as numbers
var marks = document.getElementsByClassName('sm');
var valArr = Array.prototype.map.call(marks, function(el) {
return parseInt(el.value)
});
// Sort value array in descending order
var marks = valArr.sort(function(a, b) {
return b-a
});
</script>
If there are any other good suggestions or improvements i will highly appreciate
I have the following code which works fine for the first row, but doesn't seem to loop through the table
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<table width="100%" border="0" cellspacing="2" cellpadding="2" id="demotbl">
<tr>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
</tr>
<tr>
<td id="prodref">AA1</td>
<td><input type="text" name="h_prodref" id="h_prodref"></td>
</tr>
<tr>
<td id="prodref">BB1</td>
<td><input type="text" name="h_prodref" id="h_prodref"></td>
</tr>
<tr>
<td id="prodref">CC1</td>
<td><input type="text" name="h_prodref" id="h_prodref"></td>
</tr>
<tr>
<td id="prodref">DD1</td>
<td><input type="text" name="h_prodref" id="h_prodref"></td>
</tr>
<tr>
<td id="prodref">EE1</td>
<td><input type="text" name="h_prodref" id="h_prodre5"></td>
</tr>
<tr>
<td id="prodref">FF1</td>
<td><input type="text" name="h_prodref" id="h_prodref"></td>
</tr>
</table>
<p id="demo"></p>
<script type="text/javascript">
var x = document.getElementById("demotbl").rows.length;
document.getElementById("demo").innerHTML = "Found " + x + " tr elements in the table.";
var prodref = document.getElementById("prodref").innerHTML;
var i = 0;
do {
document.getElementById("h_prodref").value = prodref;
i++;
}
while (i < x);
</script>
</body>
</html>
My understanding (which is very basic) is that the code will look for a id called prodref and then copy the cell value to the text box, and work its way down until it has completed all rows.
As mention above id must be unique. I create the following example using classes instead:
var x = document.getElementById("demotbl").rows.length;;
document.getElementById("demo").innerHTML = "Found " + x + " tr elements in the table.";
var prodref = document.getElementsByClassName("prodref");
var h_prodref = document.getElementsByClassName("h_prodref");
var i = 0;
for (i; i < prodref.length; i++) {
h_prodref[i].value = prodref[i].innerHTML;
}
<table width="100%" border="0" cellspacing="2" cellpadding="2" id="demotbl">
<tr>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
</tr>
<tr>
<td class="prodref">AA1</td>
<td>
<input type="text" name="h_prodref" class="h_prodref">
</td>
</tr>
<tr>
<td class="prodref">BB1</td>
<td>
<input type="text" name="h_prodref" class="h_prodref">
</td>
</tr>
<tr>
<td class="prodref">CC1</td>
<td>
<input type="text" name="h_prodref" class="h_prodref">
</td>
</tr>
<tr>
<td class="prodref">DD1</td>
<td>
<input type="text" name="h_prodref" class="h_prodref">
</td>
</tr>
<tr>
<td class="prodref">EE1</td>
<td>
<input type="text" name="h_prodref" class="h_prodref">
</td>
</tr>
<tr>
<td class="prodref">FF1</td>
<td>
<input type="text" name="h_prodref" class="h_prodref">
</td>
</tr>
</table>
<p id="demo"></p>
Example with your original html that I don't suggest using Document.querySelectorAll():
var x = document.getElementById("demotbl").rows.length;;
document.getElementById("demo").innerHTML = "Found " + x + " tr elements in the table.";
var prodref = document.querySelectorAll("#prodref");
var h_prodref = document.querySelectorAll("#h_prodref");
var i = 0;
for (i; i < prodref.length; i++) {
h_prodref[i].value = prodref[i].innerHTML;
}
<table width="100%" border="0" cellspacing="2" cellpadding="2" id="demotbl">
<tr>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
</tr>
<tr>
<td id="prodref">AA1</td>
<td>
<input type="text" name="h_prodref" id="h_prodref">
</td>
</tr>
<tr>
<td id="prodref">BB1</td>
<td>
<input type="text" name="h_prodref" id="h_prodref">
</td>
</tr>
<tr>
<td id="prodref">CC1</td>
<td>
<input type="text" name="h_prodref" id="h_prodref">
</td>
</tr>
<tr>
<td id="prodref">DD1</td>
<td>
<input type="text" name="h_prodref" id="h_prodref">
</td>
</tr>
<tr>
<td id="prodref">EE1</td>
<td>
<input type="text" name="h_prodref" id="h_prodref">
</td>
</tr>
<tr>
<td id="prodref">FF1</td>
<td>
<input type="text" name="h_prodref" id="h_prodref">
</td>
</tr>
</table>
<p id="demo"></p>
Also you have a typo here:
<tr>
<td id="prodref">EE1</td>
<td><input type="text" name="h_prodref" id="h_prodre5"></td>
</tr>
id is h_prodref no h_prodre5.
Here you go.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<table width="100%" border="0" cellspacing="2" cellpadding="2" id="demotbl">
<tr>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
</tr>
<tr>
<td id="prodref1">AA1</td>
<td><input type="text" name="h_prodref" id="h_prodref1"></td>
</tr>
<tr>
<td id="prodref2">BB1</td>
<td><input type="text" name="h_prodref" id="h_prodref2"></td>
</tr>
<tr>
<td id="prodref3">CC1</td>
<td><input type="text" name="h_prodref" id="h_prodref3"></td>
</tr>
<tr>
<td id="prodref4">DD1</td>
<td><input type="text" name="h_prodref" id="h_prodref4"></td>
</tr>
<tr>
<td id="prodref5">EE1</td>
<td><input type="text" name="h_prodref" id="h_prodref5"></td>
</tr>
<tr>
<td id="prodref6">FF1</td>
<td><input type="text" name="h_prodref" id="h_prodref6"></td>
</tr>
</table>
<p id="demo"></p>
<script type="text/javascript">
var x = document.getElementById("demotbl").rows.length - 1;
document.getElementById("demo").innerHTML = "Found " + x + " tr elements in the table.";
var i = 0;
do {
var prodref = document.getElementById("prodref" + (i + 1)).innerHTML;
document.getElementById("h_prodref" + (i + 1)).value = prodref;
i++;
}
while (i < x);
</script>
</body>
</html>
I not sure that this will be the solution to your problem. I have done something similar in the past. My tip is not to use 'id' when dealing with more than one element but to use 'class' instead. Hope you fix it! :)
You have many elements with the same id. id is always unique to a element. If you are using id's as a way to say apply the same styles to multiple elements you should use a class instead.
In your code the statement:
document.getElementById("prodref")
will always return you the first element matching the id: "prodref". Which is the element:
<td id="prodref">AA1</td>
.getElementById() returns the same element so you are setting the same td in every loop. This will do what you wanted;
var i = 0;
var elements = document.getElementsByTagName("td");
do {
elements[i+1].firstChild.value = elements[i].innerText;
i = i+2;
}
while (i < elements.length);
I have been trying to get this calculator to work in my WordPress blog but haven't been successful at it.
I did get simple Hello world pop-up to work but not this. I want to calculate the "BPodds". Can you guys tell me what's wrong with this?
function calcStake() {
var BWodds = document.getElementById('BWodds').value;
var div = document.getElementById('div').value;
var BPodds = ((BWodds - 1) / div) + 1;
document.getElementById('BPodds').innerHTML = BPodds;
}
<table class="table" border="0" width="500" cellspacing="1" cellpadding="3">
<tbody>
<tr class="calcheading">
<td colspan="3"><strong>Each Way Lay Calculator</strong>
</td>
</tr>
<tr class="calchead">
<td align="center">Bookmaker Win odds:</td>
<td align="center">Place divider:</td>
<td align="center">Bookmaker Place odds:</td>
</tr>
<tr class="calcrow">
<td align="center">
<input id="BWodds" type="text" value="10" onchange="calcStake()" />
</td>
<td align="center">
<input id="div" type="text" value="4" onchange="calcStake()" />
</td>
<td align="center">
<input id="BPodds" />
</td>
</tr>
</tbody>
</table>
You should use value instead of innerHtml:
document.getElementById('BPodds').value = BPodds;
Here is the fiddle: http://jsfiddle.net/o5ze12mf/
The problem is not with Wordpress,
You are trying to put the result in INPUT with innerHTML but to change the value of INPUT you need to use .value
You code will be like this :
<script type="text/javascript">
function calcStake() {
var BWodds = document.getElementById('BWodds').value;
var div = document.getElementById('div').value;
var BPodds = ((BWodds - 1) / div) + 1;
document.getElementById('BPodds').value = BPodds;
}
</script>
<table class="table" border="0" width="500" cellspacing="1" cellpadding="3">
<tbody>
<tr class="calcheading">
<td colspan="3"><strong>Each Way Lay Calculator</strong></td>
</tr>
<tr class="calchead">
<td align="center">Bookmaker Win odds:</td>
<td align="center">Place divider:</td>
<td align="center">Bookmaker Place odds:</td>
</tr>
<tr class="calcrow">
<td align="center">
<input id="BWodds" type="text" value="10" onchange="calcStake()" />
</td>
<td align="center">
<input id="div" type="text" value="4" onchange="calcStake()" />
</td>
<td align="center">
<input id="BPodds" />
</td>
</tr>
</tbody>
</table>
I just changed
document.getElementById('BPodds').innerHTML = BPodds;
to
document.getElementById('BPodds').value = BPodds;
I have used this website a lot for research etc and find it extremely useful.
I have been developing a little bit of code that will get a list of input id names and then add there values together using javascript/jquery.
This is what I have so far - it might be well off the mark as I am still a novice.
So far the code gets the names of the inputs fine. It also does the calculation fine but when I put the array into the "var fieldnames" the calculation stops working?
When I copy the array out (after putting it into an input) and pasting it into the "var fieldnames" it works fine.
The issue seems to be that the array doesnt pass over to the "var fieldnames" correctly??
Here is the code from the page - it puts the array into the inputs at the bottom for investigation purposes only but the calculation doesnt work unless you put the input names in manually!
Any help would be much appreciated.
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head><body>
<script type="text/javascript" language="javascript">
function getTotal(oForm)
{
var arrayOfIDs = $('.myClass').map(function() { return this.id; }).get();
var test = (arrayOfIDs.length ? "'" + arrayOfIDs.join("','") + "'" : "");
document.getElementById("sum").value = test;
var field, i = 0, total = 0, els = oForm.elements;
var fieldnames = [test];
document.getElementById("sum1").value = fieldnames;
for (i; i < fieldnames.length; ++i)
{
field = els[fieldnames[i]];
if (field.value != '' && isNaN(field.value))
{
alert('Please enter a valid number here.')
field.focus();
field.select();
return '';
}
else total += Number(field.value);
}
return ' ' + total;
}
</script>
<div id="listing">
<form>
<table>
<td>8065020</td>
<td>2012-04-10</td>
<td>household</td>
<td><input class="myClass" id="pay47" type="text" name="pay47" value="38.45"/></td>
</tr>
<tr>
<td>8065021</td>
<td>2012-04-10</td>
<td>household</td>
<td><input class="myClass" id="pay48" type="text" name="pay48" value="37.4"/></td>
</tr>
<tr>
<td>8065022</td>
<td>2012-04-10</td>
<td>household</td>
<td><input class="myClass" id="pay49" type="text" name="pay49" value="375"/></td>
</tr>
<tr>
<td>8065014</td>
<td>2012-04-04</td>
<td>household</td>
<td><input type="text" class="myClass" id="pay50" name="pay50" value="06"/></td>
</tr>
<tr>
<td>8065015</td>
<td>2012-04-04</td>
<td>motorprotect</td>
<td><input type="text" class="myClass" id="pay51" name="pay51" value="01"/></td>
</tr>
<tr>
<td>8065011</td>
<td>2012-03-06</td>
<td>household</td>
<td><input type="text" class="myClass" id="pay52" name="pay52" value="55"/></td>
</tr>
<tr>
<td>8065012</td>
<td>2012-03-06</td>
<td>household</td>
<td><input type="text" class="myClass" id="pay53" name="pay53" value="56"/></td>
</tr>
<tr>
<td>1</td>
<td/>
<td>household</td>
<td><input type="text" class="myClass" id="pay54" name="pay54" value="56"/></td>
</tr>
<tr>
<td>2</td>
<td/>
<td>household</td>
<td><input type="text" class="myClass" id="pay55" name="pay55" value="52"/></td>
</tr>
<tr>
<td>3</td>
<td/>
<td>household</td>
<td><input type="text" class="myClass" id="pay56" name="pay56" value="53"/></td>
</tr>
<tr>
<td>4</td>
<td/>
<td>household</td>
<td><input type="text" class="myClass" id="pay57" name="pay57" value="55"/></td>
</tr>
<tr>
<td>8065001</td>
<td/>
<td>landlord</td>
<td><input type="text" class="myClass" id="pay58" name="pay58" value="5"/></td>
</tr>
<tr>
<td>8065002</td>
<td/>
<td>landlord-basic</td>
<td><input type="text" class="myClass" id="pay59" name="pay59" value="59"/></td>
</tr>
<tr>
<td>8065003</td>
<td/>
<td>household</td>
<td><input type="text" class="myClass" id="pay60" name="pay60" value="5"/></td>
</tr>
<tr>
<td>8065004</td>
<td/>
<td>household</td>
<td><input type="text" class="myClass" id="pay61" name="pay61" value="5"/></td>
</tr>
<tr>
<td>8065005</td>
<td/>
<td>household</td>
<td><input type="text" class="myClass" id="pay62" name="pay62" value="5"/></td>
</tr>
<tr>
<td>8065006</td>
<td/>
<td>landlord-basic</td>
<td><input type="text" class="myClass" id="pay63" name="pay63" value="64"/></td>
</tr>
<tr>
<td>8065008</td>
<td/>
<td>household</td>
<td><input type="text" class="myClass" id="pay64" name="pay64" value="5" /></td>
</tr>
<tr>
<td>8065010</td>
<td/>
<td>business-basic</td>
<td><input type="text" class="myClass" id="pay65" name="pay65" value="10" /></td>
</tr>
</table>
<input id="total" type="text" name="total" value="" readonly="readonly" />
<input type="button" value="Get Total" onclick="total.value=getTotal(this.form)" />
<br /><br />
<input name="totalpay" id="sum" type="text" />sum<br />
<input name="totalpay" id="sum1" type="text" />sum1
</form>
</div>
</body>
</html>
1- Replace the line
var test = (arrayOfIDs.length ? "'" + arrayOfIDs.join("','") + "'" : "");
By
var test = (arrayOfIDs.length ? arrayOfIDs.join(",") : "");
2- Replace
var fieldnames = [test];
By
var fieldnames = test.split(",");
3- Replace
field = els[fieldnames[i]];
By
field = document.getElementById(fieldnames[i]);
What i did here is only correct you code to resolve your problem, but i am covinced that you can do this in a more easiest way.
If I understood your question correctly and you just want to add up your values, while provideing basic validity check, your code is way to complicated. Frameworks like jQuery provide you with means to do this much simpler.
Instead of looping through all input elements, getting their id's and then looping through them again, just do it once.
var getTotal (oForm) {
var sum = 0;
// loop through all inputs with class "myClass" inside oForm
$("input.myClass", $(oForm)).each(function (index, value) {
// add up all values that are non empty and numeric
if (value !== "" && !isNaN(value)) {
// parse the value
sum += parseFloat(value, 10);
} else {
// show an alert, focus the input and return early from $.fn.each
alert("Please enter a valid number here!");
$(this).focus();
return false;
}
});
// set the value of
$("sum").val(sum);
}
This was written from the top of my head but should work fine.