Count value from list/menu in ajax

Question

Hello folks.. How to count values of two drop down using ajax or php

Example Form

Base Price : $10 Color [drop-down] Size [drop-down]

Base Price : $10 
<select name="color">
     <option>Blue</option>
     <option>White</option>
</select>

<select name="size">
     <option>8</option>
     <option>10</option>
</select>

Calculation

example I change color to blue = $10 
Price : $10 + $10 = $20

example I change Size to 8 = $5
Price : $10 + $5 = $15

Where to start & any good sources for me to look in detail?. :)

Answer 1

var total = 0;

$("#my-select option").each(function(){ 
    total += $(this).val();
});

Something like that might be interesting for you. I don't actually know, do you want to sum both selects together or just one by one? Well, the basic idea is the same, just loops through all option fields and sum their values :)

Answer 2

All you need is a JavaScript function for this one that is fired on the onchange event:

<script lang="javascript">
function calcPrice (size, color) {
    var newprice = 0;
    // do the math depending on size and color
    document.getElementById('price').innerHTML = newprice;
}
</script>

Base Price: $<div id="price">10<div>

<select id="color" name="color" onchange="calcPrice (document.getElementById('size').value, this.value);">
    <option>Blue</option>
    <option>White</option>
</select>

<select id="size" name="size" onchange="calcPrice (this.value, document.getElementById('color').value);">
    <option>8</option>
    <option>10</option>
</select>

The Base Price value will change dynamically based on a user's selection(s).

Answer 3

You should put values on your select options.

Ideally, these values assigned to each item would match up to an ID in a database and then you retrieve prices from the database on the next page. You wouldn't be able to put a price in the value because multiple things might be the same price.

<select name="color">
        <option value="1">Blue</option>
        <option value="2">White</option>
</select>

<select name="size">
        <option value="1">8</option>
        <option value="2">10</option>
</select>

Then when the form is submitted on the next page you'd get these IDs and query the database with these IDs for the total price.

$size_id = $_POST['size'];
$color_id = $_POST['color'];

When generating the page you could also put the price in the value along with the ID, so that it could still be parsed with javascript to update the item price on the page when they make a selection.

<select name="color">
        <option value="1-10">Blue</option>
        <option value="2-15">White</option>
</select>

<select name="size">
        <option value="1-5">8</option>
        <option value="2-6">10</option>
</select>

Then you could split by '-' in javascript and the second entry would be the price.

When the form is submitted, you could again split by '-' in php and the first entry would be the option id in the database so you know what options they chose with their product.

This is a simple explanation, but I hope it helps you a bit.