Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

need to add 2 another functions to this form 2

Status
Not open for further replies.
idaryl

idaryl

Technical User
Nov 10, 2001
156
US
I need some help with this: I'm using this form to calculate the cost of cleaning rooms, however I need the results to not show in an alert window, rather have it display in a field called (total) below the calculate button.... also the client wants three prices ( the total; then another field which is 2x the total; and other field which is 2.5x the total; for 3 price ranges).

Is this possible with what I have already done here - I've gone about as far as my abilities allow.... OR is there a simpler way to do all of this???

--------
<html>
<head>
<title> -- </title>
</head>
<body bgcolor="#FFFFFF" text="#000000" marginwidth="0" marginheight="0" topmargin="20" leftmargin="0">
<table width="525" border="0" cellspacing="1" cellpadding="0" bgcolor="#FF9900" align="center">
<tr>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="1" height="363" align="center" bgcolor="#FFFFFF">
<tr>
<td height="2">
<form name="calculate" method="post" action="">
<table width="100%" border="0" cellspacing="2" cellpadding="4"
height="95">
<tr>
<td width="86%" height="2"><b>&nbsp;<font size="-1" face="Arial">Number
of living &amp; or family rooms.</font></b></td>
<td width="14%" align="CENTER" height="2">
<div align="center"><font face="Arial">
<input type="text" name="rooms" size="3"
value="0">
</font> </div>
</td>
</tr>
<tr>
<td width="86%" height="2"><b>&nbsp;<font size="-1" face="Arial">Number
of combination living/dining areas [ count as 2 rooms ]</font></b></td>
<td width="14%" height="2" align="CENTER">
<div align="center"><font face="Arial">
<input type="text" name="comboroom" size="3" value="0">
</font></div>
</td>
</tr>
<tr>
<td width="86%" height="2"><b>&nbsp;<font size="-1" face="Arial">Number
of double size bedrooms. [ count as 2 rooms ]</font></b></td>
<td width="14%" height="2" align="CENTER">
<div align="center"><font face="Arial">
<input type="text" name="dblbed"
size="3" value="0">
</font></div>
</td>
</tr>
<tr>
<td width="86%" height="2"><b>&nbsp;<font size="-1" face="Arial">Number
of standard size bedrooms.</font></b></td>
<td width="14%" height="2" align="CENTER">
<div align="center"><font face="Arial">
<input type="text" name="bedrms" size="3"
value="0">
</font></div>
</td>
</tr>
<tr>
<td width="86%" height="2"><b>&nbsp;<font size="-1" face="Arial">Number
of bathrooms. [ Average bathroom 5x10 ]</font></b></td>
<td width="14%" height="2" align="CENTER">
<div align="center"><font face="Arial">
<input type="text" name="bathrms" size="3"
value="0">
</font></div>
</td>
</tr>
<tr>
<td width="86%" height="2"><b>&nbsp;<font size="-1" face="Arial">Number
of hallways. [ Average hallway 10-15 ]</font></b></td>
<td width="14%" height="2" align="CENTER">
<div align="center"><font face="Arial">
<input type="text" name="hallways" size="3"
value="0">
</font> </div>
</td>
</tr>
<tr>
<td width="86%" height="2"><b>&nbsp;<font size="-1" face="Arial">Number
of stairways. [ 15 stairs per set ]</font></b></td>
<td width="14%" height="2" align="CENTER">
<div align="center"><font face="Arial">
<input type="text" name="others" size="3"
value="0">
</font></div>
</td>
</tr>
<tr>
<td width="86%" height="2"><b>&nbsp;<font size="-1" face="Arial">Number
of Closets. [ Average closet 5x10 ]</font></b></td>
<td width="14%" height="2" align="CENTER">
<div align="center"><font face="Arial">
<input type="text" name="closets" size="3" value="0">
</font></div>
</td>
</tr>
</table>
<div align="center"><font color="#0000FF">
<script language="JavaScript">


function calculate(form)

