当用户单击图像时传递图像名称或图像id属性 - Passing Image name or image id attribute when user clicks the image

Passing Image name or image id attribute when user clicks the image

本文关键字：图像 id 属性用户单击 | 更新日期: 2023-09-27

我的要求是在用户单击图像时将图像名称传递给store.php。

根据图像名称，我将查询数据库并显示结果

但我不知道如何传递图片名称时，用户点击它。请建议。

代码如下：

<form action="store.php" method="post">
<div class="col-md-2 about-left">
                    <figure class="effect-bubba">
                        <img class="img-responsive" src="images/flip.jpg" id="flipkart" name="flipkart" alt=""/>
                        <figcaption>
                            <h2>FLIPKART</h2>
                        </figcaption>           
                    </figure>
                </div>
</form>

试试这个代码：-

function get_image_name(){
var src = $('img').attr('src').split('/');
var image_name = src[src.length - 1];
alert(image_name);
}

调用函数此函数在图像onclick:-上

<img class="img-responsive" src="images/flip.jpg" id="flipkart" 
name="flipkart" alt="" onclick="get_image_name()"/>

如果没有javascript，请尝试以下方法：-

<input type="hidden" name="image_name"  value="images/flip.jpg" />

将hidden input插入与图像的src相同的表单设置值中

$_POST['image_name'] //get image name

使用javascript ajax将图像的名称发送到php，如下所示。您的html如下所示。

<img class="img-responsive" src="images/flip.jpg" id="flipkart" 
name="flipkart" alt="" onclick="send_image_name()"/>

Javascript应该如下所示。

function send_image_name(){
var src = $('img').attr('src').split('/');
var image_name = src[src.length - 1];
var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange=function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      alert("Successfully sent name!");
    }
  }
  xhttp.open("GET", "store.php?image_name=" + image_name, true);
  xhttp.send();
}