How to pass value of the variable $sku from a form to template via ajax?

Question

I have the form that generate value of the variable $sku. Depending on how the form is filled the variable can take several values: $sku = 'product1', $sku = 'product2', $sku = 'product3' etc. How can I pass this value to my phtml template which contains the following code?:

<?php
$sku = ?????
$model = Mage::getModel('catalog/product')->getCollection()
    ->addAttributeToSelect(array('price','name','description', 'thumbnail'))
    ->addAttributeToFilter('sku', '$sku')
    ->getFirstItem();

$price = $model->getPrice();
$name = $model->getName();
$image = $model->getThumbnail();
$description = $model->getDescription();
?>

My javascript:

 $j("#wizard-start").show();
    if ($j("#choice1").click(function () {
            $j("#wizard-start").hide();
            $j("#step-2-basic").fadeIn(1e3);
            $j("#dyn-wizard").submit(function(event) {
                var sku = "product1";
            });
            return false
        }));
    if ($j("#choice2").click(function () {
            $j("#wizard-start").hide();
            $j("#step-2-standart").fadeIn(1e3);
            $j("#dyn-wizard").submit(function(event) {
                var sku = "product2";
            });
            return false
        }));
    if ($j("#choice3").click(function () {
            $j("#wizard-start").hide();
            $j("#step-2-advanced").fadeIn(1e3);
            $j("#dyn-wizard").submit(function(event) {
                var sku = "product3";
            });
            return false
        }));

Answer 1

1. Register new module:

app/etc/modules/SeStro_AjaxProductInfo.xml

<?xml version="1.0" encoding="UTF-8" ?>
<config>
    <modules>
        <SeStro_AjaxProductInfo>
            <active>true</active>
            <codePool>local</codePool>
        </SeStro_AjaxProductInfo>
    </modules>
</config>

2. Add new router:

app/code/local/SeStro/AjaxProductInfo/etc/config.xml

<?xml version="1.0" encoding="UTF-8" ?>
<config>
    <frontend>
        <routers>
            <sestro_ajax_product_info>
                <use>standard</use>
                <args>
                    <module>SeStro_AjaxProductInfo</module>
                    <frontName>ajaxproductinfo</frontName>
                </args>
            </sestro_ajax_product_info>
        </routers>
    </frontend>
</config>

app/code/local/SeStro/AjaxProductInfo/controllers/IndexController.php

<?php

class SeStro_AjaxProductInfo_IndexController
    extends Mage_Core_Controller_Front_Action
{
    public function indexAction() {
        $sku = $this->getRequest()->getParam('sku');
        if (!$sku) { return false; }
        $product = Mage::getModel('catalog/product')->loadByAttribute('sku',$sku);
        if (!$product) { return false; }

        $response = [
            $product->getPrice(),
            $product->getName(),
            $product->getThumbnail(),
            $product->getDescription(),
        ];

        $this->getResponse()->setHeader('Content-type', 'application/json');
        $this->getResponse()->setBody(json_encode($response));
    }
}

3. And modify your templatefile:

<script>
    var url = '<?php echo Mage::getUrl('ajaxproductinfo'); ?>';
    function getProductInfo(sku) {
        var params = {sku: sku};
        jQuery.ajax({
            url: url,
            type: 'POST',
            data: params,
            dataType: 'json',
            success: function(response) {
                if (response) {
                    var [price, name, image, description] = response;

                    // now you could use jQuery to put
                    // price, name, image and description
                    // anywhere you want

                }
            }
        });
    }

    jQuery("#choice1").click(function () {
        jQuery("#wizard-start").hide();
        jQuery("#step-2-standart").fadeIn(1e3);
        getProductInfo('[sku]'); // change sku
        return false
    });

    jQuery("#choice2").click(function () {
        jQuery("#wizard-start").hide();
        jQuery("#step-2-standart").fadeIn(1e3);
        getProductInfo('[sku]'); // change sku
        return false
    });

    jQuery("#choice3").click(function () {
        jQuery("#wizard-start").hide();
        jQuery("#step-2-standart").fadeIn(1e3);
        getProductInfo('[sku]'); // change sku
        return false
    });
</script>

Answer 2

if you are submitting sku alongside the form, then you can easily access it via Mage::app()->getRequest()->getParam('sku'). If the name attribute of your sku field is something other than the 'sku' then you can change that in the getParam() method.