{

rooms = eval(form.rooms.value)
comboroom = eval(form.comboroom.value)
dblbed = eval(form.dblbed.value)
bedrms = eval(form.bedrms.value)
bathrms = eval(form.bathrms.value)
hallways = eval(form.hallways.value)
others = eval(form.others.value)
closets = eval(form.closets.value)
GetPriceOne (form, rooms, comboroom, dblbed, bedrms, bathrms, hallways, others, closets)

}

function GetPriceOne(form, rooms, comboroom, dblbed, bedrms, bathrms, hallways, others, closets)

{

PriceOne = rooms * 30
GetPriceTwo(form, rooms, comboroom, dblbed, bedrms, bathrms, hallways, others, closets, PriceOne)
}

function GetPriceTwo(form, rooms, comboroom, dblbed, bedrms, bathrms, hallways, others, closets, PriceOne)

{

PriceTwo = PriceOne + (comboroom * 60)
GetPriceThree(form, rooms, comboroom, dblbed, bedrms, bathrms, hallways, others, closets, PriceTwo)


}

function GetPriceThree(form, rooms, comboroom, dblbed, bedrms, bathrms, hallways, others, closets, PriceTwo)

{
PriceThree = PriceTwo + (dblbed * 60)
GetPriceFour(form, rooms, comboroom, dblbed, bedrms, bathrms, hallways, others, closets, PriceThree)

}

function GetPriceFour(form, rooms, comboroom, dblbed, bedrms, bathrms, hallways, others, closets, PriceThree)

{

PriceFour = PriceThree + (bedrms * 23)
GetPriceFive(form, rooms, comboroom, dblbed, bedrms, bathrms, hallways, others, closets, PriceFour)

}

function GetPriceFive(form, rooms, comboroom, dblbed, bedrms, bathrms, hallways, others, closets, PriceFour)

{
PriceFive = PriceFour + (bathrms * 10)
GetPriceSix(form, rooms, comboroom, dblbed, bedrms, bathrms, hallways, others, closets, PriceFive)

}

function GetPriceSix(form, rooms, comboroom, dblbed, bedrms, bathrms, hallways, others, closets, PriceFive)

{

PriceSix = PriceFive + (hallways * 15)
GetPriceSeven(form, rooms, comboroom, dblbed, bedrms, bathrms, hallways, others, closets, PriceSix)
}

function GetPriceSeven(form, rooms, comboroom, dblbed, bedrms, bathrms, hallways, others, closets, PriceSix)

{

PriceSeven = PriceSix + (others * 30)
GetPriceEight(form, rooms, comboroom, dblbed, bedrms, bathrms, hallways, others, closets, PriceSeven)
}

function GetPriceEight(form, rooms, comboroom, dblbed, bedrms, bathrms, hallways, others, closets, PriceSeven)

{

total = PriceSeven + (closets * 10)
WriteDocument(total)
}

function RoundTocents(n)

{

cents = n * 100;
cents = Math.round(cents);
strcents = "" + cents;
len = strcents.length;
return strcents.substring(0, len - 2) + "." + strcents.substring(len - 2, len);

}

function WriteDocument(total)

{

alert("The total cost is $" + RoundTocents(total))
}

</script>
</font><font face="Arial">&nbsp;&nbsp;&nbsp;</font>
<input type="button"
value="Calculate Estimate" name="B1" onClick="calculate(this.form)">
<input type="reset" value="Clear" name="B2">
<font color="#0000FF"> </font> </div>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
 
Sort by date Sort by votes
Simplifying a little:
Code: 
function calculate(f)
{
  var rooms = parseInt(f.elements['rooms'].value);
  var comboroom = parseInt(f.elements['comboroom'].value);
  var dblbed = parseInt(f.elements['dblbed'].value);
  var bedrms = parseInt(f.elements['bedrms'].value);
  var bathrms = parseInt(f.elements['bathrms'].value);
  var hallways = parseInt(f.elements['hallways'].value);
  var others = parseInt(f.elements['others'].value);
  var closets = parseInt(f.elements['closets'].value);
  var total = 0;

  total += rooms * 30; 
  total += comboroom * 60;
  total += dblbed * 60;
  total += bedrms * 23;
  total += bathrms * 10;
  total += hallways * 15;
  total += others * 30;
  total += closets * 10;

  writeTotal(total, f);
}

