get data attribute from an image into input box on click

Question

I have an image that contains a data-keyword attribute. Can anyone show me how to get its string and show it in the input field when I click on the image? I can get the text link .special_field_link to work but not the image .image_keyword. (FIDDLE) The following code doesn't work:

HTML

<input id="a_input_id" type="text">
<a href="" class="special_field_link">@ABC<a>
<a href="" class="special_field_link">@DEF<a>
<img src="image.jpg" class="image_keyword" data-keyword="Hello" alt="pic">

JS:

$('.special_field_link,.image_keyword').click(function (e)   {
   e.preventDefault();
   if($(this).is('.image_keyword')){
      var keyword = $(this).data('keyword');
      $('#a_input_id').val(  ( $('#a_input_id').val()+" "+$(this).keyword.html() ).trim()  );      
   } 
   else {         
      $('#a_input_id').val(  ( $('#a_input_id').val()+" "+$(this).html() ).trim()  );
   }
});

fiddle.jshell.net/M57vg

Satpal
– Satpal

2014-05-06 18:00:28 +00:00
Commented May 6, 2014 at 18:00 — Satpal
– Satpal, Commented May 6, 2014 at 18:00

Andrew Vermie · Accepted Answer · 2014-05-06 18:01:05Z

1

One of your selectors is broken: $('.special_field_link,image_keyword') is missing the . in what should be .image_keyword

You are accessing the data attribute correctly with .data('keyword'), but you don't need the call to .html():

var keyword = $(this).data('keyword');
$('#a_input_id').val(  ( $('#a_input_id').val()+" "+keyword ).trim()  );

Fiddle: http://fiddle.jshell.net/s8nUh/178/

answered May 6, 2014 at 18:01

Andrew Vermie

6333 silver badges8 bronze badges

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

Comments

Eric Random · Accepted Answer · 2014-05-06 18:04:41Z

1

Try

$('.image_keyword').click(function (e)   {
    $('#a_input_id').val($('.image_keyword').data('keyword'));
});

edited May 6, 2014 at 18:04

answered May 6, 2014 at 17:57

Eric Random

1389 bronze badges

Comments

ndugger · Accepted Answer · 2014-05-06 17:52:04Z

0

This is just an example. Feel free to adapt it to your code.

image.addEventListener("click", function() {
    var data = image.getAttribute("data-keyword");
    input.value = data;
})

answered May 6, 2014 at 17:52

ndugger

7,5715 gold badges35 silver badges42 bronze badges

Collectives™ on Stack Overflow

get data attribute from an image into input box on click

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related