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

剧透警报：这是一个愚蠢的问题；）

我有一个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 %>

jqueryrails

gem已安装并正常工作

问题是，这个设置显然提交了整个表单，使得用户头像成为列表中的最后一个，无论用户单击哪一个

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

---

我对Rails有很好的理解，但是JQuery对我来说是全新的，所以我真的迷路了。谷歌搜索了很多，什么也找不到。至少我什么都不懂；）

为什么要为此使用隐藏文本字段？我认为单选按钮会更好地为您服务。只需为每个化身创建一个单选按钮（默认情况下选中当前选择），确保它们都具有相同的

名称

，然后将

图像标签

元素包装在

中，以便人们可以单击某个内容。单选按钮的值与文本字段使用的值相同

---

一旦这些都准备好了，你就可以提交了，因为表单只会返回其中一个化身。

为什么要使用隐藏的文本字段？我认为单选按钮会更好地为您服务。只需为每个化身创建一个单选按钮（默认情况下选中当前选择），确保它们都具有相同的

名称

，然后将

图像标签

元素包装在

中，以便人们可以单击某个内容。单选按钮的值与文本字段使用的值相同

---

一旦设置就绪，您就可以提交了，这一切都很好，因为表单只会返回一个化身。

您可以做的一件事是在提交表单之前，使用回调函数使用

clickable

类删除所有元素（除了已单击的元素）：

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

$('.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();
});

虽然在表单中，可能会删除所有隐藏的文本字段，因为用户单击的是可见图像而不是隐藏的文本字段。因此，您可能需要对jquery更感兴趣。您可能需要：

• 获取图像标记的

  src

  属性的值
• 查找与其对应的隐藏文本字段（即，在其

  值

  属性中具有相同的字符串）
• 使用

  可单击的
  类删除除该文本字段之外的所有元素

大致如下：

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

$('.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();
});

---

您可以做的一件事是在提交表单之前，使用回调函数删除

clickable

类中的所有元素（被单击的元素除外），如下所示：

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

$('.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();
});

虽然在表单中，可能会删除所有隐藏的文本字段，因为用户单击的是可见图像而不是隐藏的文本字段。因此，您可能需要对jquery更感兴趣。您可能需要：

• 获取图像标记的

  src

  属性的值
• 查找与其对应的隐藏文本字段（即，在其

  值

  属性中具有相同的字符串）
• 使用

  可单击的
  类删除除该文本字段之外的所有元素

大致如下：

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

$('.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();
});

---

穆，你的方法显然是最符合逻辑和正确的。非常感谢你。拯救了这一天！非常感谢！穆，你的方法显然是最符合逻辑和正确的。非常感谢你。拯救了这一天！非常感谢！非常感谢所有这些信息！我把前面的答案标为正确，因为它解决了我的问题。我没有重新加载页面，所以我没有看到你的答案。我会试着玩它，看看它是如何工作的。很抱歉，我没有足够的声誉投票支持你的答案，但我通过这一评论感谢你！非常感谢所有这些信息！我把前面的答案标为正确，因为它解决了我的问题。我没有重新加载页面，所以我没有看到你的答案。我会试着玩它，看看它是如何工作的。很抱歉，我没有足够的声誉投票支持你的答案，但我通过这一评论感谢你！