Not displaying items which selected

JavaScript
1

hi all,
i have designed one shoppimg cart with 4 items.but it is unable to take the items i have selected i.e., not displaying the selected items.
kindly tell me what went wrong…
below is my code for index.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> JavaScript jQuery</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
		  // call the cart function
			$("#sc_cart").smartCart();
		}); 
	</script>
<link rel="stylesheet" type="text/css" href="css/cart.css" />
</head>
<body>
 <center><h2>Select Your products</h2></center>
<form  method="post" action="results.php">
 
 <div id="smartcart" class="Container">         		
    <div id="sc_productlist" class="scProductList">
       <div class="ProductListItem"> 
 		    <table border="0" cellpadding="2" cellspacing="2">
                <tr>
                  <td rowspan="3"><img width="100px" src="images/product0.jpg" /></td>
                  <td><strong><span id="prod_name100">Apple IPhone 3G</span></strong></td>
                </tr>
                <tr>
                  <td><label>Price:</label> $<span id="prod_price100">1450.75</span></td>
                </tr>               
                <tr>
                  <td><label>Quantity:</label>
                    <input name="prod_qty" class="Text" id="prod_qty100" value="1" size="3" type="text">
 					<input type="button" rel="100" class="ItemButton Btn" value="Add Product"></td>
                </tr>              
            </table>
        </div>					
	<hr/>
		<div class="ProductListItem"> 
        	<table border="0" cellpadding="2" cellspacing="2">
                <tr>
                  <td rowspan="3"><img width="100px" src="images/product1.jpg" /></td>
                  <td><strong><span id="prod_name101">Ice Pot</span></strong></td>
                </tr>
                <tr>
                  <td><label>Price:</label> $<span id="prod_price101">10.25</span></td>
                </tr>               
                <tr>
                  <td><label>Quantity:</label>
                    <input name="prod_qty" class="Text" id="prod_qty101" value="1" size="3" type="text">
  					<input type="button" rel="101" class="ItemButton Btn" value="Add Product"></td>
                </tr>              
            </table>
        </div>  
           <hr/>         
		<div class="ProductListItem"> 
            <table border="0" cellpadding="2" cellspacing="2">
                <tr>
                  <td rowspan="3"><img width="100px" src="images/product2.jpg" /></td>
                  <td><strong><span id="prod_name102">Style Stand</span></strong></td>
                </tr>
                <tr>
                  <td><label>Price:</label> $<span id="prod_price102">6.15</span></td>
                </tr>               
                <tr>
                  <td><label>Quantity:</label>
                    <input name="prod_qty" class="Text" id="prod_qty102" value="1" size="3" type="text">
  					<input type="button" rel="102" class="ItemButton Btn" value="Add Product"></td>
                </tr>              
            </table>          
		</div>  
      <hr/>
        <div class="ProductListItem"> 
        	<table border="0" cellpadding="2" cellspacing="2">
                <tr>
                  <td rowspan="3"><img width="100px" src="images/product3.jpg" /></td>
                  <td><strong><span id="prod_name103">Coffe Maker</span></strong></td>
                </tr>
                <tr>
                  <td><label>Price:</label> $<span id="prod_price103">120.35</span></td>
                </tr>               
                <tr>
                  <td><label>Quantity:</label>
                    <input name="prod_qty" class="Text" id="prod_qty103" value="1" size="3" type="text">
  					<input type="button" rel="103" class="ItemButton Btn" value="Add Product"></td>
                </tr>              
            </table>            
		</div>  
        </div>
	</div>	
     
    <div id="sc_cart" class="scCart">
      <select id="product_list" name="product_list[]" style="display:none;" multiple="multiple">
      </select>               
          <div class="CartListHead">
                <table width='50%'>
				<tr>
                  <td width='100px'>Product</td>
                  <td width='100px'>Quantity</td>
                  <td width='150px'>Amount($)</td>
                </tr>
				</table>
          </div>
            
    <div id="sc_cartlist" class="scCartList">
	</div>
        <div class="CartListHead">
           <table width='100%'>
		   <tr>
              <td>
              <span id="message"></span>
			  </td>
                <td width='100px'>Subtotal ($):</td>
                <td width='120px'><span id="subtotal"></span></td>
            </tr>
		  </table>
        </div>
            <br>
 <input style="width:200px;height:35px;float:right;" type="submit" class="Btn" value="Checkout">
          </div>
 </form>
</body>
</html>

below is my cart.css…


body {
  font : normal 12px Verdana, Helvetica, sans-serif;
  color:#0464BB; 
  margin:0;
  padding:0;
}
.Container {
	padding: 5px;
	border: 1px solid #E0E0E0; 
	width: auto;
	height:auto;
	margin: 5px; 
	float:left;   
    font-family : Verdana, Helvetica, sans-serif;
	font-size: 12px;  
    position:relative;
	left:5%;
    right:5%;
}
/*.scTitle {
	padding: 2px; 
	float:left;
	font-weight: bold; 
	margin-bottom: 3px; 
	float:left;
}  */
.Btn {
  background : #5A5655;
  color      : #FFFFFF;
  margin     : 0;
  padding    : 1px 5px 1px 5px;
  text-align : center;
  border     : 1px solid #5A5655;    
  text-decoration : none; 
 
 }
.Btn:hover{
  background : orange;
  color : #FFFFFF;
  border  : 1px solid orange; 
  text-decoration : none; 
}
.Text{ 
  border: 1px solid #E0E0E0; 
  width:25px;
  padding : 1px 5px 1px 5px;
}  
.Text:focus{ 
  border: 1px solid orange; 
} 
.scCart { 
	padding: 10px 5px 5px 5px;
	border: 1px solid #E0E0E0; 
	width: 450px;
	margin: 5px;
	float:left;
  
}
.scProductList {
	padding: 10px 5px 5px 5px;
	border: 1px solid #E0E0E0;
	width: 400px;
	height:360px;
	overflow:auto;
	margin: 5px;
	float:left;
 
}
.scCartList {
	position: relative;
	margin: 0;
	padding: 1px;
	background: #F8F8F8;
	border: 1px solid #E0E0E0;
	height: 250px;
	overflow:auto;
}
.CartListHead {
	padding: 0;
	background: #F8F8F8;
	border: 1px solid #E0E0E0; 
	margin: 1px 0 1px 0;
	height: 25px;
	font-weight: bold; 
}
.scCartListItem {
	position: relative;
	margin-left: 0;
	padding-left: 0;
	list-style: none;
	background: #F8F8F8;
	border: 1px solid #E0E0E0; 
	margin: 1px 0 0 0;
	line-height: 1em;
}
.scCartListItem:hover {
	background-color: #e5e5e5;
}
.scProductListItem {
  width:auto;
  margin:1px;
  background:#F8F8F8;
  overflow:show;
  padding:0;   /*12px 0px 2px 5px;*/    
  color:#0464BB;
  text-align:left;
  border:#E0E0E0 solid 1px;      
  
}
.scProductSelect {
	display: none;
	visibility:hidden;
}
.scULList {
	margin: 0.25em 0 1em 0; 
	position: relative;
	display: block;
	padding-left: 0; 
	list-style: none; 
}
.scListItemLabel {
	padding: 5px; 
	display: block;
}
.scListItemRemove {
	position: absolute;
	right: 0; 
	top: 6px; 
  background: #5A5655;
  color: #FFFFFF;
  margin : 0;
  padding : 1px 5px 2px 5px;
  text-align : center;
  border: 1px solid #5A5655;    
  text-decoration: none; 
 
}
.scListItemRemove:hover{
  background      : orange;
  color           : #FFFFFF;
  border          : 1px solid orange; 
  text-decoration : none; 
}

below is my results.php…


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> JavaScript jQuery plugin</title>
<link rel="stylesheet" type="text/css" href="css/style_smartcart.css" />
</head>
<body>
  <center>   
    <h2>Selected Products</h2>
  </center>
<div id="sc_cart" style="width:950px;" class="scContainer"> 
<?php
// creating product array
$product_array = array("100" =>array('product_id'=>'100', 'product_name'=>'Apple IPhone 3G', 'product_price'=>'1450.75', 'product_img'=>'images/product0.jpg'),
                       "101" =>array('product_id'=>'101', 'product_name'=>'Ice Pot', 'product_price'=>'10.25', 'product_img'=>'images/product1.jpg'),
                       "102" =>array('product_id'=>'102', 'product_name'=>'Style Stand', 'product_price'=>'6.15', 'product_img'=>'images/product2.jpg'),
                       "103" =>array('product_id'=>'103', 'product_name'=>'Coffee Maker', 'product_price'=>'120.35', 'product_img'=>'images/product3.jpg'));
 // get the selected product array
// here we get the selected product_id/quantity combination asa an array
$product_list = $_REQUEST['product_list'];
if(!empty($product_list)) 
{
?>
         <div class="scCartListHead">
            <table width='100%'><tr>
               <td>&nbsp;&nbsp;Product</td>
                <td width='80px'>Quantity</td>
                <td width='130px'>Amount($)</td>
                </tr></table>
         </div>
<?php  
    $sub_total = 0;
    foreach($product_list as $product){
      $chunks = explode('|',$product);
      $product_id = $chunks[0];
      $product_qty = $chunks[1];
      $product_name = $product_array[$product_id]['product_name'];
      $product_amount = $product_array[$product_id]['product_price']*$product_qty;
      // calculate the subtotal
      $sub_total = $sub_total + $product_amount;
     // echo "Product Id: ".$product_id." Quantity: ".$product_qty."<br>";
?>
        <div class="scCartListHead">
           <table width='100%'><tr>
             <td>&nbsp;&nbsp;<?php echo $product_name; ?></td>
             <td width='80px'><?php echo $product_qty; ?></td>
             <td width='130px'><?php echo $product_amount; ?></td>
            </tr></table>
       </div>
<?php
    }
?>
        <div class="scCartListHead">
            <table width='100%'><tr>
                <td>
                  <!-- Message Label -->
                   <span id="sc_message"></span></td>
                   <td width='100px'>Subtotal ($):</td>
                   <td width='120px'> 
                   <!-- Sub Total Label -->
                   <span id="sc_subtotal"><?php echo $sub_total; ?></span>
                   </td>
                   </tr></table>
            	 </div>
               <br>
               <form action="index.php" method="post">
               <?php
                    // set the request for continue shopping
                    if(isset($product_list)){
                      foreach($product_list as $p_list){
                        $prod_options .='<input type="hidden" name="product_list[]" value="'.$p_list.'">';
                      }
                      echo $prod_options;
                    }
               ?>
            	   <input style="width:200px;height:35px;float:left;" type="submit" class="scBtn" value="Continue Shopping">
            	 </form>     
<?php    
} 
else 
{	
echo "<strong>Your Cart is Empty</strong>";
}
?>
</div>
</body>
</html>

tell me what went worng…

2

In your html you have

$(document).ready(function() {
		  // call the cart function
			$("#sc_cart").smartCart();
		});

What are you trying to achieve with this?

As I see it all it is going to do is error since smartCart is not a valid method.

3

actually the above code is done using plugins but i want to do using only jquery so i have modified.
kindly tell me what extra thing i need to do so that it can be easily achieved…

4

hi do u know any good book for programming with php for shopping cart that has given in depth

5

so i have modified.

I am not seeing any code other than that. In what way have you modified?