Question

扰流警报：这是一个愚蠢的问题;）

我有一个Rails表单，我在其中显示用户可以选择的头像图像，通过Omniauth从与用户帐户关联的服务中获取。它看起来像这样，它没有任何问题呈现：

<%= 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 %>

我的application.js文件的相关部分如下所示：

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

已安装jquery-rails gem且工作正常。

问题在于，此设置显然会提交整个表单，使用户头像成为列表中的最后一个，无论用户点击哪一个。

是否可以仅提交与用户点击的图像相关联的字段？

我对Rails有很好的理解，但JQuery对我来说是全新的，所以我真的迷失了。谷歌搜索了很多，找不到任何东西。至少我无法理解;）

Answer 1

你可以做的一件事就是使用你的回调函数删除clickable类的所有元素（被点击的那个除外），然后再提交表格：

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

虽然在您的表单中可能会删除您拥有的所有隐藏文本字段，但由于用户单击了可见图像而不是隐藏文本字段。所以你可能需要更加喜欢你的jquery。您可能需要：

获取图片代码的src属性的值
找到与其对应的隐藏文本字段（即在其value属性中具有相同的字符串）
删除clickable类除了那个文本字段

有些事情：

$('.clickable').live('click', function() {
    src_tag_value = $(this).attr("src");
    relevant_input = $(this).siblings("input.clickable[value='"+src_tag_value+"']");
    relevant_input.siblings(".clickable").remove();
    $(this).parents('form:first').submit();
});

Answer 2

为什么要使用隐藏文本字段？我认为单选按钮会更好地为您服务。只需为每个头像创建一个单选按钮（默认情况下选中当前选择），确保它们都具有相同的name，然后将image_tag个元素包装在<label>中，以便人们可以可以点击某些东西。单选按钮的值与您用于文本字段的:value => service.avatar相同。

一旦到位，你可以提交，这一切都很好，因为表格只会返回其中一个头像。

Rails 3 - 使用JQuery提交单个表单字段

2 个答案: