Issue Posting data - php

Question

I am trying to post the name="pricetag" and name="size" which is in the item and price... I know this is not working because I have use echo but nothing is coming out but if I echo the pid of the product I shows. The codes below
<form id="add2cart" name="cart" method="Post" action="<?php fetchdir($bpages); ?>cart.php">
<table>
<tr>
<td width="160">Price:</td>
<td name="pricetag" id="pricetag">£25.00</td>
</tr>
<tr>
<td width="160">Item:</td>
<td name="size" id="item">12 inch</td>
</tr>
<tr>
<td width="160">Length*:</td>
<td>
<select name="length" onChange="addCharge(this, this.selectedIndex);" id="priceDropDown" class="small">
<option value="£25.00">12 inch</option>
<option value="£30.00">14 inch (+£30.00)</option>
<option value="£35.00">16 inch (+£35.00)</option>
<option value="£40.00">18 inch (+£40.00)</option>
<option value="£45.00">20 inch (+£45.00)</option>
<option value="£55.00">22 inch (+£55.00)</option>
<option value="£60.00">24 inch (+£60.00)</option>
<option value="£70.00">26 inch (+£70.00)</option>
<option value="£80.00">28 inch (+£80.00)</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="id" value="<?php echo $id; ?>" />
<input type="Submit" class="button" name="button" id="button" value="Add to shopping cart"/>
</form>
click here for live code http://jsfiddle.net/J4rXX/5/ by Ghillied

Answer 1

It doesn't POST because forms don't submit contents from TD elements. Only from INPUTs, SELECTs and TEXTAREAs.
More information on HTML FORMs here. If you want to avoid displaying the same data twice, you should try INPUT type=hidden.
<table>
<tr>
<td>Pricetag</td><td>PRICE_HERE</td>
</tr>
</table>
<form>
<input type="hidden" name="pricetag" value="PRICE_HERE" />
...
</form>
This should do nothing to hurt your existing JS scripts.

Answer 2

The only information that is posted to the server from a HTML form are elements such as INPUT, SELECT, and TEXTAREA.
If you want to post additional data, but make it un-editable to the user, you need to ideally put the data into INPUT elements which have the attributes type="hidden". This will post the data from the field but make them hidden to the user posting the form.
Adding the elements anywhere in the form will work. I've positioned them at the bottom of the form element, with the already existing hidden field, in this snippet.
I've also removed the name attributes from the TD elements in the snippet, to conform with web standards.
<form id="add2cart" name="cart" method="Post" action="<?php fetchdir($bpages); ?>cart.php">
<table>
<tr>
<td width="160">Price:</td>
<td id="pricetag">£25.00</td>
</tr>
<tr>
<td width="160">Item:</td>
<td id="item">12 inch</td>
</tr>
<tr>
<td width="160">Length*:</td>
<td>
<select name="length" onChange="addCharge(this,this.selectedIndex);" id="priceDropDown" class="small">
<option value="£25.00">12 inch</option>
<option value="£30.00">14 inch (+£30.00)</option>
<option value="£35.00">16 inch (+£35.00)</option>
<option value="£40.00">18 inch (+£40.00)</option>
<option value="£45.00">20 inch (+£45.00)</option>
<option value="£55.00">22 inch (+£55.00)</option>
<option value="£60.00">24 inch (+£60.00)</option>
<option value="£70.00">26 inch (+£70.00)</option>
<option value="£80.00">28 inch (+£80.00)</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="pricetag" value="£25.00" id="hiddenpricetag" />
<input type="hidden" name="size" value="12 inch" id="hiddensize" />
<input type="hidden" name="pid" id="id" value="<?php echo $id; ?>" />
<input type="Submit" class="button" name="button" id="button" value="Add to shopping cart"/>
</form>
EDIT:
Just noticed that the form uses javascript, upon the change of the SELECT data, to change the TD elements HTML data.
To make sure that the form posted the correct data that is in the TD elements, you would need to add ID tags to the hidden input fields so that you can program the javascript to update these as well as the TD elements.
I've added the IDs hiddenpricetag and hiddensize to the two hidden fields.
Your javascript function should be somewhat like this:
function addCharge(select, elemIndex)
{
var item = select.getElementsByTagName('option')[elemIndex];
var price = document.getElementById('pricetag');
var sizeDOM = document.getElementById('item');
var hiddenpricetag = document.getElementById('hiddenpricetag');
var hiddensize = document.getElementById('hiddensize');
var finalPrice = "";
/* Getting the price and showing it up */
finalPrice = parseFloat(item.text.substring(11, item.text.length-1));
/* We set a default £25.00 value */
if(isNaN(finalPrice)) finalPrice = "25";
/* we add decimal */
price.innerHTML="£"+finalPrice+".00";
/* Getting the size and showing it up */
var size = item.text.substring(0,7);
sizeDOM.innerHTML = size;
/* Altering the hidden field values */
hiddenpricetag.setAttribute("value", "£"+finalPrice+".00");
hiddensize.setAttribute("value", size);
}
JSFiddle can be found here: http://jsfiddle.net/J4rXX/7/