CODEWITHSUNDEEP
phpjavascriptjqueryforms
Sarah James
Sarah James

Reputation: 433

changing the price depending on the size and showing the size

I have been trying to do this for days but I can't seems to make it work. I want to change the price depending on the shoe size the user selected. But I NEED TO KNOW WHAT SIZE THE CHOOSE on the checkout.php. My checkout.php is already working but I need to get the size and also the prize for that size. In the select options i have indicate the prices and what size the price is for.Please help.

<div class="content_half float_r">
    <form id="add2cart" name="cart" method="Post" action="<?php fetchdir($bpages); ?>cart.php">
             <table>
                    <tr>
                        <td width="160">Price:</td>
                        <td name="price" id="price"><?php echo $row ['Start_Cost']; ?></td>

                    </tr>

                <tr>
                 <td for="size" width="160">size*:</td>
                <td>
                <select name="size" class="small" id ="size">
                                <option value="">12 size</option> // the price tag already have the start_Cost for this size
                        <option value="">14 size(£30.00)</option>
                    <option value="">16 size(£35.00)</option>
                        <option value="">18 size(£40.00)</option>
                    <option value="">20 size(£45.00)</option>
                        <option value="">22 size(£55.00)</option>
                            <option value="">24 size(£60.00)</option>
                    <option value="">26 size(70.00)</option>
                            <option value="">28 size(£80.00)</option>
                   </select>
                </td>

                </tr>   
        <tr>
             // you choose size
            <td> size: // the size the person choose will go down here
             </td>

    </tr>   

            <tr>
                        <td>Quantity</td>
                        <td><input type="text" name="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>             
            </div>

Upvotes: 1

Views: 1767

Answers (2)

zsawyer
zsawyer

Reputation: 1854

Here is a working example for you LIVE DEMO.

Note how I added <span>s to be able to insert the texts at the position I want. I also added some ids to help with selecting the right DOM elements.

Here is the JavaScript based on jQuery.

// initially provide data
var shoeData = {
    12: 25,
    14: 30,
    16: 35
}

$(function () {    
    $(document).ready(function () {
        // dynamically create the options in the select
        $.each(shoeData, function (key, value) {
            $("#size").append($("<option>", {
                "value": key,
                    "text": key + " size(£" + value + ")"
            }));
        });
        // display the initial data
        updateHandler();
    });    

    // register for update events on the input fields
    $("#size").on('change', updateHandler);
    $("#qty").on('input', updateHandler);
});

// handle update events (when an input field was changed)
function updateHandler() {
    // accumulate the data
    var value = $("#size").val();
    var quantity = $("#qty").val();
    var price = shoeData[value];
    var endPrice = price * quantity;

    // display the data
    $('#priceDisplay').html(price);
    $("#sizeDisplay").html(value);
    $("#totalDisplay").html(endPrice);
}

All you have to do is fill the shoeData object with data using php like so:

var shoeData = {
    12: <?php echo $row [ 'Start_Cost']; ?>,
    14: <?php echo "30"; ?>,
    16: <?php echo $priceForSize16; ?>,
}

When a customer changes the shoe size or quantity the total, price and shoe info is updated by simply writing the string into the "html" attribute of the appropriate spans.

Your cart.php will receive the form as expected - meaning you will get "Qty" and "size". You will have to look up the price in PHP based on the value from $REQUEST["size"] and then multiply it by the value of $REQUEST["Qty"] to get the total.

Upvotes: 0

zsawyer
zsawyer

Reputation: 1854

First off you probably simply want to send the shoe size by supplying it to the option's value attribute. The text inside the option is only a label. 

<option value="12">12 size</option>

Second and most important: You do never ever want the client to tell you what the price is!!! NEVER! If a hacker comes along he could easily submit the form with size set to 12 and price set to 0. You do not want to send those for free do you? Hack, might even have to refund him if he sends a negative value. So please modify your PHP script to calculate/lookup the price from an internal array or something. Or make sure you at least thoroughly validate the input.

To update the price you can use a jQuery.ajax call to a php script that simply takes the shoe size and returns the price. Have a look at this jsFiddle for what I mean. You will have to replace the the ajax URL with a new php script of yours. Read up on the ajax documentation to figure out how to properly pass your input and output data. Before writing the data you could also then multiply the price with the quantity.

Upvotes: 1

Related Questions