Tedd's Simple Ajax Demo

CAR MODEL

Make: Chev - Model: Camaro

 
CODE FOLLOWS -- index.php


<?php include("includes/header.php"); ?>

<h1> Tedd's Simple Ajax Demo </h1>

<?php include("helper.php"); ?>

<?php include('includes/footer.php'); ?>
CODE FOLLOWS - helper.php

<?php

    if (!session_id())
        {
        session_start();
        }

    // init SESSIONs
    $_SESSION['car'] = isset($_SESSION['car']) ? $_SESSION['car'] : 0;
    $_SESSION['model'] = isset($_SESSION['model']) ? $_SESSION['model'] : 0;

    // follow GET
    $car = isset($_GET['car']) ? $_GET['car'] : $_SESSION['car'];
    $model = isset($_GET['model']) ? $_GET['model'] : $_SESSION['model'];

    // init arrays
    $cars = array("Chev", "Dodge", "Ford");
    $models = array(
            array("Camaro", "Equinox", "Tahoe"),
            array("Challenger", "Charger", "Durango"),
            array("Explorer", "Mustange", "Puma")
    );

    // if car has changed then model must be 0 (first index in models array)
    if ($_SESSION['car'] != $car)
        {
        $model = 0;
        }

    // populate SESSIONs
    $_SESSION['car'] = $car;
    $_SESSION['model'] = $model;

    $url = "helper.php";

?>

<div id="myspan">     <!-- start of myspan -->

    <table class="full">
        <tr>
            <th>
                CAR
            </th>
            <th>
                MODEL
            </th>
        </tr>
        <tr>
            <td class="center">

                <select name="car" onchange="get(this.parentNode, '<?php echo($url); ?>');">

                    <?php

                        foreach ($cars as $key => $value)
                            {
                            if ($key == $car)
                                {
                                echo("<option value=$key selected >$value");
                                $carName = $value;
                                }
                            else
                                {
                                echo("<option value=$key >$value");
                                }
                            }
                    ?>
                </select>
            </td>
            <td class="center">
                <select name="model" onchange="get(this.parentNode, '<?php echo($url); ?>');">
                    <?php

                        foreach ($models as $temp => $mData)
                            {
                            if ($car == $temp)
                                {
                                foreach ($mData as $key => $value)
                                    {
                                    if ($key == $model)
                                        {
                                        echo("<option value=$key selected >$value");
                                        $modelName = $value;
                                        }
                                    else
                                        {
                                        echo("<option value=$key >$value");
                                        }
                                    }
                                }
                            }
                    ?>
                </select>
            </td>
        </tr>
    </table>

    <?php echo("<h2> Make: $carName - Model: $modelName </h2>"); ?>
</div>
CODE FOLLOWS - ajax.js

// AJAX GET

var http_request = false;

function makeRequest(url, parameters)
    {
        http_request = false;
        if (window.XMLHttpRequest)  // Mozilla, Safari,...
            {
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType)
                {
                http_request.overrideMimeType('text/html');
                }
            }
        else
            {
            if (window.ActiveXObject)  // IE
                {
                try
                    {
                    http_request = new ActiveXObject("Msxml2.XMLHTTP");
                    }
                catch (e)
                    {
                    try
                        {
                        http_request = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                    catch (e)
                        {
                        // do nothing
                        }
                    }
                }
            }
        
        if (!http_request)
            {
            alert('Cannot create XMLHTTP instance');
            return false;
            }
        
        http_request.onreadystatechange = alertContents;
        http_request.open('GET', url + parameters, true);
        http_request.send(null);
    }

function alertContents()
    {
        if (http_request.readyState === 4)
            {
            if (http_request.status === 200)
                {
                result = http_request.responseText;
                document.getElementById('myspan').innerHTML = result;
                }
            else
                {
                alert('There was a problem with the request.');
                }
            }
    }

function get(obj, url)
    {
        var getstr = "?";
        var i;
        
        for (i = 0; i < obj.childNodes.length; i++)
            {
            if (obj.childNodes[i].tagName === "INPUT")
                {
                if (obj.childNodes[i].type === "text")
                    {
                    getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
                    }
                
                if (obj.childNodes[i].type === "checkbox")
                    {
                    if (obj.childNodes[i].checked)
                        {
                        getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
                        }
                    else
                        {
                        getstr += obj.childNodes[i].name + "=&";
                        }
                    }
                
                if (obj.childNodes[i].type === "radio")
                    {
                    if (obj.childNodes[i].checked)
                        {
                        getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
                        }
                    }
                }
            
            if (obj.childNodes[i].tagName === "SELECT")
                {
                var sel = obj.childNodes[i];
                getstr += sel.name + "=" + sel.options[sel.selectedIndex].value + "&";
                }
            
            if (obj.childNodes[i].type === "textarea")
                {
                getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
                }
            }
        makeRequest(url, getstr);
    }