jQuery隐藏在Rails表单中的提交按钮单击

Question

I have the following form in my rails view:

<%= form_for :search do |f| %>
      <%= f.label :search_by_name %>
      <%= f.text_field :by_name  %>
      <%= f.submit 'Search' %>
<% end %>

In jQuery, I can do something like this:

        $("h1").click(function(){
            $("h1").hide();
        });

That would cause all h1 tags to become invisible upon clicking an h1 tag. How can I instead cause my entire form to become invisible by clicking on the "submit" button for my form above?

EDIT

Perhaps the issue is a little bigger than I'm thinking. When I do this per the answer below:

 $("form").submit(function(){
        $(this).hide();
    })

The form becomes invisible, but then the page is immediately reloaded and the form is visible again. It stays invisible for a split second before reloading the page. Is there a way to carry that affect over from page to page, or to display the form results without reloading the page?

Edit 2

Problem solved. I wrapped the form in a div class and passed that ID into the hide function as mentioned in the comments below, and that seems to work. I don't understand why the page was just realoading and displaying the form when passing in form , but it doesn't have that effect when passing in a id . But, problem solved.

Answer 1

Try

 $("form").submit(function(){
        $(this).hide();
    })

Answer 2

Seems to me that Ajax is what you want (like @arieljuod said) but if you just wanted to hide the form without passing data to the server you could have prevented the event.

$("form").submit(function(e){
    e.preventDefault();
    $(this).hide();
})