Fill inputs with urls images

Question

I have a modal that displays various images.

I also have a form with 5 text type inputs. How do I get when clicking on an image to fill the url correct in active input?

all image tags are as follows:

<img data-dismiss="modal" class="img-responsive" src="nameImage.png"/>

Currently I can only fill a single input

$('img').click(function(){
    $('#url_image').val($(this).attr('src'));
})

Form:

<form method="post">
    <button data-toggle="modal" data-target=".bs-example-modal-lg">Show images</button>
    <input type="text" id="url_image" name="url_image" value="">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">

    <input type="submit">
</form>

You could assign them statically by using a class and `.url_image` instead of `#url_image`. Do you want them to be linked in order only? If not you may want to assign a data attribute to the inputs and the images and get the matching input for the images attribute. — Marie, Mar 09 '16 at 18:58
_to fill the url correct in active input..._ What do you exactly mean by "active input"? input having focus? But it will be lost once you click an image. — hindmost, Mar 09 '16 at 19:02
_"How do I get when clicking on an image to fill the url correct in active input?"_ Current `js` achieves this. _"Currently I can only fill a single input"_ This appears to be expected result described ? Is requirement to fill all `input` elements with `img` `src` ? Note also `button` within `form` element could submit `form` when clicked ? — guest271314, Mar 09 '16 at 19:05
Only **one** element on web page can have focus **at the same time**. When user click on any element (image), previously focused element (input) loses focus. — hindmost, Mar 09 '16 at 19:11

score 1 · Accepted Answer · answered Mar 09 '16 at 19:13

You could use focus event to store last input element focused on, use this variable to update input value.

Note, button element clicked within form element could cause form to submit

var focused = null;

$("input").on("focus", function() {
  focused = $(this);
})

$("img").click(function() {
  if (focused.length)
  focused.val($(this).attr("src"));
})

input {
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post">
  <input type="text" id="url_image" name="url_image" value="">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">

  <input type="submit">
</form>
<button data-toggle="modal" data-target=".bs-example-modal-lg">Show images</button>
<img src="http://lorempixel.com/50/50/cats" />
<img src="http://lorempixel.com/50/50/nature" />

please see: [Input does not properly fill](http://stackoverflow.com/questions/35902174/input-does-not-properly-fill) — Gisele, Mar 09 '16 at 20:44

score 1 · Answer 2 · answered Mar 09 '16 at 19:19

you can do it in this way.

JS :

$(".common_class").on('focus', function() {

     $(".common_class").removeClass('active');
     $(this).addClass('active');
})

$('img').click(function() {
     $('.common_class.active').val($(this).attr('src'));
})

HTML :

<form method="post">
        <button data-toggle="modal" data-target=".bs-example-modal-lg">Show images</button>
        <input type="text" class="common_class" name="url_image" value="">
        <input type="text" class="common_class">
        <input type="text" class="common_class">
        <input type="text" class="common_class">
        <input type="text" class="common_class">
        <input type="submit">
        <img data-dismiss="modal" class="img-responsive" src="nameImage.png" />

Thanks so much, I marked the response of @guest271314 because it is simpler and use native properties — Gisele, Mar 09 '16 at 19:28

Fill inputs with urls images

2 Answers2

Linked