I want to show a category based shopping items with images on web page that can be found in the most Online shopping sites.I crated two mysql tables: Ist with id, category_name and 2nd with id, categoryid, product, image_path. I am able to display all product images at a time on page, but I don't know how to show product images of a single category selected from a dropdown list with submit button at the top of the page. I hope my point is clear to all otherwise feel free to ask me.
Below I attached my code that shows all the product images on my php page at a time without any dropdown list. Any ideas and advice on doing this is welcome.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
ul, li {
list-style-type:none;
}
ul.display {
width: 500px;
}
ul.display li {
float: left;
width: 100px;
height: 120px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
position: relative;
vertical-align:middle;
text-align:center;
}
ul.display li a img {
width: 94px;
height: 114px;
display: inline;
}
</style>
</head>
<body>
<div align="center">
<?php
include('connect.php');
$SQL = "SELECT * from becuart";
$result = mysql_query( $SQL );
echo "<ul class='display'>";
while( $row = mysql_fetch_array( $result ) ) {
$filepath = $row["path"];
echo "<li>";
echo "<a href=\"$filepath\"><img src=\"$filepath\" border=\"0\"></a>";
echo "</li>";
}
echo "</ul>";
?>
</div>
</body>
</html>`
Because it's way too long -> new answer:
<?php
include 'dbconnect.php';
?>
<form name="product" method="post" action="">
<table align="right" width="10%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Category</td>
<td>
<select name="category">
<?php
$sql = "SELECT id, art_name, path FROM category;";
$result = mysql_query($sql);
while ($row = mysql_fetch_assoc($result)) {
?>
<option value="<?= $row['id']; ?>"><?= $row['art_name']; ?></option>
<?php } ?>
</select>
</td>
</tr>
<tr>
<td> </td>
<td><input name="go" type="submit" value="Go" /></td>
</tr>
</table>
</form>
<div align="center">
<ul class='display'>
<?php
$id = (int)$_POST['category'];
$sql_search = "SELECT id, art_name, path FROM category WHERE id = $id";
$search = mysql_query($sql_search);
if (isset($_POST['go'])) {
while ($row = mysql_fetch_assoc($search)) {
?>
<li><a href="<?= $row['path']; ?>"><img src="<?= $row['path']; ?>" border="0"></a></li>
<?php }
}
else {
}
?>
</div>
SELECT id, name, path FROM table;
...
<select name ...>
<?php
while( $row = mysql_fetch_array( $result ) ) {
?>
<option name="id" value="<?= $row['id']; ?>"><?= $row['name']; ?></option>
<?php
}
?>
</select>
So by javascript/jquery open the img which answers on the POSTed $row['id']; (SELECT path FROM table WHERE id = ?;) or by a simple $_POST['id'] which is the name of the field