hey everyone, first i will show u my code pages.
addcart.php
<?php
require_once("../Connection/connection.php");
if(!$_POST['img']) die("There is no such product!");
$img=mysql_real_escape_string(end(explode('/',$_POST['img'])));
$q_result=mysql_query("SELECT * FROM tbl_items WHERE item_photo='".$img."'");
$row=mysql_fetch_assoc($q_result);
$period = $_POST['period'];
$count = $_POST['count'];
$query_search1 =("SELECT * FROM `tbl_rates` WHERE `rental_period` = 'Daily' AND `units` = '10' AND `category_id` = '1'");
$search1 = mysql_query($query_search1, $pcrent) or die(mysql_error());
$row_search1 = mysql_fetch_assoc($search1);
echo '{status:1,id:'.$row['itid'].',price:'.trim($row_search1['rate']).',txt:\'\
\
<table width="100%" id="table_'.$row['itid'].'">\
<tr>\
<td width="20%">'.$row['item_title'].'</td>\
<td width="10%"><select name="'.$row['itid'].'_cnt" id="'.$row['itid'].'_cnt" onchange="change('.$row['itid'].');">\
<option value=""></option>';
for($i=1; $i<=$row['item_quantity']; $i++)
{
echo '<option value="'.$i.'">'.$i.'</option>';
}
echo '</select>\
\</td>\
<td width="15%"><select name="'.$row['itid'].'_due" id="'.$row['itid'].'_due" onchange="change('.$row['itid'].');">\
<option value=""></option>\
<option value="Daily">Daily</option>\
<option value="Weekly">Weekly</option>\
<option value="Monthly">Monthly</option>\
<option value="1Year">1Year</option>\
<option value="2Years">2Years</option>\
<option value="3Years">3Years</option>\
</select>\
\
</td>\
<td width="15%"><a href="#" onclick="remove('.$row['itid'].');return false;" class="remove">Remove</a></td>\
</tr>\
</table>\'}';
?>
var purchased=new Array();//an array containing all the products we've purcha
var totalprice=0;//the total price
var unit_price;
var asluprice;
$(document).ready(function(){
$(".product_item img").draggable({// enable all product images to be dragged
containment: 'document',
opacity: 0.6,
revert: 'invalid',
helper: 'clone',
zIndex: 100
});
$(".drop-here").droppable({// convert the shopping cart to a droppable
drop:
function(e, ui)
{
var param = $(ui.draggable).attr('src');
// IE6 fix
if($.browser.msie && $.browser.version=='6.0')
{
param = $(ui.draggable).attr('style').match(/src=\"([^\"]+)\"/);
param = param[1];
}
addlist(param);// the special addlist function - see below
}
});
});
function addlist(param)
{ // the addlist function ads a product to the shopping cart
$.ajax({// sending an ajax request to addtocart.php
type: "POST",
url: "ajax/addtocart.php",
data: 'img='+encodeURIComponent(param),// the product image as a parameter
dataType: 'json',// expecting json
beforeSend: function(x){$('#ajax-loader').css('visibility','visible');},// showing the loading gif
success: function(msg){
$('#ajax-loader').css('visibility','hidden');// hiding the loading gif animation
if(parseInt(msg.status)!=1)
{
return false;// if there has been an error, return false
}
else
{
var check=false;
var cnt = false;
for(var i=0; i<purchased.length;i++)
{
if(purchased[i].id==msg.id)// find if we have already bought this prduct
{
check=true;
cnt=purchased[i].cnt;
break;
}
}
if(!cnt)// if we haven't bought it yet, or we have removed it from the purchases, we insert it in the shopping cart
$('#item-list').append(msg.txt);
if(!check)// if we haven't bought it yet, insert it in the purchased array
{
purchased.push({id:msg.id,cnt:1,price:msg.price});
}
else // else if we've bought it
{
if(cnt>=3) return false;// 3 products of type max
purchased[i].cnt++;
$('#'+msg.id+'_cnt').val(purchased[i].cnt);// update the select box
}
totalprice+=msg.price;// recalculate the price
update_total();// update the total div
}
}
});
}
function findpos(id)// a helper function that finds the position at which the product is inserted in the array, returns the position
{
for(var i=0; i<purchased.length;i++)
{
if(purchased[i].id==id)
return i;
}
return false;
}
function remove(id)// remove a product from the shopping cart
{
var i=findpos(id);// find its position in the array
totalprice-=purchased[i].price*purchased[i].cnt;// recalculate the price
purchased[i].cnt = 0;// reset the counter
$('#table_'+id).remove();// remove it from the cart
update_total();// update the total price counter on the page
}
function change(id)// evoked when we change the number of products via the select area
{
var i=findpos(id);
period=$('#'+id+'_due').val();
count=$('#'+id+'_cnt').val();
//alert(count);
//alert(period);
if(count <= 10)
{
unit_price = 10;
}
if(count > 10 && count <= 20)
{
unit_price = 20;
}
if(count > 20 && count <= 30)
{
unit_price = 30;
}
rate_call(period, unit_price);
// alert(actual_rate);
totalprice+=count-(purchased[i].cnt)*actual_rate;
purchased[i].cnt=parseInt($('#'+id+'_cnt').val());
asluprice = count*actual_rate;
//alert(asluprice);
update_total();
}
function rate_call(period, count)
{
$.ajax({
type: "POST",
url: "ajax/ajax_query.php",
data: 'period='+period+'&count='+count,
dataType: 'text',
async:false,
success: function(rat){
actual_rate = rat;
}
});
return actual_rate;
}
function update_total()// function that updates the total price div on the page
{
if(asluprice)
{
$('#total').html('total: RM '+totalprice);// if we've bought somehitng, show the total price div and the purchase button
$('a.button').css('display','block');
$('#cart-text').css('display','none');
}
else// hide them
{
$('#total').html('');
$('a.button').hide();
$('#cart-text').css('display','block');
}
}
My problem is i want to update the totalprice div, when i change the value from the combo boxes. i just want to calculate the rate and the quantity and update it to the totalprice div. but now it is not working. i tried a lot and it has some problem. im retrieving the rate from a database using another php file shown in that script.js. all the values are retrieving and working fine. any one has any suggestion how to do this any other way, or have a fix for this.?? please help..
here is my cart image. its a drag and drop cart. i use ajax drag and drop care script there.
http://www.shainjetly.com/cart.png