TechQA.

Square Metre Calculator Help Rounding up square metres

2.7k views Asked by At

I am trying to help a friend fix up his site and they have asked me for help in sorting out a form calculator that calculates square metres... right now it calculates it exactly. My mate wants it to round up the square metres. I have no idea about code, is there anyone out there that can help me find a way to round up the square meter please?

Here's what we have so far;

<script type="text/javascript">// <![CDATA[

    (function($){
    jQuery(document).ready(function($){

    
    theUnit = 'cms';
        $('#inserted-height').val('');
        $('#inserted-width').val('');

        $('#inserted-height').focus(function(){
            $(this).val('');
    });
        $('#inserted-width').focus(function(){
        $(this).val('');
    });

        $('#inserted-height').blur(function(){
        var height = $(this).val();
        if(!checkDigits(height)){
            $(this).focus();
            $('#calculate-button').removeClass("Reset");
            return false;
        }
    });

        $('#inserted-width').blur(function(){
        var width = $(this).val();
        if(!checkDigits(width)){
            $(this).focus();
            $('#calculate-button').removeClass("Reset");
            return false;
        }
    });

    });

        $('#calculate-button').click(function(){

            if ($(this).hasClass("Reset")){

                $('#screen-two').fadeOut(function(){
                    $('#cms-message').fadeIn();
                });

                $(this).removeClass("Reset");
                $(this).val("Submit");
                $('#inserted-height').val('');
                $('#inserted-width').val('');
            return false;
        }
        /* SET SIZES */
        var MIN_SIZE = 20000;
        var MAX_SIZE = 3000000;

        /* FREE SHIPPING */
        

        var currentProductPrice = $('#currentProductPricefromCMS').val();
        var estimatedWidth = $('#inserted-width').val();
        var estimatedHeight = $('#inserted-height').val();
        /* added pre price to calculator */
        var currencySymbol = "AUD$";
        var totalSize = estimatedWidth * estimatedHeight;
        var isInches = false;
        // get the unit type
        var theUnits = $("input[name='unit']:checked").val()
        // console.log(theUnits);

        // boolean for valid inputs
        var valid = false;

        if(theUnit == 'inch') {
            isInches = true;
            totalSize = (estimatedWidth* 2.54) * (estimatedHeight * 2.54);
        } else {
            isInches = false;
        }
        /* WARNING FOR MAX AND MIN SIZES */

        if((totalSize < MIN_SIZE || totalSize > MAX_SIZE) && !isInches){
            alert('Oops... size must be within '+MIN_SIZE/10000+' sqm and '+MAX_SIZE/10000+' sqm. \n Note: 100 cms = 1 Metre.');
            $('#inserted-width').css({'color':' #AA202E'});
            $('#inserted-height').css({'color':' #AA202E'});
            return false;
        }  else {

            if((totalSize < MIN_SIZE || totalSize > MAX_SIZE) && isInches ){
                alert('Oops... size must be within '+MIN_SIZE/10000+' sqm and '+MAX_SIZE/10000+' sqm or approx 27 square feet (MIN) and 323 square feet (MAX). Note: 12 inches = 1 Foot.');
                $('#inserted-width').css({'color':'#AA202E'});
                $('#inserted-height').css({'color':'#AA202E'});
                return false;
            } else {
                valid = true;
            }
        }

        /* DO IT */
        // can only proceed if true
        if(valid){
            //fade in price

            $('#cms-message').fadeOut(function(){
                $('#screen-two').fadeIn();
            });
            $('#calculate-button').val("Reset");
            $('#calculate-button').addClass("Reset");

            /* IF INCHES  */

            if(isInches) {
                // console.log("inches selected");
                var InchesToCms = (totalSize);
                var estimatedPrice = InchesToCms * currentProductPrice;
                // console.log("inches to cms"+totalSize);
                var outputPrice = estimatedPrice / 10000;
                var actualPrice = outputPrice.toFixed(2);
                $('#display-price').val(currencySymbol+actualPrice);
            }
            /* IF CM  */
            else  {
                // console.log("cms selected");
                var estimatedPrice = totalSize * currentProductPrice;
                 /* added for rounding up */
    var totalSize = Math.round(outputPrice); 
                var outputPrice = estimatedPrice / 10000;
              
                var actualPrice = outputPrice.toFixed(2);


                $('.symbol').html("<span>" + currencySymbol + "</span >");
                $('#display-price').val(actualPrice);
            }
            var free_shipping_min = 330;
            /* check if above $400 for actual price */
            if (actualPrice >= free_shipping_min ){
                $(".calculator_disclaimer").html('<b>Price includes <span>FREE</span> shipping</b>');

            } else {

                $(".calculator_disclaimer").html("Price excludes shipping $49.95");
            }

        }

    });

    //REGEX FOR Checking if letters entered.
    function checkDigits(str){

        var intRegex = /[A-z]/;
        if(intRegex.test(str) ) {
            alert('Please enter only numbers');
            return false;
        }  else {
            return true;
        }

    }


    /* RESET BUTTON */
        $('.reset').click(function($){
        totalSize = 0;
        $('#inserted-width').css({'color':'solid 1px #969696'});
        $('#inserted-height').css({'border':'solid 1px #969696'});
       
        $('#inserted-height').val('');
        $('#inserted-width').val('');
    });

    /* TOGGLE BETWEEN INCHES AND CMS */

        $('#radio-inches').click(function($){
        $('.units').val('Inches');
        theUnit = 'inch';
    });

        $('#radio-cms').click(function(){
        $('.units').val('Cms');
        theUnit = 'cms';
    });

    })(jQuery);
