1

How to pass attribute data by clicking on an image:

# Something like this I would imagine
<%= f.select '1.png', ranking: 1 %>
# or
<%= f.image_tag '1.png', ranking: 1 %>

Attempts Based Upon @Tadman

1

  <%= f.hidden_field(:ranking, id: 'ranking') %>
  <%= image_tag('1.png', data: { rank: 1 }, class: 'image-clicker') %>
  <%= image_tag('2.png', data: { rank: 2 }, class: 'image-clicker') %>
  <%= image_tag('3.png', data: { rank: 3 }, class: 'image-clicker') %>
  <%= image_tag('4.png', data: { rank: 4 }, class: 'image-clicker') %>

2

  <%= f.hidden_field(:ranking, id: 'image_ranking') %>
  <%= image_tag('1.png', data: { image_ranking: 1 }, class: 'image-clicker') %>
  <%= image_tag('2.png', data: { image_ranking: 2 }, class: 'image-clicker') %>
  <%= image_tag('3.png', data: { image_ranking: 3 }, class: 'image-clicker') %>
  <%= image_tag('4.png', data: { image_ranking: 4 }, class: 'image-clicker') %>

3

  <%= f.hidden_field(:image_ranking, id: 'image_ranking') %>
  <%= image_tag('1.png', data: { ranking: 1 }, class: 'image-clicker') %>
  <%= image_tag('2.png', data: { ranking: 2 }, class: 'image-clicker') %>
  <%= image_tag('3.png', data: { ranking: 3 }, class: 'image-clicker') %>
  <%= image_tag('4.png', data: { ranking: 4 }, class: 'image-clicker') %>
AnthonyGalli.com
  • 2,796
  • 5
  • 31
  • 80
  • Does [this link](http://stackoverflow.com/questions/4941004/putting-images-with-options-in-a-dropdown-list) answer your question? – Michael Gaskill May 04 '16 at 21:33
  • It sheds light on the previous question I asked @MichaelGaskill, but not for this question. This question isn't about dropdown. I just want it where if a user clicks on an image, then that image will pass `ranking: 1` upon the user clicking submit on the _form. Thanks for your help! – AnthonyGalli.com May 04 '16 at 21:36
  • Oops, sorry, I posted it in the wrong one. I was looking a the other and clicked through to this one before I added the link. I'll add it there. – Michael Gaskill May 04 '16 at 21:38

1 Answers1

2

Normally you do this with the unobtrusive JavaScript available in Rails:

<%= f.hidden_field(:image_ident, id: 'image_ident') %>
<%= image_tag('1.png', data: { ident: 1 }, class: 'img-clicker') %>

Then you can trigger it with jQuery:

$('.img-clicker').click(function() {
  $('#image_ident').val($(this).data('ident'));
});

Idea here is you can have a hidden field to capture your selection and each image when clicked transfers its data value over. You can even add class information to make the selected image look different afterwards, up to you.

tadman
  • 208,517
  • 23
  • 234
  • 262
  • I just changed `ident` with `ranking` wherever it appeared, but I keep getting the error `undefined method image_ranking` – AnthonyGalli.com May 04 '16 at 23:37
  • If your field is `ranking`, then `hidden_field(:ranking, ...)` should do it. – tadman May 04 '16 at 23:45
  • Updated question with attempts. `:ranking` is the field. Am I suppose to add something to the controller with `hidden_field`. And it is `hidden_field right`? Not `hidden_field_tag` – AnthonyGalli.com May 04 '16 at 23:54
  • 1
    `hidden_field_tag` is for an arbitrary field not bound to anything, `f.hidden_field` is intrinsically populated with whatever value it can extract from the form's associated model. – tadman May 05 '16 at 00:09
  • 1
    I've tried probably 25 different versions of your answer. And then realized I forgot to add `:ranking` to params :/ Thanks for your help :) – AnthonyGalli.com May 05 '16 at 01:33
  • You mentioned "You can even add class information to make the selected image look different afterwards" I added class information to `img-clicker` but that changes the way it looks preselected. How do I change the way it looks once it is selected? – AnthonyGalli.com May 05 '16 at 01:48
  • 1
    By adding something like `$(this).addClass('clicked')` or whatever your "clicked" style is. You may need to `$('.clicked').removeClass('clicked')` to de-click all the others that might have been previously clicked. – tadman May 05 '16 at 02:22
  • 1
    Thanks! That got me on track. This was how I fully implemented it to work if you're curious: `` – AnthonyGalli.com May 05 '16 at 18:29