function writeTotal(total, f)
{
  f.elements['ttl'].value = "The total cost is $" + roundToCents(total);
  f.elements['ttl2'].value = "The total cost is $" + roundToCents(total * 2);
  f.elements['ttl3'].value = "The total cost is $" + roundToCents(total * 2.5);
}
// ...
<!-- In your form -->
<input type="text" name="ttl">Normal total<br>
<input type="text" name="ttl2">Total times 2<br>
<input type="text" name="ttl3">Total times 2.5

--Chessbot

"Violence is the last refuge of the incompetent." -- Asimov, Foundation
 
Upvote 0 Downvote
Hi Chessbot, you help people a lot - thanks

this is what I have now - somewhere I didnt get it right: is it the onclick? or the form name? or....?

------
<html>
<head>
<title> -- </title>
</head>
<body bgcolor="#FFFFFF" text="#000000" marginwidth="0" marginheight="0" topmargin="20" leftmargin="0">
<table width="525" border="0" cellspacing="1" cellpadding="0" bgcolor="#FF9900" align="center">
<tr>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="1" height="363" align="center" bgcolor="#FFFFFF">
<tr>
<td height="2">
<form name="calculate" method="post" action="">
<table width="100%" border="0" cellspacing="2" cellpadding="4"
height="95">
<tr>
<td width="86%" height="2"><b>&nbsp;<font size="-1" face="Arial">Number
of living &amp; or family rooms.</font></b></td>
<td width="14%" align="CENTER" height="2">
<div align="center"><font face="Arial">
<input type="text" name="rooms" size="3"
value="0">
</font> </div>
</td>
</tr>
<tr>
<td width="86%" height="2"><b>&nbsp;<font size="-1" face="Arial">Number
of combination living/dining areas [ count as 2 rooms ]</font></b></td>
<td width="14%" height="2" align="CENTER">
<div align="center"><font face="Arial">
<input type="text" name="comboroom" size="3" value="0">
</font></div>
</td>
</tr>
<tr>
<td width="86%" height="2"><b>&nbsp;<font size="-1" face="Arial">Number
of double size bedrooms. [ count as 2 rooms ]</font></b></td>
<td width="14%" height="2" align="CENTER">
<div align="center"><font face="Arial">
<input type="text" name="dblbed"
size="3" value="0">
</font></div>
</td>
</tr>
<tr>
<td width="86%" height="2"><b>&nbsp;<font size="-1" face="Arial">Number
of standard size bedrooms.</font></b></td>
<td width="14%" height="2" align="CENTER">
<div align="center"><font face="Arial">
<input type="text" name="bedrms" size="3"
value="0">
</font></div>
</td>
</tr>
<tr>
<td width="86%" height="2"><b>&nbsp;<font size="-1" face="Arial">Number
of bathrooms. [ Average bathroom 5x10 ]</font></b></td>
<td width="14%" height="2" align="CENTER">
<div align="center"><font face="Arial">
<input type="text" name="bathrms" size="3"
value="0">
</font></div>
</td>
</tr>
<tr>
<td width="86%" height="2"><b>&nbsp;<font size="-1" face="Arial">Number
of hallways. [ Average hallway 10-15 ]</font></b></td>
<td width="14%" height="2" align="CENTER">
<div align="center"><font face="Arial">
<input type="text" name="hallways" size="3"
value="0">
</font> </div>
</td>
</tr>
<tr>
<td width="86%" height="2"><b>&nbsp;<font size="-1" face="Arial">Number
of stairways. [ 15 stairs per set ]</font></b></td>
<td width="14%" height="2" align="CENTER">
<div align="center"><font face="Arial">
<input type="text" name="others" size="3"
value="0">
</font></div>
</td>
</tr>
<tr>
<td width="86%" height="2"><b>&nbsp;<font size="-1" face="Arial">Number
of Closets. [ Average closet 5x10 ]</font></b></td>
<td width="14%" height="2" align="CENTER">
<div align="center"><font face="Arial">
<input type="text" name="closets" size="3" value="0">
</font></div>
</td>
</tr>
</table>
<div align="center"><font color="#0000FF">
<script language="JavaScript">
function calculate(f)
{
  var rooms = parseInt(f.elements['rooms'].value);
  var comboroom = parseInt(f.elements['comboroom'].value);
  var dblbed = parseInt(f.elements['dblbed'].value);
  var bedrms = parseInt(f.elements['bedrms'].value);
  var bathrms = parseInt(f.elements['bathrms'].value);
  var hallways = parseInt(f.elements['hallways'].value);
  var others = parseInt(f.elements['others'].value);
  var closets = parseInt(f.elements['closets'].value);
  var total = 0;
  total += rooms * 30;
  total += comboroom * 60;
  total += dblbed * 60;
  total += bedrms * 23;
  total += bathrms * 10;
  total += hallways * 15;
  total += others * 30;
  total += closets * 10;
  writeTotal(total, f);
}
function writeTotal(total, f)
{
  f.elements['ttl'].value = "The total cost is $" + roundToCents(total);
  f.elements['ttl2'].value = "The total cost is $" + roundToCents(total * 2);
  f.elements['ttl3'].value = "The total cost is $" + roundToCents(total * 2.5);
}
</script>
</font><font face="Arial">&nbsp;&nbsp;&nbsp;</font>
<input type="button" value="Calculate Estimate" name="B1" onClick="calculate(this.form)">
<input type="reset" value="Clear" name="B2">
<font color="#0000FF"><br><br>
<input type="text" name="ttl">Normal total<br><br>
<input type="text" name="ttl2">Total times 2<br><br>
<input type="text" name="ttl3">Total times 2.5
</font> </div>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

• idaryl • •
idface.gif
 
Upvote 0 Downvote
This works for me:
Code: 
<html>
<head>
<title> -- </title>
<script language="JavaScript" type="text/javascript">
<!--

function calculateTotals(f)
{
  var rooms = parseInt(f.elements['rooms'].value);
  var comboroom = parseInt(f.elements['comboroom'].value);
  var dblbed = parseInt(f.elements['dblbed'].value);
  var bedrms = parseInt(f.elements['bedrms'].value);
  var bathrms = parseInt(f.elements['bathrms'].value);
  var hallways = parseInt(f.elements['hallways'].value);
  var others = parseInt(f.elements['others'].value);
  var closets = parseInt(f.elements['closets'].value);
  var total = 0;
  total += rooms * 30;
  total += comboroom * 60;
  total += dblbed * 60;
  total += bedrms * 23;
  total += bathrms * 10;
  total += hallways * 15;
  total += others * 30;
  total += closets * 10;
  writeTotal(total, f);
}

function writeTotal(total, f)
{
  f.elements['ttl'].value = "The total cost is $" + roundToCents(total);
  f.elements['ttl2'].value = "The total cost is $" + roundToCents(total * 2);
  f.elements['ttl3'].value = "The total cost is $" + roundToCents(total * 2.5);
}
 
function roundToCents(n)
{
  cents = n * 100;
  cents = Math.round(cents);
  strcents = "" + cents;
  len = strcents.length;
  return strcents.substring(0, len - 2) + "." + strcents.substring(len - 2, len);
}

// -->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" marginwidth="0" marginheight="0" topmargin="20" leftmargin="0">
<table width="525" border="0" cellspacing="1" cellpadding="0" bgcolor="#FF9900" align="center">
  <tr>
    <td>
      <table width="100%" border="0" cellspacing="1" cellpadding="1" height="363" align="center" bgcolor="#FFFFFF">
        <tr>
          <td height="2">
            <form name="calculate" method="post" action="">
              <table width="100%" border="0" cellspacing="2" cellpadding="4"
