Question

Spoiler alert: this is a stupid question 😉

I have a Rails form where I display avatar images for the user to select, fetched from the services associated with the user account via Omniauth. It looks like this and it renders without any issues:

<%= form_for @user, :remote => true do |f| %>
  <% @services.each do |service| %>
    <% if service.avatar == @user.avatar %>
      <%= link_to image_tag(service.avatar), '#', :size => "48x48", :id => "current_avatar" %>
    <% else %>
      <%= f.text_field :avatar, :value => service.avatar, :type => :hidden, :class => "clickable"%>
      <%= image_tag(service.avatar, :class => "clickable") %>
    <% end %>
  <% end %>
<% end %>

The relevant part of my application.js file looks like this:

$('.clickable').live('click', function() {
  $(this).parents('form:first').submit();
});

The jquery-rails gem is installed and working ok.

The issue is that this setup obviously submits the whole form, making the user avatar be the last one on the list, no matter which one the user clicks.

Is it possible to submit only the field associated with the image clicked by the user?

I have a good understanding of Rails but JQuery is completely new to me, so I’m really lost. Googled a lot and couldn’t find anything. At least nothing that I could understand 😉

Answer 1

Why are you using hidden text fields for this? I think radio buttons would serve you better. Just create one radio button per avatar (with the current selection checked by default), make sure they all have the same name, and then wrap the image_tag elements in <label>s so that people can click on something. The values for the radio buttons would be the same :value => service.avatar that you’re using for the text fields.

Once that’s in place, you can submit away and it’s all good as the form will only return one of the avatars.