Newbie question

I would like to create a form where I would have a combo box with room numbers and once that is selected the loading of another combo box called asset number which would be loaded from a MYSQL table. I know how to load a combo box but I am unclear about how to force the population of the second once the first has changed without submitting the form. Any pointers?

Thanks

d

Like airline companies, select the "From" which then populates the available "Destinations"

That can be done with AJAX.

<select id="from" onchange="loadNextList(this);"><option........</select>

function loadNextList(this){

  gets the selected value

  sends this to the server which then performs a query

  the server then returns the possible options to the response which then is used to populate the "destination" <select>

}

<select id="from" onchange="loadNextList(this);"><option........</select>

Understand this....

function loadNextList(this){

  gets the selected value

  sends this to the server which then performs a query

  the server then returns the possible options to the response which then is used to populate the "destination" <select>

}

This is where I am fuzzy.... I am assuming that I make a regular MYSQL query and then load the options.... got any examples that you can point me to? Remember the title.... Newbie and I know next to nothing about AJAX but have a fair grip on PHP an MySQL.

d

I don't know if this will help but here is one example that might work.

Usually I use SPAN to populate from AJAX. You can place it anywhere you want and have it return new values.

For example you can put the options between a span and have the options change etc.

Sorry if it doesn't help you any.

HTML

-------

<span id="box1">

<select onchange="nextCombo(mySqlID)">

<option value="1">1</option>

        <option value="2">2</option>

</select>

</span>

<span id="box2"></span>

Ajax

------

function nextCombo(mySqlID) {

        ajax("box2", "getresult.php?boxcategory=", mySqlID);

}

function ajax(element, target, value) {

ajax = new XMLHttpRequest();

ajax.onreadystatechange = function() {

if (ajax.readyState == 4 && ajax.status == 200) {

document.getElementById(element).innerHTML = ajax.responseText;

}

}

ajax.open("GET", target + value,  true);

ajax.send(null);

}

PHP

------

<?php

if (isset($_GET['boxcategory'])) {

        // MYSQL COMMANDS HERE TO DRAW DOWN NEEDED INFORMATION FROM DATABASE

        ?>

        <select onchange="nextCombo2(mySqlID)">

        <option value="next1">next1</option>

                <option value="next2">next2</option>

        </select>

        <?php

}

?>