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?
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. :)
form.submit but only for the submit_tag?
submit method of the FormBuilder calls submit_tag with the options passed on.
disable_with option was deprecated as of rails 3.2.5. Now use :data => {:disable_with => 'Submitting...'}. Source: apidock.com/rails/ActionView/Helpers/FormTagHelper/…Following Rails 7, library @rails/ujs is no longer on by default. So :disable_with is not integrated.
Since Rails 7, Turbo is installed by default and it should prevent a double submit.
I my case, I had this issue because I had
= form_with model:, url:, data: { turbo: false } do |form|` Removing data: { turbo: false } solved the issue.
