Question

I have a dropdown list(in a php file and without form tag)

print "<select id="animal" onchange="getSelectedItem(this.value)">
<option value = "Dog"> Dog </option>
<option value = "Cat"> Cat </option>
</select>";

and a variable $selAnimal

and a javascript function

function getSelectedItem(opt){
    //$selAnimal = opt <- how do i do this?
}

As much as possible I wouldn’t like the page to reload so I avoid putting this inside a form and submitting as I select. I can’t get to make $.post method work. I know for a fact that this cannot be directly done since php is server side and javascript is client side.
I also thought of putting the selected value inside a hidden component(span or something) and get the value from it. But I have no idea how to get it from the component. I’ve also seen use of AJAX or jquery but I’m not really knowledgeable enough.

I need to save this value to the php variable since I’ll be using it as basis for the options in my second dropdown. For example, if I choose Dog, the dropdown list would have dog breeds as options.

I’ve spent days looking for possible solutions everywhere. Help would be very much appreciated. Thank you!

Answer 1

here is the solution

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('#animal').change(function(){
    $.post('loadbreeds.php', { animal:$('#animal').val() },
        function(data){
            $('#breedList').html(data);
        });
    });
});
</script>

<form method="post" >
    <div id="animalList">
        <select id="animal" name="animal">
            <option value="">--Select--</option>
            <?php if (!empty($animals)) { foreach ($animals as $value) { ?>
                <option value="<?php echo $value['animalKey']; ?>"><?php echo $value['animalName']; ?></option>
            <?php }} ?>
        </select>
    </div>
    <div id="breedList">
        <select id="breed" name="breed">
            <option value="">--Select--</option>
        </select>
    </div>
    <input type="submit" value="Submit" />
</form>

code for loadbreeds.php

$animalKey = $_POST['animal'];
$breeds = selectByKey($animalKey); // code for selecting breeds

<select id="breed" name="breed">
    <option value="">--Select--</option>
    <?php if (!empty($breeds)) { foreach ($breeds as $value) { ?>
        <option value="<?php echo $value['breedKey']; ?>"><?php echo $value['breedName']; ?></option>
    <?php }} ?>
</select>