Question

Let’s say for sake of argument I have:

<select id="lvl1">
</select>
<div id="lvl2">
    <select id="lvl2a">
    <select id="lvl2b">
    <input text id="lvl2c">
</div>
<select id="lvl3">
</select>

in file1.php and I would like to populate <select id="lvl3"> with the results of a query which would essentially look like:

SELECT * FROM lvl1 WHERE fld_a = lvl2a AND fld_b = lvl2b AND fld_c = lvl2c

The snag is lvl2 is created dynamically in an external js file (file2.js) based on what the user chooses in lvl1. From everything I have seen it would seem I want to use JSON for this but how would I call a PHP function located in file3.php from an external js file, file2.js and return those results as an array to populate lvl3 in file1.php?

Hopefully I have explained myself well enough. Thank you in advance.

Answer 1

You’re going to need to refactor how your markup is generated in order to get this to work. Here’s how I would do it:

1. lvl1 is spit out from your PHP script when the page loads.
2. After the user chooses something in lvl1, you fire off an AJAX request back to the server with what they chose.
3. The server responds with the markup for lvl2 which you inject into the page.
4. If needed, do the same after the user selects something from lvl2 to fetch the content of lvl3.
5. Finally, submitting the form would relay all the selected data to your form processing script, where you will validate the responses and do whatever else it is that you’re doing.

That should be enough to get you going.