simple javascript calculator required - cost?

Discussion in 'JavaScript' started by rolysatch, Apr 4, 2013.

Thread Status:
Not open for further replies.
  1. #1
    i need a simple javascript calculator/estimator for my website also the html form input. what i want is for someone to be able to put in a width and length (in square meters) and the calculator will calculate the area and then calculate the price, however the price will be determined by the area (the bigger the area the cheaper the price).
    so for example:
    if area <= 10m2 price is $3/m2 if area <= 20m2 price is $2.75/m2 if area <= 30m2 price is $2.50/m2
    there is also another additional option with a different price added to the area above if that option is selected (sand) add £0.25/m2 and if the chem option is selected add £0.30/m2.
    i can just about write this in php but don't know javascript, this is what i've got so far it calculates the area but i dont know how to work out the price, has anyone got any suggestions? this is what i have so far but now i'm stumped:

    <script>
        function calc() {
            total1 = 0.00 ;
            for( i=0; i<1; i++) {
                total1 += document.estimator['length'].value * document.estimator['width'].value ;
     
            }
            document.estimator.estarea.value = total1.toFixed(2) + " m2";
     
    var price="";
        if (estarea>=1 && estarea<=10) { price = 3; }
            if (estarea>10 && estarea<=20) { price = 2.75; }
            if (estarea>20 && estarea<=30) { price = 2.75; }
        }
    </script>
    Code (markup):

    ---------------------------------------------------------

    <form name="estimator">
        <table class="esttable" width="100%">
            <tr>
                <td colspan="2" class="heading" style="font-size:18px; font-weight:bold;">Estimate Your Driveway Cleaning</td>
            </tr>
     
        <tr>
                <td class="desc" style="font-size:18px; font-weight:bold;">length (m):</td>
                <td class="choose">
                    <input type="text" name="length" class="estvalue" onchange="calc();">
                </td>
            </tr>
                <tr>
                <td class="desc" style="font-size:18px; font-weight:bold;">width (m):</td>
                <td class="choose">
                    <input type="text" name="width" class="estvalue" onchange="calc();">
                </td>
            </tr>
                    <tr>
                <td class="desc" style="font-size:18px; font-weight:bold;">Total Area to be cleaned (m2):</td>
                <td class="choose">
                    <input type="text" name="estarea" class="estvalue" id="estarea">
                </td>
            </tr>
                                                    <tr>
                        <td class="desc">Application of Sand</td>
                        <td class="choose">
                            <select name="option0" onchange="calc();">
                                                                <option value="1.2">Yes</option>
                                                                <option value="1">No</option>         
                          </select>
                            <input type="hidden" name="value0" value="1.00"/>
                        </td>
                    </tr>
                    <tr>
                        <td class="desc">Application of Chem</td>
                        <td class="choose">
                            <select name="option1" onchange="calc();">
                                                                <option value="1.2">Yes</option>
                                                                <option value="1">No</option>         
                          </select>
                            <input type="hidden" name="value1" value="1.00"/>
                        </td>
                    </tr>
     
     
                                                <tr>
                <td class="desc" colspan="2"> </td>
            </tr>
     
            <tr>
                <td class="desc" style="font-size:18px; font-weight:bold;">Your Estimate:</td>
                <td class="choose">
                    <input type="text" name="estvalue" class="estvalue" value="£0.00">
                </td>
            </tr>
     
            <tr>
              <td class="desc" colspan="2"><input type="reset" value="Reset Values"/></td>
              </tr>
     
        </table>
    </form>
    HTML:
    --------------------------------------------------------------------

    any advice gratefully recieved, thanks in advance

    roland
     
    Last edited: Apr 4, 2013
    rolysatch, Apr 4, 2013 IP
  2. rolysatch

    rolysatch Active Member

    Messages:
    131
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #2
    its ok i have solved it myself thanks anyway
     
    rolysatch, Apr 4, 2013 IP
Thread Status:
Not open for further replies.