height="95">
                <tr>
                  <td width="86%" height="2"><b>&nbsp;<font  size="-1" face="Arial">Number
                    of living &amp; or family rooms.</font></b></td>
                  <td width="14%" align="CENTER" height="2">
                    <div align="center"><font face="Arial">
                      <input type="text" name="rooms" size="3"
    value="0">
                      </font> </div>
                  </td>
                </tr>
                <tr>
                  <td width="86%" height="2"><b>&nbsp;<font  size="-1" face="Arial">Number
                    of combination living/dining areas [ count as 2 rooms ]</font></b></td>
                  <td width="14%" height="2" align="CENTER">
                    <div align="center"><font face="Arial">
                      <input type="text" name="comboroom" size="3"  value="0">
                      </font></div>
                  </td>
                </tr>
                <tr>
                  <td width="86%" height="2"><b>&nbsp;<font  size="-1" face="Arial">Number
                    of double size bedrooms. [ count as 2 rooms ]</font></b></td>
                  <td width="14%" height="2" align="CENTER">
                    <div align="center"><font face="Arial">
                      <input type="text" name="dblbed"
    size="3"  value="0">
                      </font></div>
                  </td>
                </tr>
                <tr>
                  <td width="86%" height="2"><b>&nbsp;<font  size="-1" face="Arial">Number
                    of standard size bedrooms.</font></b></td>
                  <td width="14%" height="2" align="CENTER">
                    <div align="center"><font face="Arial">
                      <input type="text" name="bedrms" size="3"
    value="0">
                      </font></div>
                  </td>
                </tr>
                <tr>
                  <td width="86%" height="2"><b>&nbsp;<font  size="-1" face="Arial">Number
                    of bathrooms. [ Average bathroom 5x10 ]</font></b></td>
                  <td width="14%" height="2" align="CENTER">
                    <div align="center"><font face="Arial">
                      <input type="text" name="bathrms" size="3"
    value="0">
                      </font></div>
                  </td>
                </tr>
                <tr>
                  <td width="86%" height="2"><b>&nbsp;<font  size="-1" face="Arial">Number
                    of hallways. [ Average hallway 10-15 ]</font></b></td>
                  <td width="14%" height="2" align="CENTER">
                    <div align="center"><font face="Arial">
                      <input type="text" name="hallways" size="3"
    value="0">
                      </font> </div>
                  </td>
                </tr>
                <tr>
                  <td width="86%" height="2"><b>&nbsp;<font  size="-1" face="Arial">Number
                    of stairways. [ 15 stairs per set ]</font></b></td>
                  <td width="14%" height="2" align="CENTER">
                    <div align="center"><font face="Arial">
                      <input type="text" name="others" size="3"
    value="0">
                      </font></div>
                  </td>
                </tr>
                <tr>
                  <td width="86%" height="2"><b>&nbsp;<font  size="-1" face="Arial">Number
                    of Closets. [ Average closet 5x10 ]</font></b></td>
                  <td width="14%" height="2" align="CENTER">
                    <div align="center"><font face="Arial">
                      <input type="text" name="closets" size="3"  value="0">
                      </font></div>
                  </td>
                </tr>
              </table>
              <div align="center"><font color="#0000FF">
                
                </font><font face="Arial">&nbsp;&nbsp;&nbsp;</font>
                <input type="button" value="Calculate Estimate" name="B1" onclick="calculateTotals(this.form)">
                <input type="reset" value="Clear" name="B2">
                <font color="#0000FF"><br><br>
                <input type="text" name="ttl">Normal total<br><br>
                <input type="text" name="ttl2">Total times 2<br><br>
                <input type="text" name="ttl3">Total times 2.5
                </font> </div>
            </form>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>
Changes:
1. Defined the function in the head.
2. Add [tt]type="text/javascript"[/tt] to the tag.
3. Changed name to calculateTotal since calculate appears to be reserved.
4. Added comment tags in script to hide from old browsers.

