JQuery Onclick display selected info - php

Question

I want to display the selected price, category and size on the dropdown slideingDiv. But what I have done below is not working. I have try to echo out to see if the data have been sent thought but I got nothing. Is anything wrong with my code?
Script
<script type="text/javascript">
$(document).ready(function () {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function () {
$(".slidingDiv").slideToggle();
});
});
</script>
Button
<button a href="product.php?ProdID=<?php echo $id; ?>" class="show_hide" id="button" name="button">Add to cart</a></button>
PHP
<?php
dbconnect();
if(isset($_POST['pid']) && isset($_POST['length']) && isset($_POST['Qty']) && `isset($_POST['Category'])){`
$pid = $_POST['pid'];
$length = $_POST["length"];
$qty = $_POST['Qty'];
$Category = $_POST['Category'];
echo $pid; // I have add this echo to see data have been passed though but i get nothing in return
echo $length;
$stmt4 = $conn->prepare("
SELECT Product.Name as ProductName, Category.Name, size, Price
FROM item_Product, Product, Category
WHERE Product.ProdID =:pid
AND size= :length AND Category.Name = :Category Limit 1");
$stmt4->bindParam('pid',$pid);
$stmt4->bindParam('length',$length);
$stmt4->bindParam('Category',$Category);
$stmt4->execute();
foreach ($stmt4->fetchAll(PDO::FETCH_ASSOC) as $row4 ) {
$product_name = $row4["ProductName"];
$price = $row4["Price"];
$length = $row4["size"];
$Category = $row4["Name"];
?>
Item was added shopping bag </br>
Name:<?php echo $row4['ProductName']; ?> </br>
Length:<?php echo $row4['size']; ?> </br>
Category:<?php echo $row4['Name']; ?> </br>
Price:<?php echo $row4['Price']; ?> </br>
<?php } }
?>
View Cart
</div>
TABLE
<td width="160">Price:</td>
echo '<td name="pricetag" id="pricetag">'.$row2['Price'].'</td>';
</tr>
<tr>
<td>Category</td>
<td>
<select id="Category" name="Category">
echo '<option value="'.$row['Name'].'">'.$row['Name'].'</option>';
</select>
</td>
</tr>
<tr>
<td width="160">Length:</td>
<td>
<select name="length" id="length">
<option SELECTED value="'.$row3['size'].'">'.$row3['size'].</option>
</select>
</td>
</tr>
<tr>
<td>Quantity</td>
<td><input type="text" name="Qty" id="Qty" value="1" style="width: 20px; text-align: right" /></td>
</tr>
</table>
<div class="cleaner h20"></div>
<input type="hidden" name="pid" id="pid" value="<?php echo $id; ?>" />
<div class="button">
<button class="show_hide" id="button" name="button">Add to cart</button>
</div>

Answer 1

Try this: SEE MY FIDDLE
HTML
<table>
<tr>
<td>Price</td>
<td>
<select id='priceTag'>
<option value='p1'>price 1</option>
<option value='p2'>price 2</option>
</select>
</td>
</tr>
<tr>
<td>Category</td>
<td>
<select id='Category'>
<option value='c1'>cat 1</option>
<option value='c2'>cat 2</option>
</select>
</td>
</tr>
<tr>
<td>Size</td>
<td>
<select id='Size'>
<option value='s1'>size 1</option>
<option value='s2'>size 2</option>
</select>
</td>
</tr>
</table>
<button id='button'>Submit</button>
<div id='selected'>
<table cellpadding="5" border='1'>
<tr>
<td>Price:</td>
<td id='sprice'></td>
</tr>
<tr>
<td>Category:</td>
<td id='scat'></td>
</tr>
<tr>
<td>Size:</td>
<td id='ssize'></td>
</tr>
</table>
</div>
JQuery
$(document).ready(function()
{
$('#selected').hide();
$('#button').click(function()
{
var price = $('#priceTag').val();
var cat = $('#Category').val();
var size = $('#Size').val();
$('#sprice').text(price);
$('#scat').text(cat);
$('#ssize').text(size);
$('#selected').slideDown();
});
});

Answer 2

Seems that you do not have a space in your <?php} ?>
Do something like <?php } ?>

Answer 3

Error:
<?php} ?>
try this,
<?php } ?> // add space between php and }

Answer 4

<?php}
should be
<?php }
Also
<button a href="product.php?ProdID=<?php echo $id; ?>" class="show_hide" id="button" name="button">Add to cart</a></button> is in correct
should be
<button>Add to cart</button>