Question

Hey, I’m having some trouble with this problem, and I don’t even know where to start.
I’m using foxycart for an ecommerce website I’m building for my girlfriend, so sending values to the “cart” is limited to the input names foxycart is looking for.
IE; name, price, product_sku.

I have a tiny CMS backend that allows you to add different sizes, sku’s for those sizes and a different price for that size.

So, being that I’m using foxycart, I need hidden inputs to send the values to the cart.

<input type="hidden" name="name" value="Test" />
<input type="hidden" id="price" name="price" value="19.99" />
<input type="hidden" id="product_sku" name="product_sku" value="sku3445" />
<input type="hidden" id="product_id" name="product_id" value="123" />

This works good. sends the name, price and sku to the cart.

I’ve made a drop down box that lists the different sizes/prices related to that product. I’ve set it up so that selecting a different size changes the price:

<select id="single" name="options" />
<option name="option_price" value="19.99">Default - $19.99</option>
<option name="option_price" value="18.99">Test Size: 18.99</option>
</select>

function displayVals() {
var singleValues = $("#single").val();
("#item_price").html(singleValues);
$("#price").val(singleValues);
}
$("select").change(displayVals);
displayVals();

This works too, send the price selected to a div and the hidden price input(so you can see the new purchase price) and to the cart(so the cart is showing the price of the product you want to purchase)

And now for the question:
How do I set this up so that selecting a different size/price will change the hidden inputs so that the product_sku, and size name are updated along with the price?

I’m thinking I have to use some Jquery.ajax() call, but have no idea…

Would this work?:

Jquery:

$(document).ready(function(){
    $("form#get_stuff").change(function() {
    var product_id= $('#product_id').attr('value');

        $.ajax({
            type: "POST",
            url: get_stuff.php,
            data: "product_id="+product_id,
            success: function(data){
$('#product_inputs').html(data);    
            }
        });
    return false;
    });
});

the ‘data’ being:

from the php page?

This is my first foray into Jquery ajax, so I really have no idea.

Edit:

Sorry, I just read this over and it’s kind of confusing….
Here is the workflow I’m trying to accomplish:

Page loads:
using php, echo product name, price, sku. (This is the default)

Drop-box change:
using jquery, dynamically change the hidden inputs with new information based off the product_id, and the size selected from the drop-box (Update 4 hidden inputs based off the value from one value from a select menu)

Answer 1

Instead of using AJAX when the select box changes, you can also load the SKU and product ID when the page loads and add them as data on the option tags. One way to do this is to add them as classes like so:

<select id="single" name="options">
    <option name="option_price" class="sku3445 id123" value="19.99">Default - $19.99</option>
    <option name="option_price" class="sku3554 id321" value="18.99">Test Size: 18.99</option>
</select>

Then using a little RegEx you can extract these values from the selected option in your change() function and update the hidden inputs accordingly:

function displayVals() {
    var $single = $('#single'),
        singleValues = $single.val(),
        singleClasses = $single.find('option:selected').attr('class'),
        singleSKU = singleClasses.match(/\bsku\d+\b/)[0],
        singleID = singleClasses.match(/\bid\d+\b/)[0].replace('id','');

    $("#item_price").html(singleValues);
    $("#price").val(singleValues);
    $('#product_sku').val(singleSKU);
    $('#product_id').val(singleID);
}
$("select").change(displayVals);
displayVals();

Here is a working example →