Register which image has been clicked in form
<p>I have multiple images in a HTML document and I want them to render unique values when they are clicked (in some retrievable way). I have tried having them as form elements, like so:</p>

<pre><code>&lt;form id="myform" method="post" action=""&gt;
    &lt;input type="hidden" name="action" value="submit" /&gt;
    &lt;div class="flex-item"&gt;&lt;input type="image" name="submit" value="alt1" alt="alt1" src="images/&lt;?php echo $data[$counter] ?&gt;"&gt;&lt;/div&gt;
    &lt;div class="flex-item"&gt;&lt;input type="image" name="submit" value="alt2" alt="alt2" src="images/&lt;?php echo $data[$counter+1] ?&gt;"&gt;&lt;/div&gt;
&lt;/form&gt;
</code></pre>

<p>In this case I would like to access the POST data with PHP, something like:</p>

<pre><code>if (isset($_POST['action'])) {
    echo '&lt;br /&gt;The ' . $_POST['submit'] . ' button was pressed';
}
</code></pre>

<p>But this doesn't work, as it's the <code>image</code> input type, which doesn't seem to be able to send data. I have tried using a button with the image as background, but this way I would have to adapt the size of each image to make it fit in the button (which I want to avoid, as I have many images).</p>

<p>I know I could use an image as a submit button with Javascript, but as I said, information about which image has been clicked also needs to be available somehow. Any ideas about the best solution?</p>