Menu
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?
[code=html]<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>