...

View Full Version : Need Help Finding a Math Script



vlane95678
09-03-2008, 06:57 PM
This is probably super easy, but we cannot find a cut n paste script. We want to have several text boxes on our page that you can type a number into. When you type in a number it does math and adds all the boxes together for a grand total.

We could also accomplish our goal with say a drop down menu w/ numbers 1-10. When they select say 5 and 3 it adds up the total = 8.

if anyone knows where to find this or what the proper name for a script like this, it would be most appreciated.

Cranford
09-03-2008, 07:08 PM
That's not as "super easy" as you believe. Are you accepting only integer input, real numbers, negative or positve, limiting the number of decimal places...?

Try the following, for integers, using "sliders" instead of allowing the user to input via the keyboard.

Copy it as is, and save as an .html file.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Measurement Sliders with Auto Calculation</title>
<script type="text/javascript">

var maximum = 360; // 360 inches = 30 feet

function insertCommas(isNum){

return isNum.toString().split('').reverse().join('').replace(/(\d{3})/g,'$1,').split('').reverse().join('').replace(/^,/,'');
}

function calcVolume(){

var nForm = document.forms[0];
var squareInches = nForm['nLength'].value * nForm['nWidth'].value;
nForm['volume'].value = (squareInches / 144).toFixed(2);
nForm['totalCost'].value = insertCommas((nForm['volume'].value * nForm['unitPrice'].value).toFixed(2));
}

onload=function(){

var wrapperL = document.getElementById('Lwrapper');
var containerL = document.getElementById('Lcontainer');
var length = document.forms[0]['nLength'];
wrapperL.style.width = Math.floor(maximum*1.1)+'px';
containerL.style.paddingLeft = parseInt(wrapperL.style.width)*10+'px';
containerL.style.paddingRight = parseInt(wrapperL.style.width)*10+'px';
wrapperL.scrollLeft = 0;
wrapperL.onscroll = function(){length.value = Math.round(wrapperL.scrollLeft/20.89);calcVolume()}

var wrapperW = document.getElementById('Wwrapper');
var containerW = document.getElementById('Wcontainer');
var width = document.forms[0]['nWidth'];
wrapperW.style.width = Math.floor(maximum*1.1)+'px';
containerW.style.paddingLeft = parseInt(wrapperW.style.width)*10+'px';
containerW.style.paddingRight = parseInt(wrapperW.style.width)*10+'px';
wrapperW.scrollLeft = 0;
wrapperW.onscroll = function(){width.value = Math.round(wrapperW.scrollLeft/20.89);calcVolume()}

document.forms[0].reset();
}

</script>
</head>
<body>
<form action="">
<table align='center' cellspacing='0' cellpadding='5' border='1' style='font-size:12pt;background-color:honeydew'>
<thead>
<tr>
<th colspan='2' style='background-color:lightblue'>
Cost Estimator
</th>
</tr>
</thead>
<thead>
<tr>
<th>
Select
</th>
<th>
Inches
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div id='Lwrapper' style='overflow:auto;height:40px;margin-bottom:5px'>
<div id='Lcontainer'>
&nbsp;
</div>
</div>
</td>
<td valign='bottom'>
Length:<br>
<input type='text' size='5' id='nLength' value='0' readonly style='text-align:right'>
</td>
</tr>
<tr>
<td>
<div id='Wwrapper' style='overflow:auto;height:40px;margin-bottom:5px'>
<div id='Wcontainer'>
&nbsp;
</div>

</div>
</td>
<td valign='bottom'>
Width:<br>
<input type='text' size='5' id='nWidth' value='0' readonly style='text-align:right'>
</td>
</tr>
<tr>
<td align='right'>
Square Feet:
</td>
<td>
<input type='text' size='5' id='volume' value='0.00' readonly style='text-align:right'>
</td>
</tr>
<tr>
<td align='center'>
Price Per Square Foot:&nbsp;&nbsp; <select name='unitPrice' onchange="calcVolume()">
<option selected value='1.99'>
Good - $1.99
</option>
<option selected value='2.29'>
Better - $2.29
</option>
<option selected value='2.89'>
Best - $2.89
</option>
</select> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Total:
</td>
<td>
$<input type='text' name='totalCost' size='6' value='0.00' readonly style='text-align:right'>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

vlane95678
09-03-2008, 08:52 PM
We are adding real numbers, one digit, no decimal and not dollars.

I think the file you attached will work.

Cranford
09-03-2008, 09:30 PM
Integers are not real numbers. But, good luck to you, just the same.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum