attempt to create apple like shopping cart page (price updates based on customization selections)

i am trying to make a cart page where based on each selection the price updates as you see on this page http://store.apple.com/us_smb_78313/configure/MC915LL/A?mco=MTk4Mjc2MDA

if you notice on the apple page that each radio fields value has a number like 095-344 and this value is some how sent via ajax to a serverside who th开发者_如何学Pythonen receives a price value to be added to the cart as a total that is viewed.

i created something similar here is the link. http://69.231.228.101:8888/demo/

i have made only the first two fields to work which is quantity and type. when the page loads the 3rd option is auto selected and its price is displayed. and when the section select is selected the items value is accumulated to the value that already exists in the upper right. the problem im having is if you now select the quantity again to change the amount of quantity you wanted the value resets instead of do the right math. what am i doing wrong?

plus, would you know of a jquery site or some site that has attempted this that i can study? i have looked long and hard and cannot find anything of this kind created. i just see a bunch of simple cart calculation pages and nothing like what im looking for. alot of sites have something like this that im looking for for example apple, dell, hp, for product customizations and the price updates based on your selection. what im wondering how and where did they learn how to do it. there must be a site that teaches it.

thanks

Well ok. Try this: Take your form and submit it. (If you weren't doing it then, do it) with ajax (Look at this). In this way every checked radio is submitted. Now take each radio and check his value adding to a variable $priceNUM the right price value. At the end add every single price from every single checked radio together, into a $total var and output that. Here's a stupid example.

HTML

<form>
 <input type="radio" name="box1" value="01"/>
 <input type="radio" name="box1" value="03"/>
 <input type="radio" name="box1" value="03"/>

 <input type="radio" name="box2" value="01"/>
 <input type="radio" name="box2" value="03"/>
 <input type="radio" name="box2" value="03"/>

 <input type="radio" name="box3" value="01"/>
 <input type="radio" name="box3" value="03"/>
 <input type="radio" name="box3" value="03"/>
</form>

PHP

<?php

# Requiring vars
$box1 = $_POST['box1'];
$box2 = $_POST['box2'];
$box3 = $_POST['box3'];

# Checking
if (empty($box1) or empty($box2) or empty($box3)) { /* Error, or $price = 0 */ }

switch ($box1) 
{
 case '01':
  $price1 = 10;
 break;

 case '02':
  $price1 = 20;
 break;

 case '03':
  $price1 = 30;
 break;

 default:
  $price1 = 0;
 break;
}

switch ($box2) 
{
 case '01':
  $price2 = 50;
 break;

 case '02':
  $price2 = 100;
 break;

 case '03':
  $price2 = 150;
 break;

 default:
  $price2 = 0;
 break;
}

switch ($box3) 
{
 case '01':
  $price3 = 2;
 break;

 case '02':
  $price3 = 4;
 break;

 case '03':
  $price3 = 6;
 break;

 default:
  $price3 = 0;
 break;
}

$total = $price1 + $price2 + $price3;
echo $total;

?>

Now with jquery make the form to submit when a box is changed (i think you already know how to do this) and we are done.

Actually every time it happens, we are going to calculate the total, but it is the easiest way. You could also make something with a database or with cookies but it became too complicated.

i think i figured it out. i cant believe i didnt see this before. all i had to do was assign the selected value for each selection into its own variable. then have a function on the very end that grabs each value from each select then displays it.

var qprice;
var typeprice;


$(document).ready(function() {


        /* -----------------------------------------------------
                Quantity Selection
           ----------------------------------------------------- */

        $("#quantity").change(function() 
        {
            var hash = $("#quantity").val(); //returns 0001 (ex)



            $.get("ajax.php", { id: hash },

            function(data)
            {
                qprice = data.price;
                displayPrice();
            }, "json");
        });




        /* -----------------------------------------------------
                Type Selection
           ----------------------------------------------------- */
        $("#type").change(function() 
        {
            var hash = $("#type").val(); //returns 0001 (ex)


            $.get("ajax.php", { id: hash },

            function(data)
            {   
                typeprice = data.price
                displayPrice();
                //$("#price").attr({value: total});

            }, "json");
        });








        function displayPrice() 
        {
            total = parseInt(qprice) + parseInt(typeprice);
            alert(total);
        }


});

i just have to enter all the other checks so that i dont get undefined errors. charlie i love u, u inspired me to figure it out.