Question

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

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).