用户单击图像时传递图像名称或图像ID属性

My requirement is to pass the image name to store.php when user clicked on the image.

Based on the image name i will query database and display the result

But I dont know how to pass the image name when user clicked on it. Please advise.

Code is as follows :

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

Try this code :-

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

call function this function on image onclick:-

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

Without javascript try this approach :-

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

insert hidden input inside form set value of this same as src of image

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

Use javascript ajax to send name of the image to php as follows. Your html is as follows.

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

Javascript should be as follows.

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();
}