1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 11:13 am May 14, 2026

Forum Moderators: open

Message Too Old, No Replies

creating a business calc for users

business calc

         

ChrisVersion2

2:40 pm on Sep 20, 2007 (gmt 0)

10+ Year Member



I recently took a crash course in java scipt and I'm trying to get this thing to work but I'm a systems admin not a web guy so I'm trying to figureout how to get this to work...

any suggestions/ help would be great.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>T</title>

<script type="text/javascript">

<!--
function countvals() {

elem = document.getElementById('mi').value;
elem2= document.getElementById('me').value;
elem3= document.getElementById('tdo').value;
elem4= document.getElementById('mp').value;
elem5= document.getElementById('rent').value;
elem6= document.getElementById('utils').value;
elem7= document.getElementById('car').value;
elem8= document.getElementById('ins').value;
elem9= document.getElementById('persc').value;
elem10= document.getElementById('food').value;
elem11= document.getElementById('child').value;
elem12= document.getElementById('pass').value;
elem13= document.getElementById('down').value;
elem14= document.getElementById('netd').value;
elem15= document.getElementById('mth6').value;
elem16= document.getElementById('mth12').value;
elem17= document.getElementById('mth18').value;
elem18= document.getElementById('mth24').value;
elem19= document.getElementById('set50').value;
elem20= document.getElementById('set75').value;
elem21= document.getElementById('set80').value;
elem22= document.getElementById('set85').value;

if (IsNumeric(elem5) && IsNumeric(elem6) && IsNumeric(elem7) && IsNumeric(elem8) && IsNumeric(elem9) && IsNumeric(elem10) && IsNumeric(elem11)) {
document.getElementById('me').innerHTML ='';
document.getElementById('me').innerHTML = elem5+elem6+elem7+elem8+elem9+elem10+elem11;
}

if (IsNumeric(elem) && IsNumeric(elem2)) {
document.getElementById('net').innerHTML ='';
document.getElementById('net').innerHTML = elem-elem2;
}

if (IsNumeric(elem12) && IsNumeric(elem13) && IsNumeric(elem3)) {
document.getElementById('netd').innerHTML ='';
document.getElementById('netd').innerHTML = elem3-(elem12+elem13);
}

if (IsNumeric(elem14)) {
document.getElementById('mth6').innerHTML ='';
document.getElementById('mth6').innerHTML = elem14/6;
}

if (IsNumeric(elem14)) {
document.getElementById('mth12').innerHTML ='';
document.getElementById('mth12').innerHTML = elem14/12;
}

if (IsNumeric(elem14)) {
document.getElementById('mth18').innerHTML ='';
document.getElementById('mth18').innerHTML = elem14/18;
}

if (IsNumeric(elem14)) {
document.getElementById('mth24').innerHTML ='';
document.getElementById('mth24').innerHTML = elem14/24;
}

if (IsNumeric(elem14)) {
document.getElementById('set50').innerHTML ='';
document.getElementById('set50').innerHTML = elem14*.5;
}

if (IsNumeric(elem14)) {
document.getElementById('set75').innerHTML ='';
document.getElementById('set75').innerHTML = elem14*.75;
}

if (IsNumeric(elem14)) {
document.getElementById('set80').innerHTML ='';
document.getElementById('set80').innerHTML = elem14*.8;
}

if (IsNumeric(elem14)) {
document.getElementById('set85').innerHTML ='';
document.getElementById('set85').innerHTML = elem14*.85;
}

function IsNumeric(sText) {
var ValidChars = "0123456789.";
var IsNumber=true;
var Char;


for (i = 0; i < sText.length && IsNumber == true; i++)
{
Char = sText.charAt(i);
if (ValidChars.indexOf(Char) == -1)
{
IsNumber = false;
}
}
return IsNumber;

}

//-->
</script>

</head>
<body onload="countvals();">
<form action="" method="get">
<table>
<tr>
<td>Total debts owed</td><td><input type="text" value="" id="tdo" name="tdo" /></td>
</tr>
<tr>
<td>Monthly income</td><td><input onchange="countvals();" type="text" value="" id="mi" name="mi" /></td>
</tr>
<tr>
<td>- Rent/ Mortgage</td><td><input onchange="countvals();" type="text" value="" id="rent" name="rent" /></td>
</tr>
<tr>
<td>- Utilities</td><td><input onchange="countvals();" type="text" value="" id="utils" name="utils" /></td>
</tr>
<tr>
<td>- Car Payment</td><td><input onchange="countvals();" type="text" value="" id="car" name="car" /></td>
</tr>
<tr>
<td>- Insurance Payments</td><td><input onchange="countvals();" type="text" value="" id="ins" name="ins" /></td>
</tr>
<tr>
<td>- Prescriptions</td><td><input onchange="countvals();" type="text" value="" id="persc" name="persc" /></td>
</tr>
<tr>
<td>- Food</td><td><input onchange="countvals();" type="text" value="" id="food" name="food" /></td>
</tr>
<tr>
<td>- Child Support</td><td><input onchange="countvals();" type="text" value="" id="child" name="child" /></td>
</tr>
<tr>
<td>Total Expenses</td><td id="me"></td>
</tr>
<tr>
<td>Net</td><td id="net"></td>
</tr>
<tr>
<td>Pass Due</td><td><input onchange="countvals();" type="text" value="" id="pass" name="pass" /></td>
</tr>
<tr>
<td>Down Payment</td><td><input onchange="countvals();" type="text" value="" id="down" name="down" /></td>
</tr>
<tr>
<td>Net Debt</td><td><input onchange="countvals();" type="text" value="" id="netd" name="netd" /></td>
</tr>
<tr>
<td>6 Month payoff</td><td><input onchange="countvals();" type="text" value="" id="mth6" name="mth6" /></td>
</tr>
<tr>
<td>12 Month payoff</td><td><input onchange="countvals();" type="text" value="" id="mth12" name="mth12" /></td>
</tr>
<tr>
<td>18 Month payoff</td><td><input onchange="countvals();" type="text" value="" id="mth18" name="mth18" /></td>
</tr>
<tr>
<td>24 Month payoff</td><td><input onchange="countvals();" type="text" value="" id="mth24" name="mth24" /></td>
</tr>
<tr>
<td>Settle for 50%</td><td><input onchange="countvals();" type="text" value="" id="set50" name="set50" /></td>
</tr>
<tr>
<td>Settle for 75%</td><td><input onchange="countvals();" type="text" value="" id="set75" name="set75" /></td>
</tr>
<tr>
<td>Settle for 80%</td><td><input onchange="countvals();" type="text" value="" id="set80" name="set80" /></td>
</tr>
<tr>
<td>Settle for 85%</td><td><input onchange="countvals();" type="text" value="" id="set85" name="set85" /></td>
</tr>

</table>

</form>
</body>
</html>

Fotiman

4:43 pm on Sep 20, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Several comments:

1. You should really be using HTML 4.01 here, NOT xhtml (see Why most of us should NOT use XHTML [webmasterworld.com]).
2. Your isNumeric method will return true for empty strings, which is NOT numeric.
3. You're trying to reference an item with id 'mp', which doesn't exist, causing the script to die. Doesn't look like you're using this though.
4. Missing a closing } before the IsNumeric function

