使用javascript中的图像src填充输入字段

Question

I have an XHR response that returns images. I have my function in order to show the images. I am combining JQuery and JS in the same code snippet. So far all is working well:

function resultat(o){  
          var leselements = o.query.results.bossresponse.images.results.result;
          var output = '';  
          var no_items = leselements.length;  
          for(var i=0;i<no_items;i++){  
            var lien = leselements[i].url;

            //place image urls in img src  
            output += "<img src='" + lien + "' class='imgs'>";  
          }  
          // Place images in div tag  
          document.getElementById('results').innerHTML = output;}

But I would like to allow users to click an image and then populate an input field ('#imageurl') with the clicked image src. Here is what I tried but it does not work.

$('.imgs img').click(function(){
            $('#imageurl').val() = "";
            var source = $(this).attr('src');
            $('#imageurl').val() = source;    
          });

Any help will be greatly appreciated. TIA.

Answer 1

Using .val() in this way will just return the current value of #imageurl.

$('#imageurl').val()

.val is a function call that works as a getter and a setter.

To set the value, try this:

$('#imageurl').val(source);

Answer 2

$('#imageurl').val("");
// ...
$('#imageurl').val(source);

See the documentation .

Answer 3

Try this:

$('img.imgs').click(function(){
   var src = $(this).attr('src');
   $('#imageurl').val(src);  
});

If the image will be rendered after the attachment of the event handler use this:

$('img.imgs').live('click', function(){
   var src = $(this).attr('src');
   $('#imageurl').val(src);  
});

Answer 4

Thank you guys for your prompt answers. I tried all of them but they did not work for me. I then asked a friend and we finally found a way to make it work. Probably not the best or professional way but it works. Here is the solution if ever anyone needs it.

function resultat(o){  
          var leselements = o.query.results.bossresponse.images.results.result;
          var output = '';  
          var no_items = leselements.length;  
          for(var i=0;i<no_items;i++){  
            var link = leselements[i].url;

//Place urls in image src and pass in 'link' parameter to the getsrc function 
            output += "<img src='" + link + "' onclick='getsrc(\""+link+"\")'>";  
          }  
          // Place images in div tag  
          document.getElementById('results').innerHTML = output;


        }

         function getsrc (link) {
            //console.log($(this));
            $('#imageurl').val("");
           // var source = $(this).attr('src');
            //place imageurl value by passing in the link parameter. 
            $('#imageurl').val(link);

          }