Rails 4: Disable submit button after click

Question

I have a form_tag(foo_path(@foo), remote: true, id: \'foo-form\' form and a submit button submit_tag (\"Submit\", :id => \"foo-submit\")

<

Answer 1

You use CoffeeScript to do something like these lines:

jQuery ->
  $('.theform').submit ->
    $('input:submit').attr("disabled", true)

This disables the form submit button when the form with class="theform" is submitted. Depending on your need you adjust this to fit with your class/id for the form.

Answer 2

An alternative to the submit_tag is the button_tag. The button_tag allows you to add a font awesome spinner.

<%= button_tag 'Submit', class: 'btn btn-primary', 
      data: { disable_with: "<i class='fa fa-refresh fa-spin'>
      </i> Submitting Changes..."} %>

Answer 3

use

submit_tag "Submit", id: "foo-submit", data: { disable_with: "Please wait..." }

Answer 4

The problem was caused by invalid HTML code. See <div> breaks <form> disable_with works now

Answer 5

Since it is an ajax call, the resultant js.erb file from the corresponding action will be triggered.

The disable-on-click algorithm can be placed inside this js.erb file.

# in the controller
def foo_method
...
# will render js.erb for ajax call 
# assuming there is no .html view file in the directory
end

# in foo_method.js.erb
$('input:submit').attr("disabled", true);

It should bring you abck to the same page with the button noew disabled