Below is a new version. I've replaced the isNumeric function (instead, invalid numbers will be replace with 0). I also made use of the Yahoo UI Library for its event handling and DOM utilities. The result is cleaner markup (all JavaScript 'behavior' is contained within the scripts, no more onchange event handlers inline in your HTML).
Hope this helps. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset:utf-8"> 
  <title>T</title> 
</head> 
<body> 
<form action="" method="get"> 
  <table> 
    <tr> 
      <td>Total debts owed</td><td><input type="text" value="" id="tdo" name="tdo" /></td> 
    </tr> 
    <tr> 
      <td>Monthly income</td><td><input type="text" value="" id="mi" name="mi" /></td> 
    </tr> 
    <tr> 
      <td>- Rent/ Mortgage</td><td><input type="text" value="" id="rent" name="rent" /></td> 
    </tr> 
    <tr> 
      <td>- Utilities</td><td><input type="text" value="" id="utils" name="utils" /></td> 
    </tr> 
    <tr> 
      <td>- Car Payment</td><td><input type="text" value="" id="car" name="car" /></td> 
    </tr> 
    <tr> 
      <td>- Insurance Payments</td><td><input type="text" value="" id="ins" name="ins" /></td> 
    </tr> 
    <tr> 
      <td>- Prescriptions</td><td><input type="text" value="" id="persc" name="persc" /></td> 
    </tr> 
    <tr> 
      <td>- Food</td><td><input type="text" value="" id="food" name="food" /></td> 
    </tr> 
    <tr> 
      <td>- Child Support</td><td><input type="text" value="" id="child" name="child" /></td> 
    </tr> 
    <tr> 
      <td>Total Expenses</td><td id="me"></td> 
    </tr> 
    <tr> 
      <td>Net</td><td id="net"></td> 
    </tr> 
    <tr> 
      <td>Pass Due</td><td><input type="text" value="" id="pass" name="pass" /></td> 
    </tr> 
    <tr> 
      <td>Down Payment</td><td><input type="text" value="" id="down" name="down" /></td> 
    </tr> 
    <tr> 
      <td>Net Debt</td><td><input type="text" value="" id="netd" name="netd" /></td> 
    </tr> 
    <tr> 
      <td>6 Month payoff</td><td><input type="text" value="" id="mth6" name="mth6" /></td> 
    </tr> 
    <tr> 
      <td>12 Month payoff</td><td><input type="text" value="" id="mth12" name="mth12" /></td> 
    </tr> 
    <tr> 
      <td>18 Month payoff</td><td><input type="text" value="" id="mth18" name="mth18" /></td> 
    </tr> 
    <tr> 
      <td>24 Month payoff</td><td><input type="text" value="" id="mth24" name="mth24" /></td> 
    </tr> 
    <tr> 
      <td>Settle for 50%</td><td><input type="text" value="" id="set50" name="set50" /></td> 
    </tr> 
    <tr> 
      <td>Settle for 75%</td><td><input type="text" value="" id="set75" name="set75" /></td> 
    </tr> 
    <tr> 
      <td>Settle for 80%</td><td><input type="text" value="" id="set80" name="set80" /></td> 
    </tr> 
    <tr> 
      <td>Settle for 85%</td><td><input type="text" value="" id="set85" name="set85" /></td> 
    </tr> 
  </table> 
