floor calculator

**tizi** · 11-23-2010 05:51 PM

hi all, first time poster please be gentle..

i've been playing around with this floor calculator modified quite a bit

Code:

<script type="text/javascript" src="js/calculate.js"></script>
var= 
<form action="php/FormToEmail.php" onSubmit="return validate_form();" name="quote" method="post">
<td align="left"><table width="644" align="center" cellpadding="0" cellspacing="0" class="boarder">
  <td colspan="8" class="green" id="title">Floorplan</td>
  </tr>
  <tr>
   <td height="14" colspan="8" align="center">&nbsp;</td>
  </tr>
  <td height="81" colspan="8" align="center">
<table width="496" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td width="86" align="right" style="border-bottom: 1px dashed #CCC;" >Family Room:</td>
      <td width="112" align="right" style="border-bottom: 1px dashed #CCC;" >Length:
        <input name="familyroom_length" type="text" id="txtfamilyroom_length" value="" size="4" maxlength="4" />
        &nbsp;m</td>
      <td width="115" align="right" style="border-bottom: 1px dashed #CCC;" >Width:
        <input name="familyroom_width" type="text" id="txtfamilyroom_width" size=4 maxlength="4" />
        &nbsp;m</td>
      <td width="160" align="right" style="border-bottom: 1px dashed #CCC;">Flooring Area:
        <input id="txtfamilyroom_total" type="text" size=6 readonly="readonly" style="background-color: #FFF; border-width: 0px;" name="familyroom_total"/>
        m<sup>2</sup></td>
      <td width="21" rowspan="8">&nbsp;</td>
    </tr>
    <tr>
      <td style="border-bottom: 1px dashed #CCC;" align="right">Dining 
        Room: </td>
      <td style="border-bottom: 1px dashed #CCC;" align="right">Length:
        <input id="txtdining_length" type="text" size=4 name="dining_length" />
        &nbsp;m</td>
      <td style="border-bottom: 1px dashed #CCC;" align="right">Width:
        <input id="txtdining_width" type="text" size=4 name="dining_width" />
        &nbsp;m</td>
      <td style="border-bottom: 1px dashed #CCC;" align="right">Flooring 
        Area:
        <input id="txtdining_total" type="text" size=6 readonly="readonly" style="background-color: #FFF; border-width: 0px;" name="dining_total" />
        m<sup>2</sup></td>
    </tr>
    <tr>
      <td style="border-bottom: 1px dashed #CCC;" align="right">Lounge: </td>
      <td style="border-bottom: 1px dashed #CCC;" align="right">Length:
        <input id="txtlounge_length" type="text" size=4 name="lounge_length" />
        &nbsp;m</td>
      <td style="border-bottom: 1px dashed #CCC;" align="right">Width:
        <input id="txtlounge_width" type="text" size=4 name="lounge_width" />
        &nbsp;m</td>
      <td style="border-bottom: 1px dashed #CCC;" align="right">Flooring 
        Area:
        <input id="txtlounge_total" type="text" size=6 readonly="readonly" style="background-color: #FFF; border-width: 0px;" name="lounge_total" />
        m<sup>2</sup></td>
    </tr>
    <tr>
      <td style="border-bottom: 1px dashed #CCC;" align="right">Bedroom 1: </td>
      <td style="border-bottom: 1px dashed #CCC;" align="right">Length:
        <input id="txtbedroom1_length" type="text" size=4 name="bedroom1_length" />
        &nbsp;m</td>
      <td style="border-bottom: 1px dashed #CCC;" align="right">Width:
        <input id="txtbedroom1_width" type="text" size=4 name="bedroom1_width" />
        &nbsp;m</td>
      <td style="border-bottom: 1px dashed #CCC;" align="right">Flooring 
        Area:
        <input id="txtbedroom1_total" type="text" size=6 readonly="readonly" style="background-color: #FFF; border-width: 0px;" name="bedroom1_total" />
        m<sup>2</sup></td>
    </tr>
    <tr>
      <td style="border-bottom: 1px dashed #CCC;" align="right">Bedroom 
        2: </td>
      <td style="border-bottom: 1px dashed #CCC;" align="right">Length:
        <input id="txtbedroom2_length" type="text" size=4 name="bedroom2_length" />
        &nbsp;m</td>
      <td style="border-bottom: 1px dashed #CCC;" align="right">Width:
        <input id="txtbedroom2_width" type="text" size=4 name="bedroom2_width" />
        &nbsp;m</td>
      <td style="border-bottom: 1px dashed #CCC;" align="right">Flooring 
        Area:
        <input id="txtbedroom2_total" type="text" size=6 readonly="readonly" style="background-color: #FFF; border-width: 0px;" name="bedroom2_total" />
        m<sup>2</sup></td>
    </tr>
    <tr>
      <td style="border-bottom: 1px dashed #CCC;" align="right">Bedroom 
        3: </td>
      <td style="border-bottom: 1px dashed #CCC;" align="right">Length:
        <input id="txtbedroom3_length" type="text" size=4 name="bedroom3_length" />
        &nbsp;m</td>
      <td style="border-bottom: 1px dashed #CCC;" align="right">Width:
        <input id="txtbedroom3_width" type="text" size=4 name="bedroom3_width" />
        &nbsp;m</td>
      <td style="border-bottom: 1px dashed #CCC;" align="right">Flooring 
        Area:
        <input id="txtbedroom3_total" type="text" size=6 readonly="readonly" style="background-color: #FFF; border-width: 0px;" name="bedroom3_total" />
        m<sup>2</sup></td>
    </tr>
    <tr>
      <td style="border-bottom: 1px dashed #CCC;" align="right">Hallway: </td>
      <td style="border-bottom: 1px dashed #CCC;" align="right">Length:
        <input id="txthallway_length" type="text" size=4 name="hallway_length" />
        &nbsp;m</td>
      <td style="border-bottom: 1px dashed #CCC;" align="right">Width:
        <input id="txthallway_width" type="text" size=4 name="hallway_width" />
        &nbsp;m</td>
      <td style="border-bottom: 1px dashed #CCC;" align="right">Flooring 
        Area:
        <input id="txthallway_total" type="text" size=6 readonly="readonly" style="background-color: #FFF; border-width: 0px;" name="hallway_total" />
        m<sup>2</sup></td>
    </tr>
    <tr>
      <td style="border-bottom: 0px dashed #CCC;" align="right">Other 
        1: </td>
      <td style="border-bottom: 0px dashed #CCC;" align="right">Length:
        <input id="txtother1_length" type="text" size=4 name="other1_length" />
        &nbsp;m</td>
      <td style="border-bottom: 0px dashed #CCC;" align="right">Width:
        <input id="txtother1_width" type="text" size=4 name="other1_width" />
        &nbsp;m</td>
      <td style="border-bottom: 0px dashed #CCC;" align="right">Flooring 
        Area:
        <input id="txtother1_total" type="text" size=6 readonly="readonly" style="background-color: #FFF; border-width: 0px;" name="other1_total" />
        m<sup>2</sup></td>
    </tr>
  </table></td>
  </tr>
  <tr align="right">
   <td height="40" colspan="2" align="right">&nbsp;</td>
   <td colspan="3" align="right"><input type="button" value="Click here to Calculate"  alt="Calculate" onClick="calculate(); return false;" name="image" width="115" height="48" /></td>
   <td width="359" colspan="3" align="left">&nbsp;</td>
  </tr>
  <tr align="right">
   <td height="40" colspan="8" align="center">Approx Square Meters:
    <input name="Sqm" type="text" id="txtTotalArea" style="background-color: #CCC; border-width: 1px;" size=6 readonly="readonly" /></td>
  </tr>
  <tr align="right">
   <td height="40" colspan="8" align="center">    <input name="waste" type="text" id="waste" style="background-color: #CCC; border-width: 1px;" size="6" readonly="readonly" />
    we have added an additional 5&#37; for wastage</td>
   </tr>
  <tr align="right">
   <td height="14" colspan="8" align="center" ><img src="images/fline.jpg" alt="" width="600" height="1" /></td>
  </tr>
  
   </table>   
 </td></form>

what I'm trying to achieve is 2things
first auto calculate area , instead of click to calculate all fields
second the value from id="txtTotalArea multiply by 5%

i have been searching hi and low so i thought time to ask the pro's
i'm a beginner at scripting but you have to start somewhere i guess.

Thanks in Advance
Tizi

**tizi** · 11-24-2010 01:11 AM

no helpers , i don't want to be spoon fed, just pointed in the right direction

**Kor** · 11-24-2010 03:11 AM

Originally Posted by tizi

what I'm trying to achieve is 2things
first auto calculate area , instead of click to calculate all fields

Use onkeyup event on each text field

Originally Posted by tizi

second the value from id="txtTotalArea multiply by 5%

And what prevents you from multiplying it?

**tizi** · 11-24-2010 03:25 AM

Originally Posted by Kor

Use onkeyup event on each text field

And what prevents you from multiplying it?

thanks for taking the time to reply

Use onkeyup event on each text field -
i have used the onkeyup="calculate(); does not do anything

And what prevents you from multiplying it, my knowledge or rather formula
var = txtTotalarea * 0.05 ???? total newbie

cheers tizi

**tizi** · 11-24-2010 04:10 AM

Originally Posted by tizi

thanks for taking the time to reply

Use onkeyup event on each text field -
i have used the onkeyup="calculate(); does not do anything

