Отображение изображения на той же странице с помощью выпадающего списка
Я использую текущий код для отображения изображения в зависимости от выбора из выпадающего списка, но я использую кнопку перехода. Я хочу отобразить изображение, выбрав его из выпадающего списка. Любая помощь будет принята с благодарностью
<form name="product" method="post" action="">
<table align="right" width="10%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Category</td>
<td>
<select name="idnum">
<?php
$sql = "SELECT ID,idnum,title,brief FROM table where passw='tsmith';";
$result = mysql_query($sql);
while ($row = mysql_fetch_assoc($result)) {
?>
<option value="<?= $row['idnum']; ?>"><?= $row['title']; ?></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
$idnum = (int)$_POST['idnum'];
$sql_search = "SELECT * FROM table WHERE idnum = $idnum";
$search = mysql_query($sql_search);
if (isset($_POST['go'])) {
while ($row = mysql_fetch_assoc($search)) {
$imagepath1= "p".$idnum."n1.jpg";
$path='/components/com/photos/'.$imagepath1;
$image1 =("<img src='$path' width='200' height = '221'/>");
echo $image1;
?>
<img src = "/components/com/photos/p.$row['idnum'].n.jpg">;
<li><a href="<?= $row['title']; ?>"><img src="<?= $row['title']; ?>" border="0"></a></li>
<?php
}
}
else {
}
?>
</div>
Решение
В качестве примера того, как вы можете это сделать, не перезагружая страницу каждый раз, может быть полезным следующее. Функция javascript присоединяется (встроено) к фактическому элементу выбора, а не к кнопке, и вызывается в onchange событие. Значение выбранного элемента используется в функции ajax и отправляется через POST запрос к части скрипта, которая обрабатывает запрос и выполняет поиск в базе данных, чтобы найти изображение. Вам нужно будет изменить эту часть кода, чтобы вернуть правильное изображение … Ответ обрабатывается функцией обратного вызова ajax.
Однако имейте в виду, что с помощью mysql_* Функции теперь не рекомендуется из-за риска внедрения SQL-кода, поэтому, возможно, прежде чем углубляться в детали, вы можете рассмотреть возможность изучения mysqli или PDO, где вы можете использовать подготовленные операторы, которые помогают снизить этот риск. Ваш исходный код и мой код встроили переменную POST в sql, которая является ПЛОХОЙ … хотя это только для примера ‘-)
<?php
/*
include whatever files needed & set session vars if required
*/
if( $_SERVER['REQUEST_METHOD']=='POST' ){
$idnum=$_POST['idnum'];
$sql="select * from `table` where `idnum`='$idnum';";
/* execute the query and generate the response */
exit("<img src='/components/com/photos/{$imagepath1}' />");
}
?>
<!doctype html>
<html>
<head>
<title>Change image</title>
<script>
function changeimg(v){
http=new XMLHttpRequest();
http.onreadystatechange=function(){
if( http.readyState==4 && http.status==200 )cbchangeimg.call( this, http.response );
};
http.open('POST',document.location.href,true);
http.setRequestHeader('Content-type','application/x-www-form-urlencoded');
http.send('idnum='+v);
}
function cbchangeimg(r){
/* process response: change the image */
document.getElementById('myImg').src=r;
}
</script>
</head>
<body>
<img id='myImg' src='/images/placeholder.jpg' />
<select name='idnum' onchange='changeimg(this.value)'>
<option value=1>One
<option value=2>Two
</select>
</body>
</html>
Другие решения
Других решений пока нет …
detector