Question

I have a database that has a table called products, and into the table I have the title, the artist and some other rows that have infos for each product. I have learned to display the data from the database, and I also found a way to display data only from one category . That sounds easy. But I want to combine all this with a drop down menu where the user can select the category he wants to see from a list. How can I make this? I think that I have to use javascript but some examples that I found doesn t refer to javascript at all.

Here is the code that i display all the data from my database:

<?php
$con = mysql_connect("localhost","root","password");
mysql_query('SET NAMES UTF8');
if (!$con)
{
    echo "problem with connection" .mysql_error();
}
?>
<?php
mysql_select_db("myapp",$link);
$result = mysql_query('SELECT * FROM products',$link);
while($row = mysql_fetch_array($result))
{
    $myimage = '<img src="'.$row['image'].'" />';

    echo  "<div id='appear'>" . $myimage . '<br />' . $row['title'] .  "<br   
 />" . "<p style='color:red;' >" . "myprice " . $row['price'] . "€" . "</p>". 
 '<a href="image.php?id='.$row['id'].'">'
    . "details" . "<a>" . "</div>" ;                                       
}
mysql_close($link);

  ?>

And here is the code that I display data only from one category:

<?php
mysql_select_db("myapp",$link);
$result = mysql_query('SELECT * FROM products WHERE category="cd"',$link);
while($row = mysql_fetch_array($result))
{
    $mycategory = $row['category'];
    $myimage = '<img src="'.$row['image'].'" />';
    echo  "<div id='appear'>" . $myimage . '<br />' . $row['title'] .  "<br   
/>" . 
    "<p style='color:red;' >" . "price " . $row['price'] . "€" . "</p>". '<a  
href="image.php?id='.$row['id'].'">'
    . "details" . "<a>" . "</div>" ;  
}
mysql_close($link);

?>

and here is my very simple html drop down menu

<select name="singlelist" id="singlelist" size="1" >
<option value="mycd" >CD</option>
<option value="mydvd" >DVD</option>
<option value="other" >other</option>
</select>

I haven t mentioned that I want to have 2 drop down lists, where the user will select subcategory, but I do believe that if I understand how all this works, I will be able to make it work.
Has anyone else came throught this before?

ps: I use the mysql_* functions because it s for a project in school

Answer 1

Just like Jared said you could seperate the php page and load the data on to a div. You can trigger the php page to load on a div with a javascript function and also trigger this function with an onselect() or onchange().

I hope this example code helps.

HTML:

<script type="text/javascript">
    function getList(cat, url, containerid){
        var xhr=false;
        if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            }
            else {
                if (window.ActiveXObject) {
                    try {
                        page_request = new ActiveXObject("Msxml2.XMLHTTP")
                    } 
                    catch (e){
                        try {
                            page_request = new ActiveXObject("Microsoft.XMLHTTP")
                        }
                        catch (e){
                        }
                    }
                }
            }

            if (xhr) {
                var params = "?list="+cat 
                xhr.onreadystatechange = showContents;
                xhr.open("GET", url+params, true);
                xhr.send(null);
            }
            else {
                alert("Sorry, but I couldn't create an XMLHttpRequest");
            }

        function showContents(){
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    var outMsg = xhr.responseText;
                }
                else {
                    var outMsg = "There was a problem with the request " + xhr.status;
                }

                document.getElementById(containerid).innerHTML=xhr.responseText;
            }

        }
    }

</script>

    <select name="singlelist" id="singlelist" size="1" onchange="getList(this.options[this.selectedIndex].value, 'php_file.php', 'container')" >
    <option value="cd" >CD</option>
    <option value="dvd" >DVD</option>
    <option value="other" >other</option>
    </select>
    <div id="container"> </div>

You should pass 3 params on the getList function:
first the category then the php file and lastly the div id.

like this example

onchange="getList('category', 'php_file', 'div_id')"

PHP:

<?php
  if(isset($_GET['list'])){
    mysql_select_db("myapp",$link);
    $result = mysql_query('SELECT * FROM products WHERE category="'.$_GET['list'].'"',$link);
    while($row = mysql_fetch_array($result))
    {
        $mycategory = $row['category'];
        $myimage = '<img src="'.$row['image'].'" />';
        echo  "<div id='appear'>" . $myimage . '<br />' . $row['title'] .  "<br   
    />" . 
        "<p style='color:red;' >" . "price " . $row['price'] . "€" . "</p>". '<a  
    href="image.php?id='.$row['id'].'">'
        . "details" . "<a>" . "</div>" ;  
    }
    mysql_close($link);  
  }
?>

I hope this helps. Also you may want to visit this blog http://crisostomozaidem.blogspot.com/ there are some helpfull tips in here about php.