I have an HTML dropdown list which i'm populating from a database. My question is how can i retrieve the value of a selected item from this dropdown list using AJAX? Here is my code:
Code:
<script type = "text/javascript">
function getData(str){
    var xhr = false;
    if (window.XMLHttpRequest) {
            // IE7+, Firefox, Chrome, Opera, Safari
            xhr = new XMLHttpRequest();
        } 
        else {
            // IE5/IE6
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        if (xhr) {
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    document.getElementById("div1").innerHTML = xhr.responseText;
                }
            }
            xhr.open("GET", "/display-product.php?q="+str, true);
            xhr.send(null);
        }
}
</script>
This is my HTML drop down list:
Code:
<div>
          <?php
           echo '<select title="Select one" name="selectcat" onChange="getData(this.value)">';
           while($row1 = $result->fetch_assoc()){            
           echo '<option value="' . $row1['id'] . '">' . $row1['category'] . '</option>';
            }
           echo '</select>';
            ?>
            </div>
And this is the div where i want the selected contents to be printed:
Code:
<div class="product_directory" id="div1"></div>
The code doesn't work for some reason. Thanks in advance for any help