Not sure how to approach what I want to do

[Mike Askew]

So I currently have a listbox which dynamically generates its members from the database. It has name and id set to "availablePets".

When one of the items in the list is clicked I want to populate some other fields on the screen by quering the database for the rest of the data surrounding that one entry.

I am not sure how to link the onchange event to a javascript/jquery function that will in turn allow the page to fire off PHP again and populate the data? I gather that I will need to probably use jquery to do a ajax post to trigger the PHP?

Pointers in the right direction for resources on the topic would suit fine as this is uni work or some discussion around what logic is needed. I should be able to figure out the code.

[pritaeas]

I gather that I will need to probably use jquery to do a ajax post to trigger the PHP?

Correct.

What kind of list are you using, an li ?

$(document).ready(function() {
    $('li').on('click', function () {
        // $(this) points to the clicked li, if you need it's attributes
        // $.ajax() etc. 
        // in the .done() you can retrieve data returned by your PHP script
        //   easiest is usually when you return json
        //   you can then inject the new data into your DOM
        //   (you can also choose to return html and inject that)
    });
});

[Mike Askew]

I was using a <select> with size=x to make it into a Listbox

I know you can bind the onchange event of that, so just had to figure out how I then link that event to the pageload and populate. Would the above code work in that situation also?

[pritaeas]

$('select').on('change', function () {});

Basically, just the event name differs.

[Mike Askew]

Hmm still confused. Trying to avoid posting code.

I have

    <script type="text/javascript">
        function getPetDetails() {

        }
    </script>

Which is linked to the onupdate() of

<select name="availablePets" id="availablePets" size=10" onchange="getPetDetails()">

But not sure how it works from there still. May have to dumb it down for me, thought I could be clever!

[pritaeas]

Ok, you can go that way too.

<select name="availablePets" id="availablePets" size=10" onchange="getPetDetails()">

<script type="text/javascript">
    function getPetDetails() {
        // get the selected pet
        var selectedOption = $('#availablePets').val();

        $.ajax({
            url: 'your.php',
            data: { 'pet': selectedOption },
            method: 'POST'
        })
        .done(function (data) {
            // data contains results from your script, 
            // when the script is succesful
        });
    }
</script>

[Gideon_1]

In my applications I use the real ajax language i.e. new XMLHttpRequest () with the xmlhttp.onreadystatechange.

so in the the xmlhttp.send () I send the necessary parameters for the database queries to a php file through get. Example;

<script type="text/javascript">
    function load () {
        var xmlhttp = new XMLHttpRequest ();

        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById('ajax').innerHTML = xmlhttp.responseText;
            }
        }

        xmlhttp.open ('GET', 'ajax/debtors.php?id='+document.getElementById('id').value+'&table='+document.getElementById('year').value, true);
        xmlhttp.send ();
    }
</script>

so in the php file you grab the necessary values and the process the query. Don't forget to output the query results in the php file.

Also on the active page don't forget to add a div with id with which the ajax results will be displayed.

[Mike Askew]

I've abandoned this idea and simplified my goals just to get the project done in time. I would rather submit something than nothing at this point... Thanks for the inputs.