Re: JavaScript Help: Cost Savings Calculator

Discussion in 'HTML' started by Adam Pflug, Oct 1, 2005.

  1. Adam Pflug

    Adam Pflug Guest

    Here:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1">
    <title>Untitled Document</title>

    <script type="text/javascript">
    <!-- This script and many more are available free online at -->
    <!-- The JavaScript Source!! http://javascript.internet.com -->
    <!-- Created by: www.jdstiles.com -->
    <!-- Begin
    function startCalc(){
    interval = setInterval("calc()",1);
    }
    function calc(){
    one = document.getElementById("firstBox").value;
    two = document.getElementById("secondBox").value;
    three = document.getElementById("thirdBox").value;
    four = document.getElementById("fourthBox").value;
    five = document.getElementById("fifthBox").value;
    six = document.getElementById("sixthBox").value;
    document.getElementById("seventhBox").value = (one * 1) + (two * 1) +
    (three * 1) + (four * 1) + (five * 1) + (six * 1);
    if (document.getElementById("servicefee1").checked)
    fee = document.getElementById("servicefee1").value;
    else if (document.getElementById("servicefee2").checked)
    fee = document.getElementById("servicefee2").value;
    else if (document.getElementById("servicefee3").checked)
    fee = document.getElementById("servicefee3").value;
    else if (document.getElementById("servicefee4").checked)
    fee = document.getElementById("servicefee4").value;
    else if (document.getElementById("servicefee5").checked)
    fee = document.getElementById("servicefee5").value;
    document.getElementById("TotalServiceFee").value = fee;
    document.getElementById("TotalMonthlySavings").value =
    document.getElementById("seventhBox").value + fee;
    document.getElementById("TotalYearlySavings").value =
    Math.round((document.getElementById("seventhBox").value + fee) * 12 *
    100) / 100;
    }
    function stopCalc(){
    clearInterval(interval);
    }
    // End -->
    </script>
    <style type="text/css">
    <!--
    ..style1 {font-family: Arial, Helvetica, sans-serif}
    ..style2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    background-color: #CCCCCC;
    font-weight: bold;
    }
    ..style4 {font-family: Arial, Helvetica, sans-serif; font-weight: bold;
    }
    ..style6 {
    font-family: Arial, Helvetica, sans-serif;
    color: #666666;
    font-weight: bold;
    }
    -->
    </style>
    </head>

    <body>

    <form name="autoSumForm">
    <p class="style2">Step One: Total Monthly Personal Costs </p>
    <table width="50%" cellpadding="2" cellspacing="3" >
    <tr>
    <td width="53%" class="style1">Personal Monthly Cost One </td>
    <td width="47%"><input type=text id="firstBox" name="firstBox"
    value="" onFocus="startCalc();" onBlur="stopCalc();"></td>
    </tr>
    <tr>
    <td class="style1">Personal Monthly Cost Two </td>
    <td><input type=text id="secondBox" name="secondBox" value=""
    onFocus="startCalc();" onBlur="stopCalc();"></td>
    </tr>
    <tr>
    <td class="style1">Personal Monthly Cost Three </td>
    <td><input type=text id="thirdBox" name="thirdBox" value=""
    onFocus="startCalc();" onBlur="stopCalc();"></td>
    </tr>
    <tr>
    <td class="style1">Personal Monthly Cost Four </td>
    <td><input type=text id="fourthBox" name="fourthBox" value=""
    onFocus="startCalc();" onBlur="stopCalc();"></td>
    </tr>
    <tr>
    <td class="style1">Personal Monthly Cost Five </td>
    <td><input type=text id="fifthBox" name="fifthBox" value=""
    onFocus="startCalc();" onBlur="stopCalc();"></td>
    </tr>
    <tr>
    <td class="style1">Personal Monthly Cost Six </td>
    <td><input type=text id="sixthBox" name="sixthBox" value=""
    onFocus="startCalc();" onBlur="stopCalc();"></td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </table>
    <p class="style2">Step Two: Select Monthly Service Fees</p>
    <span class="style6">The user will select a &quot;Service Fee&quot;
    and the selection will appear in the &quot;Total Service Fee Cost&quot;
    below.
    </span>
    <table width="50%" cellpadding="2" cellspacing="3" >
    <tr>
    <td width="40%" class="style1">Select Service Fee 1 </td>
    <td width="60%"><input name="radiobutton" id="servicefee1"
    type="radio" onchange="calc()" value="155.95" checked>
    $150.95</td>
    </tr>
    <tr>
    <td class="style1">Select Service Fee 2 </td>
    <td><input name="radiobutton" id="servicefee2" type="radio"
    onchange="calc()" value="160.95">
    $160.95</td>
    </tr>
    <tr>
    <td class="style1">Select Service Fee 3 </td>
    <td><input name="radiobutton" id="servicefee3" type="radio"
    onchange="calc()" value="180.95">
    $180.95</td>
    </tr>
    <tr>
    <td class="style1">Select Service Fee 4 </td>
    <td><input name="radiobutton" id="servicefee4" type="radio"
    onchange="calc()" value="190.95">
    $190.95</td>
    </tr>
    <tr>
    <td class="style1">Select Service Fee 5 </td>
    <td><input name="radiobutton" id="servicefee5" type="radio"
    onchange="calc()" value="200.95">
    $200.95</td>
    </tr>
    </table>
    <br>
    <table width="50%" cellpadding="2" cellspacing="3" >
    <tr bgcolor="#EBEBEB">
    <td width="53%" class="style4">Total Personal Costs </td>
    <td width="47%"><input type=text id="seventhBox"
    name="seventhBox" > </td>
    </tr>
    <tr bgcolor="ebebeb">
    <td class="style4">Total Service Fee Cost </td>
    <td><input name="TotalServiceFee" type=text id="TotalServiceFee"
    > </td>

    </tr>
    <tr bgcolor="ebebeb">
    <td class="style4">Total Monthly Savings </td>
    <td><input name="TotalMonthlySavings" type=text
    id="TotalMonthlySavings" ></td>
    </tr>
    <tr bgcolor="ebebeb">
    <td class="style4">Total Yearly Savings </td>
    <td><input name="TotalYearlySavings" type=text
    id="TotalYearlySavings" ></td>
    </tr>
    </table>
    <br>
    <br>
    <br>
    <p class="style6">How can I get the script to calculate Total yearly
    savings?</p>
    <p class="style6">Here's the equation.</p>
    <table width="230" height="74" border="1" bgcolor="efefef">
    <tr>
    <td align="right" valign="top"><p class="style1">Total Personal
    Costs<br>
    -Total Service Fee Cost<br>
    -----------------------------<br>
    = Total Monthly Savings<br>
    x 12 Total Yearly Savings
    </p>
    </td>
    </tr>
    </table>
    <p>&nbsp; </p>
    <p> <br>
    </p>
    </form>

    </body>
    </html>
    Adam Pflug, Oct 1, 2005
    #1
    1. Advertising

  2. Adam Pflug

    rf Guest

    Adam Pflug wrote:

    [a bloody huge amount of HTML with no indication at all where the OP's
    problem may have been]

    Cheers
    Richard,

    now ignoring *anything* posted from groups.google as being largely
    irrelevant and rarely adhering to usenet etiquette.
    rf, Oct 1, 2005
    #2
    1. Advertising

  3. Adam Pflug

    Obvious Guest

    Obvious, Oct 1, 2005
    #3
  4. Adam Pflug

    Fred Guest

    Thanks very much Adam!




    On 1 Oct 2005 03:08:02 -0700, "Adam Pflug" <>
    wrote:

    >Here:
    >
    ><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    >"http://www.w3.org/TR/html4/loose.dtd">
    ><html>
    ><head>
    ><meta http-equiv="Content-Type" content="text/html;
    >charset=iso-8859-1">
    ><title>Untitled Document</title>
    >
    ><script type="text/javascript">
    ><!-- This script and many more are available free online at -->
    ><!-- The JavaScript Source!! http://javascript.internet.com -->
    ><!-- Created by: www.jdstiles.com -->
    ><!-- Begin
    >function startCalc(){
    > interval = setInterval("calc()",1);
    >}
    >function calc(){
    > one = document.getElementById("firstBox").value;
    > two = document.getElementById("secondBox").value;
    > three = document.getElementById("thirdBox").value;
    > four = document.getElementById("fourthBox").value;
    > five = document.getElementById("fifthBox").value;
    > six = document.getElementById("sixthBox").value;
    > document.getElementById("seventhBox").value = (one * 1) + (two * 1) +
    >(three * 1) + (four * 1) + (five * 1) + (six * 1);
    > if (document.getElementById("servicefee1").checked)
    > fee = document.getElementById("servicefee1").value;
    > else if (document.getElementById("servicefee2").checked)
    > fee = document.getElementById("servicefee2").value;
    > else if (document.getElementById("servicefee3").checked)
    > fee = document.getElementById("servicefee3").value;
    > else if (document.getElementById("servicefee4").checked)
    > fee = document.getElementById("servicefee4").value;
    > else if (document.getElementById("servicefee5").checked)
    > fee = document.getElementById("servicefee5").value;
    > document.getElementById("TotalServiceFee").value = fee;
    > document.getElementById("TotalMonthlySavings").value =
    >document.getElementById("seventhBox").value + fee;
    > document.getElementById("TotalYearlySavings").value =
    >Math.round((document.getElementById("seventhBox").value + fee) * 12 *
    >100) / 100;
    >}
    >function stopCalc(){
    > clearInterval(interval);
    >}
    >// End -->
    ></script>
    ><style type="text/css">
    ><!--
    >.style1 {font-family: Arial, Helvetica, sans-serif}
    >.style2 {
    > font-family: Arial, Helvetica, sans-serif;
    > font-size: 14px;
    > background-color: #CCCCCC;
    > font-weight: bold;
    >}
    >.style4 {font-family: Arial, Helvetica, sans-serif; font-weight: bold;
    >}
    >.style6 {
    > font-family: Arial, Helvetica, sans-serif;
    > color: #666666;
    > font-weight: bold;
    >}
    >-->
    ></style>
    ></head>
    >
    ><body>
    >
    ><form name="autoSumForm">
    > <p class="style2">Step One: Total Monthly Personal Costs </p>
    > <table width="50%" cellpadding="2" cellspacing="3" >
    > <tr>
    > <td width="53%" class="style1">Personal Monthly Cost One </td>
    > <td width="47%"><input type=text id="firstBox" name="firstBox"
    >value="" onFocus="startCalc();" onBlur="stopCalc();"></td>
    > </tr>
    > <tr>
    > <td class="style1">Personal Monthly Cost Two </td>
    > <td><input type=text id="secondBox" name="secondBox" value=""
    >onFocus="startCalc();" onBlur="stopCalc();"></td>
    > </tr>
    > <tr>
    > <td class="style1">Personal Monthly Cost Three </td>
    > <td><input type=text id="thirdBox" name="thirdBox" value=""
    >onFocus="startCalc();" onBlur="stopCalc();"></td>
    > </tr>
    > <tr>
    > <td class="style1">Personal Monthly Cost Four </td>
    > <td><input type=text id="fourthBox" name="fourthBox" value=""
    >onFocus="startCalc();" onBlur="stopCalc();"></td>
    > </tr>
    > <tr>
    > <td class="style1">Personal Monthly Cost Five </td>
    > <td><input type=text id="fifthBox" name="fifthBox" value=""
    >onFocus="startCalc();" onBlur="stopCalc();"></td>
    > </tr>
    > <tr>
    > <td class="style1">Personal Monthly Cost Six </td>
    > <td><input type=text id="sixthBox" name="sixthBox" value=""
    >onFocus="startCalc();" onBlur="stopCalc();"></td>
    > </tr>
    > <tr>
    > <td>&nbsp;</td>
    > <td>&nbsp;</td>
    > </tr>
    > </table>
    > <p class="style2">Step Two: Select Monthly Service Fees</p>
    > <span class="style6">The user will select a &quot;Service Fee&quot;
    >and the selection will appear in the &quot;Total Service Fee Cost&quot;
    >below.
    > </span>
    > <table width="50%" cellpadding="2" cellspacing="3" >
    > <tr>
    > <td width="40%" class="style1">Select Service Fee 1 </td>
    > <td width="60%"><input name="radiobutton" id="servicefee1"
    >type="radio" onchange="calc()" value="155.95" checked>
    > $150.95</td>
    > </tr>
    > <tr>
    > <td class="style1">Select Service Fee 2 </td>
    > <td><input name="radiobutton" id="servicefee2" type="radio"
    >onchange="calc()" value="160.95">
    > $160.95</td>
    > </tr>
    > <tr>
    > <td class="style1">Select Service Fee 3 </td>
    > <td><input name="radiobutton" id="servicefee3" type="radio"
    >onchange="calc()" value="180.95">
    > $180.95</td>
    > </tr>
    > <tr>
    > <td class="style1">Select Service Fee 4 </td>
    > <td><input name="radiobutton" id="servicefee4" type="radio"
    >onchange="calc()" value="190.95">
    > $190.95</td>
    > </tr>
    > <tr>
    > <td class="style1">Select Service Fee 5 </td>
    > <td><input name="radiobutton" id="servicefee5" type="radio"
    >onchange="calc()" value="200.95">
    > $200.95</td>
    > </tr>
    > </table>
    > <br>
    > <table width="50%" cellpadding="2" cellspacing="3" >
    > <tr bgcolor="#EBEBEB">
    > <td width="53%" class="style4">Total Personal Costs </td>
    > <td width="47%"><input type=text id="seventhBox"
    >name="seventhBox" > </td>
    > </tr>
    > <tr bgcolor="ebebeb">
    > <td class="style4">Total Service Fee Cost </td>
    > <td><input name="TotalServiceFee" type=text id="TotalServiceFee"
    >> </td>

    > </tr>
    > <tr bgcolor="ebebeb">
    > <td class="style4">Total Monthly Savings </td>
    > <td><input name="TotalMonthlySavings" type=text
    >id="TotalMonthlySavings" ></td>
    > </tr>
    > <tr bgcolor="ebebeb">
    > <td class="style4">Total Yearly Savings </td>
    > <td><input name="TotalYearlySavings" type=text
    >id="TotalYearlySavings" ></td>
    > </tr>
    > </table>
    > <br>
    > <br>
    > <br>
    > <p class="style6">How can I get the script to calculate Total yearly
    >savings?</p>
    > <p class="style6">Here's the equation.</p>
    > <table width="230" height="74" border="1" bgcolor="efefef">
    > <tr>
    > <td align="right" valign="top"><p class="style1">Total Personal
    >Costs<br>
    > -Total Service Fee Cost<br>
    > -----------------------------<br>
    > = Total Monthly Savings<br>
    > x 12 Total Yearly Savings
    > </p>
    > </td>
    > </tr>
    > </table>
    > <p>&nbsp; </p>
    > <p> <br>
    > </p>
    ></form>
    >
    ></body>
    ></html>
    Fred, Oct 1, 2005
    #4
  5. Adam Pflug

    Adam Pflug Guest

    rf wrote:
    > Adam Pflug wrote:
    >
    > [a bloody huge amount of HTML with no indication at all where the OP's
    > problem may have been]
    >
    > Cheers
    > Richard,
    >
    > now ignoring *anything* posted from groups.google as being largely
    > irrelevant and rarely adhering to usenet etiquette.


    I'm very new to usenet, and am really trying to figure it out. As to
    not commenting about where he went wrong... he didnt really try to
    implement the parts that were missing, so I just filled them in for
    him, If he understands javascript at all (which he obviously does if he
    got partway there) then he ought to be able to figure out how to do the
    rest based on the code I gave him which solves his problem (albeit not
    as efficiently as it could), the changes were all in one place (aside
    from id's added to some elements).

    If you have any tips for what proper usenet etiquette looks like (or a
    website I should read about it) then by all means, please refer me to
    it. What I've been doing looks fine in google groups which I assumed
    was all that I needed to be aware of. Perhaps this would explain why my
    posts seem like they are being ignored much of the time, even though I
    think I'm actually being helpful in many cases. Constructive critisim
    helps alot more then just blasting me for violating rules I'm not aware
    of.
    Adam Pflug, Oct 2, 2005
    #5
  6. Adam Pflug

    Adam Pflug Guest

    Adam Pflug, Oct 2, 2005
    #6
  7. Adam Pflug

    rf Guest

    Adam Pflug wrote:
    > rf wrote:
    > > Adam Pflug wrote:
    > >
    > > [a bloody huge amount of HTML with no indication at all where the OP's
    > > problem may have been]
    > >
    > > Cheers
    > > Richard,
    > >
    > > now ignoring *anything* posted from groups.google as being largely
    > > irrelevant and rarely adhering to usenet etiquette.

    <snip>

    > If you have any tips for what proper usenet etiquette looks like (or a
    > website I should read about it) then by all means, please refer me to
    > it.


    You seem to have got it right this time and have made off my ignore list
    :). You have quoted the bit to which you are replying, you have included an
    attribution. You did fail to trim the bits of my post that are irrelevant to
    your reply (my sig. OK, it's not a proper sig, but it could have been
    snipped).

    Your prior post simply landed in my newsreader[1] with none of the above,
    simply a "here" followed by pages of HTML. I had to search through the
    thread (OK, there is only one other post) to find out what you were
    referring to, and even then I did not find anything, having not bothered to
    look at the source of the page the OP provided a URL for.

    > What I've been doing looks fine in google groups which I assumed
    > was all that I needed to be aware of.


    No, it is not. Google groups is merely a badly designed HTML interface into
    usenet. Usenet is a collection of newsgroups that have nothing at all to do
    with the web or HTML (well, apart from their content, that is). The only
    usefull thing about google groups is that it archives usenet posts and
    should only be used IMHO to search this archive.

    > Perhaps this would explain why my
    > posts seem like they are being ignored much of the time, even though I
    > think I'm actually being helpful in many cases.


    Quite possibly. Many people here have their newsreader[1] set to
    automatically disregard anything posted from google groups. Search the
    archive for any post that contains "blinky" in the from field. Look at
    Blinky the Shark's sig. You will see he ignores google groups but he also
    kindly provides a link to a page that you should read. Here it is:
    http://blinkynet.net/comp/uip5.html

    > Constructive critisim
    > helps alot more then just blasting me for violating rules I'm not aware
    > of.


    Use google groups for what it was originally designed for. Search the
    archive for this group for posts with google groups in them. You will see a
    pattern emerging.

    [1] You would be far better off obtaining yourself a real newsreader (you
    probably already have one, Outlook Express will even do for starters) and
    point it to your ISP's news server, or one of the other free news servers
    out there (search the archive). That way you will be accessing usenet
    directly instead of via the ever to be damned google groups interface, and
    you will be seen by the people mentioned above, and you won't have to jump
    through hoops to make your post acceptable. Good luck :)

    Cheers
    Richard.
    rf, Oct 2, 2005
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Ryan Ternier
    Replies:
    1
    Views:
    1,460
    Ryan Ternier
    Oct 14, 2005
  2. Svante Nicholas Arvedahl

    Daylight savings problem

    Svante Nicholas Arvedahl, Oct 20, 2003, in forum: Java
    Replies:
    9
    Views:
    4,942
    Svante Nicholas Arvedahl
    Oct 24, 2003
  3. Hariharan.A
    Replies:
    0
    Views:
    1,719
    Hariharan.A
    Feb 25, 2004
  4. lordy
    Replies:
    3
    Views:
    1,888
    lordy
    Jul 14, 2006
  5. SIMPLE Javascript Calculator

    , Jul 10, 2006, in forum: Javascript
    Replies:
    23
    Views:
    289
    Randy Webb
    Jul 13, 2006
Loading...

Share This Page