jquery - 如何动态唯一地标识单个页面上的多个提交表单元素？

Question

我要做的是在用户提交表单时hide对form元素进行处理，并通过 AJAX 显示“谢谢”消息。

我遇到的问题是该页面至少有 3 个看起来相同的表单。

它也是一个Devise注册表单，所以我如何隐藏用户提交的特定表单而不是页面上的其他 2 - 使用 jQuery？

这是我的表单代码：

<%= form_for(resource, :as => resource_name, :class => "send-with-ajax", :url => user_registration_path(resource), :validate => true, :html => { :id => 'user_new' }, :remote => true) do |f| %>
    <div class="six columns alpha"> 
       <%= f.text_field :email, :placeholder => "your-email@address.com", :input_html => {:autofocus => true}, :validate => true %>
    </div>              
    <div class="three columns sign-up alpha">
          <%= f.submit :label => "Submit", :value => "Sign Me Up!"  %>
      <div class="ajax-response"><%= devise_error_messages! %></div>
          </div>
<% end %>

谢谢。

Answer 1

不

$('#user_new').submit(function() { $(this).hide(); });

做这份工作？那应该隐藏提交时的表单。虽然表单看起来相同，但它们应该有不同的 id 或至少有不同的类，您可以在 jQuery 中轻松引用它们。

Answer 2

这是我制作的一个演示，它将为您提供满足您要求的可能方法。

在此处查看演示

正如 MBHNYC 所说，您需要为每个表单提供唯一的 ID，以便它正常工作。