// ]]></script>

Ok, this is what we have once I have made the changes as advised. 

<div class="quick-quote">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div class="home_price_calculator" style="text-align: center;">
<h3 style="text-align: center;">Quick Quote</h3>
Please enter your wall size in centimetres. <!-- HIDDEN FIELDS GETS THE CURRENT PRICE PER SQUARE METRE --> <input id="currentProductPricefromCMS" type="hidden" autocomplete="off" value="55.000" /> <input id="inserted-width" class="validate" type="text" autocomplete="off" placeholder="length" size="9" value="" /> X <input id="inserted-height" class="validate" type="text" autocomplete="off" placeholder="height" size="9" value="" /> <input id="calculate-button" class="calculate" type="button" value="Submit" name="calculate" /> <!-- <div id="cms-message">Please enter your size in centimetres.</div> --> <input id="display-currency" type="hidden" value="" />$AUD <input id="display-price" type="text" readonly="readonly" size="9" />
<div class="calculator_disclaimer" style="text-align: center;">&nbsp;</div>
</div>
</div>
<script type="text/javascript">// <![CDATA[
/* SETS CENTIMETRES ONLOAD */
    (function($){
    jQuery(document).ready(function($){

    /* EXECUTION OF PRICING ESTIMATOR */
    theUnit = 'cms';
        $('#inserted-height').val('');
        $('#inserted-width').val('');

        $('#inserted-height').focus(function(){
            $(this).val('');
    });
        $('#inserted-width').focus(function(){
        $(this).val('');
    });

        $('#inserted-height').blur(function(){
        var height = $(this).val();
        if(!checkDigits(height)){
            $(this).focus();
            $('#calculate-button').removeClass("Reset");
            return false;
        }
    });

        $('#inserted-width').blur(function(){
        var width = $(this).val();
        if(!checkDigits(width)){
            $(this).focus();
            $('#calculate-button').removeClass("Reset");
            return false;
        }
    });

    });

        $('#calculate-button').click(function(){

            if ($(this).hasClass("Reset")){

                $('#screen-two').fadeOut(function(){
                    $('#cms-message').fadeIn();
                });

                $(this).removeClass("Reset");
                $(this).val("Submit");
                $('#inserted-height').val('');
                $('#inserted-width').val('');
            return false;
        }
        /* GETS INITIAL SIZES */
        var MIN_SIZE = 20000;
        var MAX_SIZE = 3000000;

        /* FREE MIN SHIPPING VARIABLE */
        

        var currentProductPrice = $('#currentProductPricefromCMS').val();
        var estimatedWidth = $('#inserted-width').val();
        var estimatedHeight = $('#inserted-height').val();
        /* added pre price to calculator */
        var currencySymbol = "AUD$";
        /* next line as per advice */
        var totalSize =  Math.ceil((estimatedWidth * estimatedHeight));
        var isInches = false;
        // get the unit type
        var theUnits = $("input[name='unit']:checked").val()
        // console.log(theUnits);

        // boolean for valid inputs
        var valid = false;

        if(theUnit == 'inch') {
            isInches = true;
              /* next line as per advice */
            totalSize = Math.ceil((estimatedWidth * 0.0254) * (estimatedHeight * 0.0254));
        } else {
            isInches = false;
        }
        /* WARNING FOR MAX AND MIN SIZES */

        if((totalSize < MIN_SIZE || totalSize > MAX_SIZE) && !isInches){
            alert('Oops... size must be within '+MIN_SIZE/10000+' sqm and '+MAX_SIZE/10000+' sqm. \n Note: 100 cms = 1 Metre.');
            $('#inserted-width').css({'color':' #AA202E'});
            $('#inserted-height').css({'color':' #AA202E'});
            return false;
        }  else {

            if((totalSize < MIN_SIZE || totalSize > MAX_SIZE) && isInches ){
                alert('Oops... size must be within '+MIN_SIZE/10000+' sqm and '+MAX_SIZE/10000+' sqm or approx 27 square feet (MIN) and 323 square feet (MAX). Note: 12 inches = 1 Foot.');
                $('#inserted-width').css({'color':'#AA202E'});
                $('#inserted-height').css({'color':'#AA202E'});
                return false;
            } else {
                valid = true;
            }
        }

        /* DO IT */
        // can only proceed if true
        if(valid){
            //fade in price

            $('#cms-message').fadeOut(function(){
                $('#screen-two').fadeIn();
            });
            $('#calculate-button').val("Reset");
            $('#calculate-button').addClass("Reset");

            /* IF INCHES SELECTED */

            if(isInches) {
                // console.log("inches selected");
                var InchesToCms = (totalSize);
                var estimatedPrice = InchesToCms * currentProductPrice;
                // console.log("inches to cms"+totalSize);
                var outputPrice = estimatedPrice / 10000;
                var actualPrice = outputPrice.toFixed(2);
                $('#display-price').val(currencySymbol+actualPrice);
            }
            /* IF CM SELECTED */
            else  {
                // console.log("cms selected");
                var estimatedPrice = Math.round((totalSize) * (currentProductPrice));
                var outputPrice = estimatedPrice / 10000;
                
                var actualPrice = outputPrice.toFixed(2);
/* added for rounding up */
    var outputPrice = Math.round(outputPrice);

                $('.symbol').html("<span>" + currencySymbol + "</span >");
                $('#display-price').val(actualPrice);
            }
            var free_shipping_min = 330;
            /* check if above $400 for actual price */
            if (actualPrice >= free_shipping_min ){
                $(".calculator_disclaimer").html('<b>Price includes <span>FREE</span> shipping</b>');

            } else {

                $(".calculator_disclaimer").html("Price excludes shipping $49.95");
            }

        }

    });

    //REGEX FOR Checking if letters entered.
    function checkDigits(str){

        var intRegex = /[A-z]/;
        if(intRegex.test(str) ) {
            alert('Please enter only numbers');
            return false;
        }  else {
            return true;
        }

    }


    /* RESET BUTTON */
        $('.reset').click(function($){
        totalSize = 0;
        $('#inserted-width').css({'color':'solid 1px #969696'});
        $('#inserted-height').css({'border':'solid 1px #969696'});
        /* added by coops 1 Feb 2013 */
        $('#inserted-height').val('');
        $('#inserted-width').val('');
    });

    /* TOGGLE BETWEEN INCHES AND CMS */

        $('#radio-inches').click(function($){
        $('.units').val('Inches');
        theUnit = 'inch';
    });

        $('#radio-cms').click(function(){
        $('.units').val('Cms');
        theUnit = 'cms';
    });

    })(jQuery);
// ]]></script>
<div class="bottom_tab">&nbsp;</div>
<div class="bottom_tab" style="text-align: center;">&nbsp;</div>

javascript jquery area
Original Q&A
1

There are 1 answers

20
Luke On

I'd recommend FIRST taking a run at a JS tutorial, given your lack of experience. I admire the confidence, though!

Note that you can use the word ceil or the word round: ceil will round 1.01, 1.5, etc up to 2, and round will round 1.01, 1.49 etc down to 1 and 1.5, 1.99, etc up to 2.

Change the line:

var totalSize = estimatedWidth * estimatedHeight;

to:

var totalSize = Math.round((estimatedWidth / 100) * (estimatedHeight / 100));

or:

var totalSize = Math.ceil((estimatedWidth / 100) * (estimatedHeight / 100));

And the line:

totalSize = (estimatedWidth* 2.54) * (estimatedHeight * 2.54);

to:

totalSize = Math.round((estimatedWidth * 0.0254) * (estimatedHeight * 0.0254));

or:

totalSize = Math.ceil((estimatedWidth * 0.0254) * (estimatedHeight * 0.0254));

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in AREA

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions