I have a php for each loop which outputs a form for every product in my database.
What I need help with is this bit of jquery
<script type="text/javascript">
// When the document is ready
$(function() {
$('#foo').change(function() {
var form = $(this).parents('form');
// Size is whatever the value the user has selected
var size = $(this).val();
var price,
itemId;
// Determine the correct price and item ID based on the selected size
switch (size) {
<?php
$var = 1;
foreach($subitem['sizes'] as $size) {
echo "\n";
echo "\t\t\t\t\t\tcase '".$size."':\n";
echo "\t\t\t\t\t\t\tprice = '".$subitem['price']."';\n";
echo "\t\t\t\t\t\t\titemId = '".$subitem['prodid']."-".$var."';\n";
echo "\t\t\t\t\t\t\tbreak;\n\n";
$var++;
}
echo "\t\t\t\t\t}";
?>
form.find('.price').text(price);
form.find('[name=my-item-price]').val(price);
// Update the item ID
form.find('[name=my-item-id]').val(itemId);
});
});
</script>
This is output the same time as the form and is essentially part of the form. What it does is when a user selects an option from a select list, it changes a hidden form element containing the price.
What i need to do is instead of hard coding the prices, have the prices taken from the database.
Becuase it loops through 4 records to populate the select list, it’s impossible to just echo the price in the switch statement. What i thought about doing was to have some global variables which is populated with the price from the database and then just use that global variable in the switch statement
I thought i could initialise the global variables here
//Create field for item name based upon record count
if(count($subitem['sizes']) > 1)
{
My code with the php and jquery
foreach($items AS $subitem)
{
list($prodid, $item ,$size, $description, $price) = $subitem;
//Create field for item name based upon record count
if(count($subitem['sizes']) > 1)
{
$item_name_field = "<ul><li><select name=\"my-item-name\" id=\"foo\">\n";
foreach($subitem['sizes'] as $size)
{
$item_name_field .= "<option value=\"{$size}\">{$size}</option>\n";
}
$item_name_field .= "</select></li></ul>\n";
}
else
{
$item_name_field = "<input type=\"hidden\" name=\"my-item-name\" value=\"{$subitem['item']}\" />";
}
//Creat the form
if ($count % NUMCOLS == 0) { echo "<tr>"; } //new row
echo "<td>\n";
echo "<form method=\"post\" action=\"\" class=\"jcart\">\n";
echo " <fieldset>\n";
echo " <input type=\"hidden\" name=\"jcartToken\" value=\"{$_SESSION['jcartToken']}\" />\n";
echo " <input type=\"hidden\" name=\"my-item-id\" value=\"{$subitem['prodid']}\" />\n";
echo " <input type=\"hidden\" name=\"my-item-price\" value=\"{$subitem['price']}\" />\n";
echo " <input type=\"hidden\" name=\"my-item-url\" value=\"http://yahoo.com\" />\n";
echo " {$item_name_field}\n";
echo " <ul>\n";
echo " <li>Price: $<span class=\"price\">{$subitem['price']}</span></li>\n";
echo " <li><label>Qty: <input type=\"text\" name=\"my-item-qty\" value=\"1\" size=\"3\" /></label></li>\n";
echo " </ul>\n";
echo " <input type=\"submit\" name=\"my-add-button\" value=\"add to cart\" class=\"button\" />\n";
echo " </fieldset>\n";
echo "</form>\n";
echo "</td>\n";
?>
<script type="text/javascript">
// When the document is ready
$(function() {
$('#foo').change(function() {
var form = $(this).parents('form');
// Size is whatever the value the user has selected
var size = $(this).val();
var price,
itemId;
// Determine the correct price and item ID based on the selected size
switch (size) {
case 'Small':
price = '10.00';
itemId = '1-a';
break;
case 'Medium':
price = '20.00';
itemId = '1-b';
break;
case 'Large':
price = '30.00';
itemId = '1-c';
break;
case 'X-Large':
price = '30.00';
itemId = '1-c';
break;
}
form.find('.price').text(price);
form.find('[name=my-item-price]').val(price);
// Update the item ID
form.find('[name=my-item-id]').val(itemId);
});
});
</script>
<?php
$count++;
if ($count % NUMCOLS == 0) { echo "</tr>\n"; } # end row
//$counter++; //Doesn't appear this is used
}
EDIT:
I’ve managed to get it working, sort of, but the prices are all the same.
What i need to do is assign the price of each size to the size.
<script type="text/javascript">
// When the document is ready
$(function() {
$('#foo').change(function() {
var form = $(this).parents('form');
// Size is whatever the value the user has selected
var size = $(this).val();
var price,
itemId;
// Determine the correct price and item ID based on the selected size
switch (size) {
<?php
$var = 1;
foreach($subitem['sizes'] as $size) {
echo "\n";
echo "\t\t\t\t\t\tcase '".$size."':\n";
echo "\t\t\t\t\t\t\tprice = '".$subitem['price']."';\n";
echo "\t\t\t\t\t\t\titemId = '".$subitem['prodid']."-".$var."';\n";
echo "\t\t\t\t\t\t\tbreak;\n\n";
$var++;
}
echo "\t\t\t\t\t}";
?>
form.find('.price').text(price);
form.find('[name=my-item-price]').val(price);
// Update the item ID
form.find('[name=my-item-id]').val(itemId);
});
});
</script>
You can render a json object form php code along with the markup and use it in the js as below