How to disable a form submit button "a là Ruby on Rails Way"?

Question

I am using Ruby on Rails 3 and I would like to disable and toogle the CSS class of a form.submit when the form is AJAX submitted and until the AJAX HTTP request is completed (I am using the default jQuery framework for JavaScript).

My form is the following:

<%= form_for(@article, :remote => true) do |form| %>
    ...
    <%= form.submit(nil, {:id => 'button_id', :class => 'button_class'}) %>
<% end %>

How can I make that in a "common"/"good"/"proper" way?

Answer 1

The Rails jQuery bridge (jquery_ujs.js) code actually has a helper for this.

<%= form.submit "Save", id: "button_id", class: "button", disable_with: "Submitting..."

It will replace the button text with the value you give.

See http://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html#method-i-submit_tag

API change: as Renan suggests in a comment below, as of Rails 4 beta there is a deprecation notice on the disable_with option. It should be changed to be a data attribute:

<%= form.submit "Save", id: "button_id", class: "button", data: {disable_with: "Submitting..."} %>

This should work with all recent versions of Rails as it's what the option did anyway. So it'll be one less deprecation notice to fix when you upgrade to Rails 4. :)