如何使用onclick获取图像的路径并将其保存在一个变量中

how to get image´s path with onclick and save it in a variable

本文关键字：存在 变量 一个 保存 获取 onclick 何使用 图像 路径      更新时间：2023-09-26

这是我的html:

<form action="submitPage.php" method="post" onsubmit="savePathInVar();"> 
  <table>
  <tr>
    <td><img id="' . $id . '" src="inventory_images/' . $id . '.jpg" onclick="changecolor();" /></td>
    <td><img id="' . $id . '" src="inventory_images/' . $id . '.jpg" onclick="changecolor();" /></td>
  </tr>
    <input type="hidden" value="ClickedImaged" />
    <input type="submit" value="Submit" />          
  </table>
</form>

现在我需要一个功能changeColor()来突出显示一个点击图像。savePathInVar()功能将所点击图像的路径保存在输入隐藏字段中。有人能帮我吗?ps:这就是$id的来源:

$sql = mysqli_query($mysqli, "SELECT * FROM products WHERE id='$id' LIMIT 1");
$productCount = mysqli_num_rows($sql); // count the output amount
if ($productCount > 0) {
    // get all the product details
    while($row = mysqli_fetch_array($sql)) {
         $id = $row["id"];
         $id = "img.$id";
                     blabla...
如果有人能帮助我，那就太好了。我对javascript很陌生:)

由op添加到答案中，属于问题

编辑:

我在做别人的作业吗

UPDATE 3, my whole code:

<script>
function changecolor(img)
{
var images = document.getElementsByTagName("img");
for(var i=0,j=images.length; i<j; i++)
{
    images[i].style.borderColor="#000";
}
img.style.borderColor="#F00";
//Operate on img location as before
savePathInVar(img.src);
}
function savePathInVar(ImgLocation)
{
var form = document.createElement("form");
var inp = document.createElement("input");
inp.name="imgSrc";
inp.value=ImgLocation;
form.appendChild(inp);
form.method="post";
form.submit();//this will refresh the page
}
</script>
<form name="form_name" action="submitPage.php" method="POST" onsubmit="savePathInVar();">
<table>
  <tr>
    <td><img src="<?php echo $path; ?>" onclick="changecolor(this);" /></td>
    <td><img src="<?php echo $path; ?>" onclick="changecolor(this);" /></td>
  </tr>
  <input type="submit" value="Submit" />
</table>
</form>

和我的submitPage.php:

<?php
error_reporting (E_ALL | E_STRICT);
ini_set ('display_errors' , 1);
$imgSrc = $_POST['imgSrc'];
echo $imgSrc;
?>

当我标记图像并点击"提交"时，我得到:

注意:未定义的索引:imgSrc在/srv/disk8/1391019/www/myfirststore.eu.pn/submitPage.php第5行

我该怎么做??您好，谢谢您的帮助。

将onclick="changecolor();"更改为onclick="changecolor(this);" 

function changecolor(img)
{
    savePathInVar(img.src);
}
function savePathInVar(ImgLocation)
{
    //Do what you want with ImgLocation
}

取消显示除一个img以外的所有图像:

function changecolor(img)
{
    var images = document.getElementsByTagName("img");
    for(var i=0,j=images.length; i<j; i++)
    {
        images[i].style.borderColor="#000";
    }
    img.style.borderColor="#F00";
    //Operate on img location as before
    savePathInVar(img.src);
}

更新2

要将图像src提交到php，创建一个表单并发布:

function savePathInVar(ImgLocation)
{
    var form = document.createElement("form");
    var inp = document.createElement("input");
    inp.name="imgSrc";
    inp.value=ImgLocation;
    form.appendChild(inp);
    form.method="post";
    form.submit();//this will refresh the page
}
php: 

$imgSrc = $_POST['imgSrc'];
相关文章：