How do I dynamically uniquely identify a submitted form on a single page with multiple <form> elements?

What I am trying to do is to hide the form element when the user submits the form, and display a 'Thank You' message via AJAX.

The issue I am having is the page has at least 3 forms that look identical.

It is a Devise registration form too, so how do I just hide the specific one that the user submitted and not the other 2 on the page - with jQuery?

This is my form code:

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

Thanks.

Answers


Doesn't

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

Do the job? That should hide the form on submit. While the forms look identical, they should have different ids or at the very least, classes, which you can easily reference in your jQuery.


here's a demo i made that will give you a possible approach for your requirement.

see the demo here

as MBHNYC stated, you will need to have unique id's for each form so it works properly.


Need Your Help

XML Attribute Starts With, in JScript, with IE

javascript xml internet-explorer xpath

In JavaScript running in an .aspx page, in Internet Explorer 8, I have the following XML in xDataSpc: