www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 19

Thread: floor calculator

  1. #1
    Join Date
    Nov 2010
    Posts
    15

    floor calculator

    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
    Last edited by Kor; 11-24-2010 at 04:09 AM. Reason: wrap the code [code][/code]

  2. #2
    Join Date
    Nov 2010
    Posts
    15
    no helpers , i don't want to be spoon fed, just pointed in the right direction

  3. #3
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by tizi View Post
    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
    Quote Originally Posted by tizi View Post
    second the value from id="txtTotalArea multiply by 5%
    And what prevents you from multiplying it?

  4. #4
    Join Date
    Nov 2010
    Posts
    15
    Quote Originally Posted by Kor View Post
    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

  5. #5
    Join Date
    Nov 2010
    Posts
    15
    Quote Originally Posted by tizi View Post
    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

    <script type="text/javascript">
    function waste()
    {
    var txtTotalArea = document.getElementById('txtTotalArea');
    var txtTotalArea = txtTotalArea * 0.05 + txtTotalArea;
    }
    </script>
    still learning

  6. #6
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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;

  7. #7
    Join Date
    Nov 2010
    Posts
    15
    thanks for that

    <script type="text/javascript">
    function waste()
    {
    var tVal = Number(document.getElementById('txtTotalArea').value);
    tVal= tVal * 0.05 + tVal;
    }
    </script>
    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" />

  8. #8
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by tizi View Post
    <input name="tVal()" type="text" id="waste()" style="background-color: #CCC; border-width: 1px;" size=6 readonly="readonly" />
    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?

  9. #9
    Join Date
    Nov 2010
    Posts
    15
    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
    Last edited by tizi; 11-24-2010 at 04:55 PM.

  10. #10
    Join Date
    Nov 2010
    Posts
    15

    Smile

    Quote Originally Posted by Kor View Post
    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

  11. #11
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by tizi View Post
    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
    Last edited by Kor; 11-25-2010 at 04:43 AM.

  12. #12
    Join Date
    Nov 2010
    Posts
    15
    <script type="text/javascript">
    function waste(){
    var tVal = Number(document.getElementById('txtTotalArea').value);
    alert(tVal = tVal * 0.05 + tVal);
    }
    </script>

    <input type="button" onclick="waste()" value="waste">
    i think i'm getting the hang of it

  13. #13
    Join Date
    Nov 2010
    Posts
    15
    Quote Originally Posted by Kor View Post
    That is nonsense. name is an ATTRIBUTE. Same is id.
    I'll do better next time TEACH

  14. #14
    Join Date
    Nov 2010
    Posts
    15

    update....

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

    cheers

  15. #15
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    The most important thing is that you have done it mostly by yourself - the best way to progress. Good luck!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles