...

View Full Version : auto calculation in any event



Jodarecode
03-12-2009, 06:31 PM
The test sample below shows my attempt at getting the calculation script down tho in some cases as in deleting the number or entering a non number it will show "NaN". is there any way to auto calculate the script so it will update itself on any event? and resort back to 0 if NaN updating the total?


<html>
<head>
<title>
</title>

<style type='text/css'>
body {
height:100%;
margin:0;
padding:0;
}

#overlay1 {
position:fixed;
left:0px;
top:0px;
width:100%;
height:100%;
background-repeat: repeat;
}

#overlay1 div {
width:668px;
margin: 100px auto;
background-color: transparent;
border:0px ridge #000000;
padding:15px;
text-align:center;
}

.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>

<!-- ******************************* Calculation \/\/***-->

<script language="javascript">

function overlay1() {
el = document.getElementById("overlay1");
el.style.display = (el.style.display == "block") ? "none" : "block";
}

function $i(e){
return document.getElementById(e);
}

function enter(i) {
$i('textbox_r'+i+'_c3').value = $i('tx1').value;
$i('textbox_r'+i+'_c7').value = price.value;
overlay1();
return true;
Calc('add');
}

function tst(i) {
$i("ok").setAttribute ("onclick", "enter("+i+");Calc('add');");
$i("a1_3[1]").focus();
$i("a1_3[1]").value=$i("price").value="";
}

function clear(i){
for(var j = 0; j <= 9; j++)
$i("textbox_r"+i+"_c"+j).value="";
}

function Calc(className){
var elements = document.getElementsByClassName(className);
var total = 0;

for(var x = 0; x < elements.length; ++x){
total += parseInt(elements[x].value);
}

document.form0.total.value = total;
}

</script>

</head>
<body>
<form enctype="multipart/form-data" name="form0" id="form0" method="POST" action="javascript:void(0)" onSubmit="showValues(this.id)">

<div id="page1" class="page" style="display:block;">
Page 1
<table align="center"><tr><td align="center">
<input type="button" value="1" onclick="overlay1();tst(1);"></td>
<td><input type="text" name="textbox_r1_c1" id="textbox_r1_c1" size="1" value="<?php echo "$_POST[textbox_r1_c1]"; ?>"></td>
<td><input type="text" name="textbox_r1_c2" id="textbox_r1_c2" size="1" value="<?php echo "$_POST[textbox_r1_c2]"; ?>"></td>
<td><input type="text" name="textbox_r1_c3" id="textbox_r1_c3" size="35" value="<?php echo "$_POST[textbox_r1_c3]"; ?>"></td>
<td><input type="text" name="textbox_r1_c4" id="textbox_r1_c4" size="3" value="<?php echo "$_POST[textbox_r1_c4]"; ?>"></td>
<td><input type="text" name="textbox_r1_c5" id="textbox_r1_c5" size="3" value="<?php echo "$_POST[textbox_r1_c5]"; ?>"></td>
<td><input type="text" name="textbox_r1_c6" id="textbox_r1_c6" size="3" value="<?php echo "$_POST[textbox_r1_c6]"; ?>"></td>
<td><input type="text" name="textbox_r1_c7" id="textbox_r1_c7" size="3" value="<?php echo "$_POST[textbox_r1_c7]"; ?>0" class="add" onKeyUp="Calc('add')" onClick="this.focus();this.select();"></td>
<td><input type="text" name="textbox_r1_c8" id="textbox_r1_c8" size="3" value="<?php echo "$_POST[textbox_r1_c8]"; ?>"></td>
<td><input type="text" name="textbox_r1_c9" id="textbox_r1_c9" size="3" value="<?php echo "$_POST[textbox_r1_c9]"; ?>">
</td></tr>
<tr><td align="center">
<input type="button" value="1" onclick="overlay1();tst(2);"></td>
<td><input type="text" name="textbox_r2_c1" id="textbox_r2_c1" size="1" value="<?php echo "$_POST[textbox_r2_c1]"; ?>"></td>
<td><input type="text" name="textbox_r2_c2" id="textbox_r2_c2" size="1" value="<?php echo "$_POST[textbox_r2_c2]"; ?>"></td>
<td><input type="text" name="textbox_r2_c3" id="textbox_r2_c3" size="35" value="<?php echo "$_POST[textbox_r2_c3]"; ?>"></td>
<td><input type="text" name="textbox_r2_c4" id="textbox_r2_c4" size="3" value="<?php echo "$_POST[textbox_r2_c4]"; ?>"></td>
<td><input type="text" name="textbox_r2_c5" id="textbox_r2_c5" size="3" value="<?php echo "$_POST[textbox_r2_c5]"; ?>"></td>
<td><input type="text" name="textbox_r2_c6" id="textbox_r2_c6" size="3" value="<?php echo "$_POST[textbox_r2_c6]"; ?>"></td>
<td><input type="text" name="textbox_r2_c7" id="textbox_r2_c7" size="3" value="<?php echo "$_POST[textbox_r2_c7]"; ?>0" class="add" onKeyUp="Calc('add')" onClick="this.focus();this.select();"></td>
<td><input type="text" name="textbox_r2_c8" id="textbox_r2_c8" size="3" value="<?php echo "$_POST[textbox_r2_c8]"; ?>"></td>
<td><input type="text" name="textbox_r2_c9" id="textbox_r2_c9" size="3" value="<?php echo "$_POST[textbox_r2_c9]"; ?>">
</td></tr>
<tr><td><input type="button" id="C1" value="Continue" onClick="showLayer('page2')"></td></tr>
</table>
</div>

<div id="page2" class="page">
Page 2
<table align="center"><tr><td align="center">
<input type="button" value="1" onclick="overlay1();tst(3);"></td>
<td><input type="text" name="textbox_r3_c1" id="textbox_r3_c1" size="1" value="<?php echo "$_POST[textbox_r3_c1]"; ?>"></td>
<td><input type="text" name="textbox_r3_c2" id="textbox_r3_c2" size="1" value="<?php echo "$_POST[textbox_r3_c2]"; ?>"></td>
<td><input type="text" name="textbox_r3_c3" id="textbox_r3_c3" size="35" value="<?php echo "$_POST[textbox_r3_c3]"; ?>"></td>
<td><input type="text" name="textbox_r3_c4" id="textbox_r3_c4" size="3" value="<?php echo "$_POST[textbox_r3_c4]"; ?>"></td>
<td><input type="text" name="textbox_r3_c5" id="textbox_r3_c5" size="3" value="<?php echo "$_POST[textbox_r3_c5]"; ?>"></td>
<td><input type="text" name="textbox_r3_c6" id="textbox_r3_c6" size="3" value="<?php echo "$_POST[textbox_r3_c6]"; ?>"></td>
<td><input type="text" name="textbox_r3_c7" id="textbox_r3_c7" size="3" value="<?php echo "$_POST[textbox_r3_c7]"; ?>0" class="add" onKeyUp="Calc('add')" onClick="this.focus();this.select();"></td>
<td><input type="text" name="textbox_r3_c8" id="textbox_r3_c8" size="3" value="<?php echo "$_POST[textbox_r3_c8]"; ?>"></td>
<td><input type="text" name="textbox_r3_c9" id="textbox_r3_c9" size="3" value="<?php echo "$_POST[textbox_r3_c9]"; ?>">
</td></tr>
<tr><td align="center">
<input type="button" value="1" onclick="overlay1();tst(4);"></td>
<td><input type="text" name="textbox_r4_c1" id="textbox_r4_c1" size="1" value="<?php echo "$_POST[textbox_r4_c1]"; ?>"></td>
<td><input type="text" name="textbox_r4_c2" id="textbox_r4_c2" size="1" value="<?php echo "$_POST[textbox_r4_c2]"; ?>"></td>
<td><input type="text" name="textbox_r4_c3" id="textbox_r4_c3" size="35" value="<?php echo "$_POST[textbox_r4_c3]"; ?>"></td>
<td><input type="text" name="textbox_r4_c4" id="textbox_r4_c4" size="3" value="<?php echo "$_POST[textbox_r4_c4]"; ?>"></td>
<td><input type="text" name="textbox_r4_c5" id="textbox_r4_c5" size="3" value="<?php echo "$_POST[textbox_r4_c5]"; ?>"></td>
<td><input type="text" name="textbox_r4_c6" id="textbox_r4_c6" size="3" value="<?php echo "$_POST[textbox_r4_c6]"; ?>"></td>
<td><input type="text" name="textbox_r4_c7" id="textbox_r4_c7" size="3" value="<?php echo "$_POST[textbox_r4_c7]"; ?>0" class="add" onKeyUp="Calc('add')" onClick="this.focus();this.select();"></td>
<td><input type="text" name="textbox_r4_c8" id="textbox_r4_c8" size="3" value="<?php echo "$_POST[textbox_r4_c8]"; ?>"></td>
<td><input type="text" name="textbox_r4_c9" id="textbox_r4_c9" size="3" value="<?php echo "$_POST[textbox_r4_c9]"; ?>">
</td></tr>
<tr><td><input type="button" id="B1" value="Go Back" onClick="showLayer('page1')"></td></tr>
<tr><td><input type="submit" value="Submit"></td></tr>
</table>
</div>
<!-- more pages here -->

<div style="display:none;" id="overlay1" name="overlay1">
<table cellspacing='0' cellpadding='0' align='center' valign='top' style='position:fixed;left:0px;top:0px;width:100%;height:100%;background-repeat:repeat;'><tr><td>
<table cellspacing='0' cellpadding='0' align='center' style='border: 1px solid #000000;' bgcolor='#ffffff'><tr><td>
<table cellspacing='0' cellpadding='0' align='center' style='border: 1px solid #2a2a2a;'><tr><td>
<table style='border: 1px solid #555555;' cellspacing='0' cellpadding='5' width='500px' align='center' valign='top'><tr><td align='left' valign='top'>
<table border='0' width='500px'><tr><td colspan='3'><b>Please enter Item<br><hr size='1'><br></td></tr>

<tr>
<td align='right'>
Item:
</td>
<td>
<input size='38' type='text' value='' name='a1_3[1]' id='a1_3[1]' onkeyup='tx1.value = this.value;' onblur='this.focus();tx1.value = this.value;' onfocus='tx1.value = this.value;' onclick='tx1.value = this.value;'>
<input type="hidden" name="tx1" id="tx1">
</td>
<td align='right'>
Price: <input size='10' type='text' name='price' id='price'>
</td>
</tr>

<tr><td align="right" colspan="3">
<input type="button" name="ok" id="ok" value="OK" onClick="">
<input type="button" value="Cancel" onClick="overlay1();">
</td></tr></table>
</td></tr></table>
</td></tr></table>
</td></tr></table>
</td></tr></table>
</div>

<center>Total: <input type="text id="total" name="total"><center>
</form>
</body>
</html>

abduraooft
03-12-2009, 06:35 PM
You could check the value by isNaN() (https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Predefined_Functions/isNaN_Function) before using it.

Jodarecode
03-13-2009, 01:14 AM
I'm not to familiar with javascript so I'm not sure how to implement this

I tried:

function Calcu(className){
var frm = document.form0;
var elements = document.getElementsByClassName(className);
var total = 0;

for(var a = 0; a < elements.length; ++a){

total += (isNaN(parseInt(elements[a].value)));
}

frm.total.value = total;
}

and it works but it wont keep any entered #'s as they just go back to 0. What am I doing wrong?

Old Pedant
03-13-2009, 03:42 AM
Didn't look at all the code, but for the code you showed in last post:



for(var a = 0; a < elements.length; ++a)
{
var val = parseInt(elements[a].value);
if ( ! isNaN(val) ) total += val;
}

You could also FORCE all those NaN elements to display a zero quite simply, if you wish:


for(var a = 0; a < elements.length; ++a)
{
var val = parseInt(elements[a].value);
if ( isNaN(val) ) elements[a].value = "0";
else total += val;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum