Grow your CSS skills. Land your dream job.

How Do I Calulate two values….

  • # September 3, 2009 at 3:53 pm

    I want to take the price of an item and multiply it by the quantity (as entered by shopper) to display what the total would be …

    Price Per Inch * # of inches = Total

    The idea is this…
    The shopper is buying a handmade necklace by the inch.
    So the inch price will be displayed with the minimum number of inches in a text box…
    then the overall total for this product is calculated as the customer changes the value in the number of inches box…
    This way they know the price of the necklace before they hit the add to cart button.

    I have found a few scripts that deal with multiple items with different values totaling then totaling the grand total but nothing basic like what I am looking for. Plus I really want to use jQuery.

    Can anyone help me learn this? :?:

    # September 4, 2009 at 8:34 am

    have a variable for your price A a variable for your size B

    var a = 10; //used an integer you can set manually
    var b = 12; //used an integer, but you can get what was input by user if needed
    var c = a * b; //calculation

    # September 5, 2009 at 4:14 pm

    ikthius has given the answer needed to achieve this. I would just like to elaborate on what he said :)

    Code:
    $(“#inches-select”).change( //inches selected with value changed
    function(){
    var inches= // Some value which you get from user on value being changed
    var pricePerInch = 50; //The value setting for the necklace
    //Attaching a $ sign to the total price
    var priceUpdate = ‘$’+(inches*pricePerExtraPage);
    $(“.price”).text(“”+priceUpdate); //Here you just update the price in particular header or paragraph with the class ‘price’
    }
    );

    Performing the price calculation on input change would show instant price change to the user. It would really look cool if you could take the input of the number of inches using a slider ;)

    I have implemented a similar thing in the order form of my home page. In my form, the user can select total number of pages from a drop down menu and the price is being shown instantly on selection. The site is still under construction, but the order form is in working condition. :)

    P.S.: The above code is incomplete and just a framework of how the final version will look. You can look up in the jQuery documentation on how to access values from an input field and in the process learn as well :)

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".