PHP: Image as an Input

Question

I was wondering how I could make an image as an form input, so if I would click on Image 1 then it will be highlighted and return Image 1's value in form post. Same goes for if I would click on Image 2.

Note that the Images should not be some kind of a post submit, more like a form option between Image 1 & 2.

HTML code section

<form>
    <img  src="http://pokeapi.co/media/img/18.png"    />
<img  src="http://pokeapi.co/media/img/2.png"  />

<input type="hidden" id="imgvalue" name="imgvalue" value="" />
<input type="submit" />
</form>

I don't currently have a code but I would like to see a example so I can learn it and do it myself. Thanks in advance!

Use javascript on image click. Have a hidden input field and populate the value based on which image has been clicked. — Shakti Prakash Singh, Mar 12 '17 at 22:31
You dont need javascript Shakti. Only a idea: You can create two radio elements, set them hidden and create a label for every radio. In this radio element you can put the image. If you click the image, the label activate the radio element. — Shutterfly, Mar 12 '17 at 23:20
And for the style check this: http://stackoverflow.com/questions/1431726/css-selector-for-a-checked-radio-buttons-label — Shutterfly, Mar 12 '17 at 23:20

Chien_Khmt · Answer 1 · 2017-03-13T03:51:45.913

You create two image with onclick event
to set the value for hidden field which be named img_value
after submit you can get the value of img_value

function set_value(me)
{
document.getElementById("img01").className = "unclicked";
document.getElementById("img02").className = "unclicked"; 
document.getElementById("img_value").value = me.id;
me.className = "clicked";
}

.unclicked {
border: 1px solid black;
}
.clicked {
 border: 1px solid red;
}

<img id="img01" src="http://pokeapi.co/media/img/18.png" onclick="set_value(this)"  class="unclicked" />
<img id="img02" src="http://pokeapi.co/media/img/2.png" onclick="set_value(this)" class="unclicked" />
<BR>
<input type="hidden" id="img_value" name="img_value" value="null" />
<input type="submit" />

ubm · Answer 2 · 2017-03-13T07:04:54.620

i hope this code will helps you,You can javascript onclick events to access image src,and change the class,and define styles for specific class to highlight image

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<img  src="http://pokeapi.co/media/img/18.png"    />
<img  src="http://pokeapi.co/media/img/2.png"  />

<input type="hidden" id="imgvalue" name="imgvalue" value="" />
<input type="submit" />
<style>
.active { 

 text-decoration:none;
    border:#CCC thin solid;
    padding: 4px;
background:#CCC;
 }
</style>
<script>
$(function(){
$('img').on('click',function(){
var value= $(this).attr('src');

$('#imgvalue').val(value);
$("img").removeClass("active");
$(this).addClass("active");
})
});
</script>

here i am using active class for highlighting image,you can add additional features too..

PHP: Image as an Input

2 Answers2