And what prevents you from multiplying it, my knowledge or rather formula
var = txtTotalarea * 0.05 ???? total newbie

cheers tizi

ok an update
Use onkeyup event on each text field all working now thanks for pointing in the right direction.

now i'm playing with this formula

still learning

**Kor** · 11-24-2010 04:58 AM

var txtTotalArea = document.getElementById('txtTotalArea');

That is an element (an object). You are looking for the value attribute.

var txtTotalArea = txtTotalArea * 0.05 + txtTotalArea;

the elements value attribute returns a string, not a number. If you "add" two strings, the result would be a concatenation, not a math addition. You should transform that string into a number before performing a math add or subtract. To be sure, you should do that from the very beginning.

Code:

var tVal = Number(document.getElementById('txtTotalArea').value);
tVal= tVal * 0.05 + tVal;

**tizi** · 11-24-2010 07:07 AM

thanks for that

i cant seem to get the data from txttotalarea to display elsewhere on the page???

<input name="tVal()" type="text" id="waste()" style="background-color: #CCC; border-width: 1px;" size=6 readonly="readonly" />

**Kor** · 11-24-2010 07:11 AM

Originally Posted by tizi

Errr, what?

Are you sure you do understand the JavaScript language?

JavaScript uses methods. Methods are nested in functions. In JavaScript functions are treated like first-class objects. Functions are triggered by events, following the user's actions.

What do you try to do by giving to an id the name of a function?

**tizi** · 11-24-2010 03:52 PM

Errr, what? Are you sure you do understand the JavaScript language?
no i don't understand it that's why i'm here, this is my second day trying to learn it i think i have very slowly tho.

wish i was a teen again was a lot easier learning some code, mid 40's and i'm lost lol

**tizi** · 11-24-2010 04:27 PM

Originally Posted by Kor

What do you try to do by giving to an id the name of a function?

what i was trying to do the total of tVal pass the data to waste field

<input name="tVal()" type="text" id="waste()" style="background-color: #CCC; border-width: 1px;" size=6 readonly="readonly" />

the end result was to have
txtTotalarea 35square meters
waste 5% = 1.75
total = 36.75

thanks for all your help so far

**Kor** · 11-25-2010 03:41 AM

Originally Posted by tizi

what i was trying to do the total of tVal pass the data to waste field

In this case you should write the total in both elements, instead of writing it only in one of them.
Regarding the:

Code:

<input name="tVal()" id="waste()"

That is nonsense. name is an ATTRIBUTE. Same is id. Attributes have values. You can not call a function from within an attribute. You may call it only via an EVENT. Events follow the user's actions. In other words, the user must do something in order to trigger a function. He might click something (the event is onclick), he might focus a field (the event is onfocus), and so on...

About JavaScript events:
http://www.w3schools.com/js/js_events.asp

**tizi** · 11-25-2010 03:58 AM

i think i'm getting the hang of it

**tizi** · 11-25-2010 02:52 PM

Originally Posted by Kor

That is nonsense. name is an ATTRIBUTE. Same is id.

I'll do better next time TEACH

**tizi** · 11-27-2010 05:06 PM

finally got it all working, special thanks to Kor for your guidance and patients.

cheers

**Kor** · 11-28-2010 01:52 AM

The most important thing is that you have done it mostly by yourself - the best way to progress. Good luck!

Thread: floor calculator

Thread Tools

Display

floor calculator

update....

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions