/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Javascript Calcualtion help

Copy linkTweet thisAlerts:
Feb 25.2009

I have 240 rows(r) of 9(c) text boxes each, I use JavaScript to store 30 rows as a page variable to keep loading time down.

The textboxes I need calculated consists of one of the 9 textbox per row (c7)

textbox_r1_c7 – (thru) – textbox_r240_c7
total =
I want to use onkeyup and make the calculation instantaneous once its entered

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@JodarecodeauthorFeb 25.2009 — Here is an example script if needed:

[code=html]<html>
<head>
<title>JavaScript Calcualtion</title>

<style type="text/css" media="screen">
.page{
display: none;
}
</style>

<script type="text/javascript">
var currentLayer = 'page1';
function showLayer(lyr) {
hideLayer(currentLayer);
document.getElementById(lyr)
.style.display = 'block';
currentLayer = lyr;
}

function hideLayer(lyr) {
document.getElementById(lyr).
style.display = 'none';
}

function showValues(form) {
var values = '';
var len = form.length - 1;
//Leave off Submit Button
for(i=0; i<len; i++) {
if (form[i].id.indexOf("C") != -1 ||
form[i].id.indexOf("B") != -1)
//Skip Continue and Back Buttons
continue;
values += form[i].id;
values += ': ';
values += form[i].value;
values += 'n';
}
alert(values);
}
</script>

</head>
<body>
<form enctype="multipart/form-data" name="form0" method="POST" action="javascript:void(0)" onSubmit="showValues(this)">
<br><br><br><br><br>
<table align="center">
<tr>
<td>
<div id="page1" class="page" style="display: block;">
<p>Page 1</p>
1: <input type="text" name="textbox_r1_c7" id="textbox_r1_c7" size="3" value="0"><br>
2: <input type="text" name="textbox_r2_c7" id="textbox_r2_c7" size="3" value="0"><br>
3: <input type="text" name="textbox_r3_c7" id="textbox_r3_c7" size="3" value="0"><br>
4: <input type="text" name="textbox_r4_c7" id="textbox_r4_c7" size="3" value="0"><br>
5: <input type="text" name="textbox_r5_c7" id="textbox_r5_c7" size="3" value="0"><br>
<p><input type="button" id="C1" value="Continue" onClick="showLayer('page2')"></p>
</div>

<div id="page2" class="page">
<p>Page 2</p>
6: <input type="text" name="textbox_r6_c7" id="textbox_r6_c7" size="3" value="0"><br>
7: <input type="text" name="textbox_r7_c7" id="textbox_r7_c7" size="3" value="0"><br>
8: <input type="text" name="textbox_r8_c7" id="textbox_r8_c7" size="3" value="0"><br>
9: <input type="text" name="textbox_r9_c7" id="textbox_r9_c7" size="3" value="0"><br>
10: <input type="text" name="textbox_r10_c7" id="textbox_r10_c7" size="3" value="0"><br>
<p><input type="button" id="B1" value="Go Back" onClick="showLayer('page1')"><input type="submit" value="Submit"></p>
</div>
</td>
</tr>
<tr>
<td>
Total: <input type="text id="total" name="total">
</td>
</tr>
</table>

</body>
</html>[/code]
Copy linkTweet thisAlerts:
@JodarecodeauthorFeb 25.2009 — I know I could add up each one by calling all the id's and adding a + between them but not for 240 textboxes

Should I use some kind of iteration for only values that are not 0 to calculate the total?

How would I implement this, can someone give me a walk through?

'textbox_r'+i'+_c7'
Copy linkTweet thisAlerts:
@JodarecodeauthorFeb 25.2009 — this is what I came up with but as usual I get confused with arrays:

Any Ideas?

[CODE] function Calc(){
var frm = document.form0;
var total=0;

if (!frm.ary) frm.ary=[frm.textbox_r1_c7];
for (var xyz=0;xyz<frm.ary.length;xyz++){
if (frm.ary[xyz].value.length>0&&!isNaN(frm.ary[xyz].value)) total+=frm.ary[xyz].value*1;
}
frm.suba1.value=total;
}[/CODE]
Copy linkTweet thisAlerts:
@JodarecodeauthorFeb 25.2009 — HAHA Solved my own post.....

[code=html]<html>
<head>
<title>JavaScript Calcualtion</title>

<style type="text/css" media="screen">
.page{
display: none;
}
</style>

<script type="text/javascript">
var currentLayer = 'page1';
function showLayer(lyr) {
hideLayer(currentLayer);
document.getElementById(lyr)
.style.display = 'block';
currentLayer = lyr;
}

function hideLayer(lyr) {
document.getElementById(lyr).
style.display = 'none';
}

function showValues(form) {
var values = '';
var len = form.length - 1;
//Leave off Submit Button
for(i=0; i<len; i++) {
if (form[i].id.indexOf("C") != -1 ||
form[i].id.indexOf("B") != -1)
//Skip Continue and Back Buttons
continue;
values += form[i].id;
values += ': ';
values += form[i].value;
values += 'n';
}
alert(values);
}

function Calc(x) {
var theForm = x.form;
var total = 0;
//var available = parseInt(theForm.Available.value); // assuming you do not need to update that
for (var i=0;i<theForm.elements.length;i++) {
if (theForm.elements[i].name=='textbox_r[]_c7') {
var val = parseInt(theForm.elements[i].value,10);
total+=(isNaN(val))?0:val;
}
}
theForm.totalmins.value = total;
//theForm.totalqa.value = available-total;

}

window.onload=function() { // handle retuning to this page
var mins = document.forms[0].elements['textbox_r[]_c7']; // assuming the FIRST [0] form
if (mins.length) Calc(mins[0]);
else Calc(mins);
}

</script>

</head>
<body>
<form enctype="multipart/form-data" name="form0" id="form0" method="POST" action="javascript:void(0)" onSubmit="showValues(this)">
<br><br><br><br><br>
<table align="center" id="table1">
<tr>
<td>
<div id="page1" class="page" style="display: block;">
<p>Page 1</p>
1: <input type="text" name="textbox_r[]_c7" id="textbox_r[]_c7" size="3" value="0" onKeyUp="Calc(this)"><br>
2: <input type="text" name="textbox_r[]_c7" id="textbox_r[]_c7" size="3" value="0" onKeyUp="Calc(this)"><br>
3: <input type="text" name="textbox_r[]_c7" id="textbox_r[]_c7" size="3" value="0" onKeyUp="Calc(this)"><br>
4: <input type="text" name="textbox_r[]_c7" id="textbox_r[]_c7" size="3" value="0" onKeyUp="Calc(this)"><br>
5: <input type="text" name="textbox_r[]_c7" id="textbox_r[]_c7" size="3" value="0" onKeyUp="Calc(this)"><br>
<p><input type="button" id="C1" value="Continue" onClick="showLayer('page2')"></p>
</div>

<div id="page2" class="page">
<p>Page 2</p>
6: <input type="text" name="textbox_r[]_c7" id="textbox_r[]_c7" size="3" value="0" onKeyUp="Calc(this)"><br>
7: <input type="text" name="textbox_r[]_c7" id="textbox_r[]_c7" size="3" value="0" onKeyUp="Calc(this)"><br>
8: <input type="text" name="textbox_r[]_c7" id="textbox_r[]_c7" size="3" value="0" onKeyUp="Calc(this)"><br>
9: <input type="text" name="textbox_r[]_c7" id="textbox_r[]_c7" size="3" value="0" onKeyUp="Calc(this)"><br>
10: <input type="text" name="textbox_r[]_c7" id="textbox_r[]_c7" size="3" value="0" onKeyUp="Calc(this)"><br>
<p><input type="button" id="C1" value="Continue" onClick="showLayer('page3')"><input type="button" id="B1" value="Go Back" onClick="showLayer('page1')"></p>
</div>

<div id="page3" class="page">
<p>Page 3</p>
11: <input type="text" name="textbox_r[]_c7" id="textbox_r[]_c7" size="3" value="0" onKeyUp="Calc(this)"><br>
12: <input type="text" name="textbox_r[]_c7" id="textbox_r[]_c7" size="3" value="0" onKeyUp="Calc(this)"><br>
13: <input type="text" name="textbox_r[]_c7" id="textbox_r[]_c7" size="3" value="0" onKeyUp="Calc(this)"><br>
14: <input type="text" name="textbox_r[]_c7" id="textbox_r[]_c7" size="3" value="0" onKeyUp="Calc(this)"><br>
15: <input type="text" name="textbox_r[]_c7" id="textbox_r[]_c7" size="3" value="0" onKeyUp="Calc(this)"><br>
<p><input type="button" id="C1" value="Continue" onClick="showLayer('page4')"><input type="button" id="B1" value="Go Back" onClick="showLayer('page2')"></p>
</div>

<div id="page4" class="page">
<p>Page 4</p>
16: <input type="text" name="textbox_r[]_c7" id="textbox_r[]_c7" size="3" value="0" onKeyUp="Calc(this)"><br>
17: <input type="text" name="textbox_r[]_c7" id="textbox_r[]_c7" size="3" value="0" onKeyUp="Calc(this)"><br>
18: <input type="text" name="textbox_r[]_c7" id="textbox_r[]_c7" size="3" value="0" onKeyUp="Calc(this)"><br>
19: <input type="text" name="textbox_r[]_c7" id="textbox_r[]_c7" size="3" value="0" onKeyUp="Calc(this)"><br>
20: <input type="text" name="textbox_r[]_c7" id="textbox_r[]_c7" size="3" value="0" onKeyUp="Calc(this)"><br>
<p><input type="button" id="B1" value="Go Back" onClick="showLayer('page3')"><input type="submit" value="Submit"></p>
</div>
</td>
</tr>
<tr>
<td>
Total: <input type="text id="totalmins" name="totalmins">
</td>
</tr>
</table>
</form>
</body>
</html>[/code]

I hope it will at least help someone
×

Success!

Help @Jodarecode spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...