</form> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>  
<script type="text/javascript"> 
function getNumber(str) { 
  if (null == str) { 
    return 0; 
  } 
  // Remove leading and trailing whitespace with replace(/^\s*¦\s*$/g,'') 
  var n = Number(str.replace(/^\s*¦\s*$/g,'')); 
  if (isNaN(n)) { 
    return 0; 
  } 
  return n 
} 
function countvals() { 
  var $ = YAHOO.util.Dom.get; 
  // Node containing the Monthly Expenses Total 
  var me= $('me'); 
  // Get the numeric values of all inputs (and update the form in case user 
  // entered invalid data) 
  var tdo= getNumber($('tdo').value); $('tdo').value = tdo; 
  var mi = getNumber($('mi').value); $('mi').value = mi; 
  var rent= getNumber($('rent').value); $('rent').value = rent; 
  var utils= getNumber($('utils').value); $('utils').value = utils; 
  var car= getNumber($('car').value); $('car').value = car; 
  var ins= getNumber($('ins').value); $('ins').value = ins; 
  var persc= getNumber($('persc').value); $('persc').value = persc; 
  var food= getNumber($('food').value); $('food').value = food; 
  var child= getNumber($('child').value); $('child').value = child; 
  var pass= getNumber($('pass').value); $('pass').value = pass; 
  var down= getNumber($('down').value); $('down').value = down; 
  var netd= getNumber($('netd').value); $('netd').value = netd; 
  // Calculate 
  $('me').innerHTML = rent + utils + car + ins + persc + food + child; 
  $('net').innerHTML = mi - getNumber(me.innerHTML); 
  netd = tdo-(pass+down); $('netd').value = netd; 
  // Since we just modified netd, we need to get that new value again 
  $('mth6').value = netd/6; 
  $('mth12').value = netd/12; 
  $('mth18').value = netd/18; 
  $('mth24').value = netd/24; 
  $('set50').value = netd*.5; 
  $('set75').value = netd*.75; 
  $('set80').value = netd*.8; 
  $('set85').value = netd*.85; 
} 
YAHOO.util.Event.on(window, 'load', function() { 
  // Attach event handlers to all of the inputs 
  YAHOO.util.Event.on(document.getElementsByTagName('input'), 'change', countvals); 
  countvals(); 
}); 
</script> 
</body> 
</html>

ChrisVersion2

7:58 pm on Sep 20, 2007 (gmt 0)

10+ Year Member



Thank you verymuch it works like a charm!

just a few Qs tho if I wanted it to be displayed in USD for each field and limit it to only 2 decimal places, what would be the best way of doing that?

ChrisVersion2

8:00 pm on Sep 20, 2007 (gmt 0)

10+ Year Member



Also... This is going to be used on computers on a company intranet site with no outside internet access. will it work with out the connection?

Fotiman

8:17 pm on Sep 20, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month




if I wanted it to be displayed in USD for each field and limit it to only 2 decimal places, what would be the best way of doing that?

Use the Number.toFixed method. For example:
$('mth6').value = (netd/6).toFixed(2);
Don't include the dollar sign in the input field or you'll have to worry about stripping it off when working with the numbers. You could put it before the input field, though, if you wanted.


will it work with out the connection?

The Yahoo UI Library can be downloaded [developer.yahoo.com] and used locally instead of referencing the Yahoo servers.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 11:13 am May 14, 2026