使用下拉框在同一頁上顯示圖像

我使用當前的代碼來顯示圖像，取決於從下拉框中選擇的內容，但我正在使用go按鈕。我想從下拉框中選擇圖片來顯示圖片。任何幫助將不勝感激使用下拉框在同一頁上顯示圖像

<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>&nbsp;</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>

來源

2015-12-22 baxterxc60

你需要一個純JavaScript的解決方案即可。谷歌爲選擇框上的'更改'處理程序，你應該沒問題。 – Jan

'Table'是保留在mysql中的關鍵字它必須在bachtick http://dev.mysql.com/doc/refman/5.7/en/keywords.html – Saty

舉個例子，以你怎麼可能做到這一點，而無需每次都重新加載頁面，下面可能是有用的。 javascript函數附加（內聯）到實際的select元素而不是按鈕，並在onchange事件中調用。所選元素的值在ajax函數中使用，並通過POST請求發送到處理請求的腳本部分，並執行數據庫查找以查找圖像。您將需要修改該部分代碼以返回正確的圖像...該響應由ajax回調函數處理。

但是請注意，使用mysql_*函數現在因爲sql注入的風險而不鼓勵，所以在深入研究之前，您可能需要考慮學習關於mysqli或PDO的地方，您可以使用預準備語句這有助於緩解這種風險。您原來，和我的代碼，嵌入這是壞的SQL中的POST VAR ......這只是舉例，雖然「 - ）

<?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>

來源

2015-12-22 09:04:23 RamRaider

我在做的最初代碼是首先查詢數據庫填充特定用戶的項目數據庫中的值。第二個查詢是，然後從下拉框中選擇該項目，獲取該項目的關聯ID號碼，並將其格式化爲照片目錄中的圖像文件名。 idnum = 235圖片ID將等於p.235n.jpg。在你的例子中，你只是使用預定義的下拉框。你能否詳細說明我在找什麼？我真的很感謝你的幫助...... – baxterxc60

使用下拉框在同一頁上顯示圖像

回答

相關問題