Ajax Shopping Cart ช่วยบอกวิธีนำเอาค่าจากตะกร้าส่งไปลงฐานข้อมูลหน่อยครับ

$(document).ready(function() {
 
	var Arrays=new Array();
 
	$('#wrap li').mousemove(function(){
 
		var position = $(this).position();
 
		$('#cart').stop().animate({
 
				left   : position.left+'px',
 
			},250,function(){
 
		});
	}).mouseout(function(){
 
	});	
 
	$('#wrap li').click(function(){
 
		var thisID = $(this).attr('id');
 
		var itemname  = $(this).find('div .name').html();
		var itemprice = $(this).find('div .price').html();
 
		if(include(Arrays,thisID))
		{
			var price 	 = $('#each-'+thisID).children(".shopp-price").find('em').html();
			var quantity = $('#each-'+thisID).children(".shopp-quantity").html();
			quantity = parseInt(quantity)+parseInt(1);
 
			var total = parseInt(itemprice)*parseInt(quantity);
 
			$('#each-'+thisID).children(".shopp-price").find('em').html(total);
			$('#each-'+thisID).children(".shopp-quantity").html(quantity);
 
			var prev_charges = $('.cart-total span').html();
			prev_charges = parseInt(prev_charges)-parseInt(price);
 
			prev_charges = parseInt(prev_charges)+parseInt(total);
			$('.cart-total span').html(prev_charges);
 
			$('#total-hidden-charges').val(prev_charges);
		}
		else
		{
			Arrays.push(thisID);
 
			var prev_charges = $('.cart-total span').html();
			prev_charges = parseInt(prev_charges)+parseInt(itemprice);
 
			$('.cart-total span').html(prev_charges);
			$('#total-hidden-charges').val(prev_charges);
 
			$('#left_bar .cart-info').append('
 
<div id="each-'+thisID+'" class="shopp">
 
<div class="label">'+itemname+'</div>
 
 
<div class="shopp-price"> $<em>'+itemprice+'</em></div>
 
 
<span class="shopp-quantity">1</span><img class="remove" src="remove.png" alt="" /><br class="all" /></div>
 
 
');
 
			$('#cart').css({'-webkit-transform' : 'rotate(20deg)','-moz-transform' : 'rotate(20deg)' });
		}
 
		setTimeout('angle()',200);
	});	
 
	$('.remove').livequery('click', function() {
 
		var deduct = $(this).parent().children(".shopp-price").find('em').html();
		var prev_charges = $('.cart-total span').html();
 
		var thisID = $(this).parent().attr('id').replace('each-','');
 
		var pos = getpos(Arrays,thisID);
		Arrays.splice(pos,1,"0")
 
		prev_charges = parseInt(prev_charges)-parseInt(deduct);
		$('.cart-total span').html(prev_charges);
		$('#total-hidden-charges').val(prev_charges);
		$(this).parent().remove();
 
	});	
 
	$('#Submit').livequery('click', function() {
 
		var totalCharge = $('#total-hidden-charges').val();
 
		$('#left_bar').html('Total Charges: $'+totalCharge);
 
		return false;
 
	});	
 
});

function include(arr, obj) {
  for(var i=0; i<arr.length; i++) {
    if (arr[i] == obj) return true;
  }
}
function getpos(arr, obj) {
  for(var i=0; i<arr.length; i++) {
    if (arr[i] == obj) return i;
  }
}
function angle(){$('#cart').css({'-webkit-transform' : 'rotate(0deg)','-moz-transform' : 'rotate(0deg)' });}
			
});

<div id="wrap">
 
<ul>
 
	<li id="1">
				<img class="items" src="a1.png" alt="" height="100" />
 
<div><span class="name">Mac/OS X: Price</span>: $<span class="price">800</span></div></li>
 
 
	<li id="2">
				<img class="items" src="5.png" alt="" height="100" />
 
<div><span class="name">IPhone 3GS </span>: $<span class="price">500 </span></div></li>
 
 
	<li id="3">
				<img class="items" src="1.png" alt="" height="100" />
 
<div><span class="name">Apple IPad </span>: $<span class="price">450</span></div></li>
 
 
	<li id="4">
				<img class="items" src="6.png" alt="" height="100" />
 
<div><span class="name">Mac NoteBook </span>: $<span class="price">1200 </span></div></li>
 
 
	<li id="5">
				<img class="items" src="7.png" alt="" height="100" />
 
<div> <span class="name">Bag : Buy Now Price </span>: $<span class="price">65</span></div></li>
 
 
	<li id="6">
				<img class="items" src="5.png" alt="" height="100" />
 
<div><span class="name">IPhone 4GS </span>: $<span class="price">800</span></div></li>
 
 
	<li id="7">
				<img class="items" src="7.png" alt="" height="100" />
 
<div><span class="name"> Bag : Buy Now Price </span>: $<span class="price">45</span></div></li>
 
 
	<li id="8">
				<img class="items" src="6.png" alt="" height="100" />
 
<div><span class="name">Mac NoteBook </span>: $<span class="price">900 </span></div></li>
 
 
	<li id="9">
				<img class="items" src="8.png" alt="" height="100" />
 
<div><span class="name">Sony Super Ear Phone </span>: $<span class="price">20</span></div></li>
 
</ul>
 
 
<div id="bottomBar"><img id="cart" src="carts.png" alt="" /></div>
</div>
 
 
<div id="left_bar">
<form id="cart_form" action="#">
 
<div class="cart-total">
 
			<strong>Total Charges:          </strong> $<span>0</span>
<input id="total-hidden-charges" name="total-hidden-charges" type="hidden" value="0" /></div>
 
 
<button id="Submit">CheckOut</button></form></div>
</div>

html, body{
	margin:0;
	padding:0;
	border:0;
	outline:0;
}
 
#wrap{ width:600px; height:900px; top:20px; position:relative; bottom:0px;
  }
#wrap ul{ margin:0px; padding:0px; text-align:center }

#wrap ul li{
	-moz-background-clip: padding;     /* Firefox 3.6 */
	-webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
	background-clip: padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
	border: 10px solid rgba(0,0,0,0.3);
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px; 
 
	/*background:url("bgs.png") repeat-x scroll;*/
	list-style-type:none;
	height:150px;
	width:160px;
	margin-left:13px;
	margin-bottom:15px;
	float:left;
	padding:15px 0px 0px 0px;
	font-family:"LubalGraphBdBTBold",Tahoma;
	font-size:2em;
	overflow:hidden;
}
 
#wrap ul li div{ 

	height:25px;
	text-align:center;
	width:160px;
	margin-top:10px;
	position:relative;
	bottom:0px;
	padding-top:12px;
	padding-bottom:4px;
	background:#000;
	font: 11px Tahoma, Helvetica, Arial, Sans-Serif;
	opacity:0.8;
	color: #ccc;
	text-shadow: 0px 2px 3px #555;
}
img#cart
{
	bottom:0px;position:fixed; margin-left:30px; /* keep the bar on top  */
}
 
#wrap ul li { cursor:pointer;}

div#bottomBar {
  position: fixed;/* keep the bar on top  */
  bottom: 0px;
  z-index: 9999;
  background:url(rail.jpg) bottom center repeat-x;
  height: 130px;
}
 
div#bottomBar {
  width:600px;
}
 
#left_bar
{
	top:120px;
	left:600px;
	height:350px;
	width:250px;
	position:fixed;
	padding:10px;
	/*-moz-background-clip: padding;
	-webkit-background-clip: padding;
	background-clip: padding-box;
	border: 10px solid #006699;
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px; */
}
em{ font-style:normal; }
button {
 
	background:none repeat scroll 0 0 #AD7B05; color:#FFFFFF;
	border:medium none;
	font-family:"LubalGraphBdBTBold",Tahoma;
	font-size:1.1em;
	margin-right:-14px;
	padding:10px;
	cursor:pointer;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}
 
.cart-total{ background:#E8E8E8}

.shopp,.cart-total{
	border:solid #ccc 1px; padding:8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px; font-size:12px;
	background:url(remove.png) center right no-repeat 5px;
	border-radius: 8px;
	font-family:"LubalGraphBdBTBold",Tahoma;
	margin-bottom:3px;
	width:260px;
	}
 
div.shopp span{  float:left;}
div.shopp div.label{ width:130px; float:left; }
div.shopp div.shopp-price{ width:70px; float:left;}
.quantity{ float:left; margin-top:-3px; width:20px;}
img.remove{float:right;cursor:pointer;}
.cart-total b{width:130px;}