通过单击图像将文本插入输入字段

Question

I'm looking to do a "browse & insert image" kind of effect to put that images URL (all image info is saved in a database) into a input field for submission.

Sort of like how in WordPress you can click browse, select an image, and then after you click okay it shows you an image in a text area, or the url in the input box.

I'm not really sure what to search to learn how to do this. I'm fairly new to javascript/jquery. Any help is appreciated!

Answer 1

Based on the request this will work:

HTML

<input type="text" id="imgsrc" style="width:500px"/>
<div>
  <img src="https://placeimg.com/100/100/any"/>
</div>
<div>
  <img src="https://placeimg.com/100/100/arch"/>
</div>
<div>
  <img src="https://placeimg.com/100/100/tech"/>
</div>

jQuery

$('img').on('click', function() {
    $('#imgsrc').val( $(this).attr('src') )
})

Fiddle Example