--Chessbot

"Violence is the last refuge of the incompetent." -- Asimov, Foundation
 
Upvote 0 Downvote
Hows this for strange - copied the entire code to a new htm file and on a Mac it doesnt work (and all the initial values are at 0) - tried it on a PC running 2000 and IE 6.0 and it works (if you put in the values! they dont appear to be active) - this is weird

• idaryl • •
idface.gif
 
Upvote 0 Downvote
I tried it in FireFox, all values start at 0 and it works fine. Are you getting any errors? I don't have access to a Mac.

--Chessbot

"Violence is the last refuge of the incompetent." -- Asimov, Foundation
 
Upvote 0 Downvote
Tried it on 3 Macs (OSX 3.1.0 and 10.2.8) and 1 on Sys 9.2.2 and the values did not show also the calc does'nt work - on the PC side I only have one here (sorry ;-( ) its running IE 6.0 on win2000.

Why should the flavor of the browser and system type be an issue ???

• idaryl • •
idface.gif
 
Upvote 0 Downvote
It works fine for me on IE6 and FF. Browsers sometimes make a difference, but not system type. Are you getting any errors? What are they?

--Chessbot

"Violence is the last refuge of the incompetent." -- Asimov, Foundation
 
Upvote 0 Downvote
The thing I get is the initial values are blank; which are preset to 0 (??) and then, if I set them to 0 and put any number in any box to calculate; it does'nt work

• idaryl • •
idface.gif
 
Upvote 0 Downvote
Are you getting javascript errors?

--Chessbot

"Violence is the last refuge of the incompetent." -- Asimov, Foundation
 
Upvote 0 Downvote
I would need to see it on a mac... sorry, I can't do anything more.

--Chessbot

"Violence is the last refuge of the incompetent." -- Asimov, Foundation
 
Upvote 0 Downvote
I haven't read the code in detail, so this suggestion might be completely off-point. However, I've noticed problems when copying and pasting code to/from the forum. Particularly with whitespace characters. The character set on the forum might not match the Mac default.



Thomas D. Greer

Providing PostScript & PDF
Training, Development & Consulting
 
Upvote 0 Downvote
Happy Thanksgiving All!!

OK so I followed the suggestion from tgreer and noticed after each return the was an extra character [É], in some cases up to 25 extra... so I went about stripping them out.

Guess what? yep, it worked.... so i guess I will put into the memory banks to completely check any (copy/paste) for weird extra characters. The strange thing is.. I copied this directly into Dreamweaver4 and no characters present and the dang thing does'nt work -- BUT -- if I copy it into Teachtext (something like Notepad) they show! Then paste it into Dreamweaver; and then they show, what a way to do this! Anyway, after stripping the characters out the code works as its supposed to...

So my thanks to Chessbot for the fantastic job of the code and for the hint about the whitespaces (leading to the extra characters) Thanks to tgreer

• idaryl • •
idface.gif
 
Upvote 0 Downvote
Odd.
My guess as to the Dreamweaver problem is that the program automatically escapes tags: "<" becomes &lt;, etc. As for the copy and paste: never seen it before, but I will keep it in mind.
Glad it's fixed! Happy (belated) Thanksgiving!

--Chessbot

"Violence is the last refuge of the incompetent." -- Asimov, Foundation
 
Upvote 0 Downvote
Nice!
You might want to add in negative number validation though... (Hey, they pay me if I give them stuff? Same price?)

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakesperean sonnet.
 
Upvote 0 Downvote
Also for no number.

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
359
Kennelbloke
Kennelbloke
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
295
lexer
lexer
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
332
xwb
xwb
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
257
Rayj0000
Rayj0000
berkshirea
  • Locked
  • Question
Radio Button Clicked, Another Radio Becomes Mandatory 1
Replies
2
Views
289
berkshirea
berkshirea

Part and Inventory Search

Sponsor

Back
Top