Populate an input field with an image src in javascript

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.

nateevans · Accepted Answer · 2015-04-15 15:43:21Z

5

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);

answered Apr 15, 2015 at 15:43

nateevans

4264 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Paleo · Accepted Answer · 2015-04-15 15:42:20Z

1

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

See the documentation.

answered Apr 15, 2015 at 15:42

Paleo

24k5 gold badges74 silver badges84 bronze badges

Comments

Vasilev · Accepted Answer · 2015-04-15 15:46:11Z

1

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);  
});

answered Apr 15, 2015 at 15:46

Vasilev

1117 bronze badges

Comments

Lamine · Accepted Answer · 2015-04-15 18:46:28Z

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);

          }

Collectives™ on Stack Overflow

Populate an input field with an image src in javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related