How can I use AJAX in magento for retrieve data when change the drop-down?

Question

I have created two drops down for height and width. data will be retrieved from the database table. below code represent that it's in my .phtml file

<select id="width">
<?php
foreach($width as $w){ ?>
    <option value="<?php print_r($w['width']);?>"><?php print_r($w['width']);?></option>
<?php
}
?>
</select>
<select id="height">
<?php
foreach($height as $h){ ?>
    <option value="<?php print_r($h['height']);?>"><?php print_r($h['height']);?></option>
<?php
}
?>
</select>

according to a selected value, there is some calculation such as area I have done those using jquery that code in .js file

There is a price according to selected width and height I need display the price by retrieving from database table I have created query for that like below

<?php
    $sql = " SELECT price_component FROM base_price WHERE width='W' AND height='H' ";
    $selected = $connection->fetchAll($sql);

    foreach($selected as $s){
        ?><b><p>base price :
        <?php
        print_r($s['price_component']);
    }
?></p></b>

I need to get selected value so I can use it as 'W' and 'H'

How can I do that please help me with this case

Answer 1

You need to create a module and in this module create a controller and function where you can do your calculation.

<?php

class Test_Ajaxcall_AjaxController extends Mage_Core_Controller_Front_Action
{

    public function ajaxAction()
    {
        do here your work and return result
    }

}

in phtml file call this controller

$j.ajax({
    url: "<?php echo $this->getUrl('frontName/actionControllerName/actionMethod/') ?>",
    type: "POST",
    data: ,
    success: function(data) {
    alert(data);
    $j('#results').html(data);
    }
});