Question

Ok, so either I can’t search the web properly, or I can’t understand, the point of my search results, but after several days of searching and trying to do it by my own, I still have no simple and understandable answer!

I have a flight search form with select boxes.
Select box results are populated via PHP from MySQL.

Example:

Forward flight:

Departure city – “London”

Destination city – All cities exept London

Flight date – All flight dates for flight London->Forward Destination
City

Backward flight:

Departure city – Again all cities exept London

Destination city – All cities exept Backward Departure City

Flight date – All flight dates for flight Backward Departure
City->Backward Destination City

I have no problem making this form using only PHP and form GET method, but, of course, I’d like to get rid of page reloading. Obvious solution – AJAX.

My approach:

1. Use onChange event on select box for calling javascript function with attribute ‘this.value’
2. javascript function sends XMLHttpRequest to the server (.php file) with GET method
3. .php file contains functions with MySQL requests, that are called with simple “if ($_GET[‘value_sent_with_javascript_function’])”
4. javascript function places php responce in a div – document.getElementById(“div_id”).innerHTML=xmlhttp.responseText;

This works fine for two fileds (first one is “parent”, the second one – “child” – is populated depending on “parent” box selected value). But if i want to use same method to populate third field (the one that is dependant on “child”), it’s just doesnt’ work. As I’m not the specialist in javascript, I just can’t figure this out.

I bet there is a simple solution!

Answer 1

A simple example that should set you on your way:

Main.php file

    <script type="text/javascript">
    function loadXMLDoc(step)
    {
        var showPage;
        var rrestultBox;

        if (step==1)
        {
            showPage = 'destination.php?select=' + document.getElementById('departure').value;
            resultBox = 'destinationBox';
        }
        if (step==2)
        {
            showPage = 'times.php?select=' + document.getElementById('destination').value;
            resultBox = 'timesBox';
        }
        var xmlhttp;
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        } else {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
            xmlhttp.onreadystatechange=function()
        {

        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById(resultBox).innerHTML=xmlhttp.responseText;
        }
    }
        xmlhttp.open("GET",showPage,true);
        xmlhttp.send();
    }
</script>
<form name="selectBoxes">
    <select name="departure" id="departure" onchange="loadXMLDoc(1);">
        <option value="sydney">Sydney</option>
        <option value="canberra">Canberra</option>
        <option value="Melbourne">Melbourne</option>
    </select>
</form>
<div id="destinationBox"></div>
<div id="timesBox"></div>

destination.php

<form name="selectBoxes">
    <select name="destination" id="destination" onchange="loadXMLDoc(2);">
        <option value="sydney">Sydney</option>
        <option value="canberra">Canberra</option>
        <option value="Melbourne">Melbourne</option>
    </select>
</form>

times.php file

<form name="selectBoxes">
<select name="times" id="times"">
    <option value="">1pm</option>
    <option value="">2pm</option>
    <option value="">3pm</option>
</select>

watch it in action: here

**updated, forgot to add ‘destination.php’