16

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

I'd like to disable the submit button after it has been clicked. Obviously, I cannot use something like onlick="jQuery(this).prop('disabled', true);" because it would break the remote functionality. I'm aware of the :disable_with data attribute for the submit_tag but it doesn't seem to work for me. It does generate the right form code but it has no effect. I'm not sure why it doesn't work but it might be due to the fact that I use prototype (legacy reasons) and jquery at the same time. Though, I only load ujs for jquery and not for prototype. However, all other query_ujs features work very well.

Is there another way to disable the submit button?

Tolsto
  • 1,418
  • 2
  • 17
  • 45
  • Do you run `jQuery.noConflict();` before all your jQuery commands? This may help. Can you confirm that all the ids are correct when you inspect the DOM and there are no duplicates? – mccannf Feb 16 '14 at 15:22
  • Yes to both. However, I managed to get `disable_with' to work by modifying my code. It might be due to a bug in the form helper, but I'm not sure yet. – Tolsto Feb 16 '14 at 15:28
  • Make sure you have all the needed libraries loaded, like jquery-rails etc. The data attribute "disable-with" should work in all cases. Or is there anything specific YOU do that it doesn't work? – Tanel Suurhans Feb 16 '14 at 17:36
  • @TanelSuurhans please see my answer below – Tolsto Feb 16 '14 at 18:18

5 Answers5

61

use

submit_tag "Submit", id: "foo-submit", data: { disable_with: "Please wait..." }
infused
  • 24,000
  • 13
  • 68
  • 78
dileep nandanam
  • 2,827
  • 18
  • 20
18

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..."} %>
Steve
  • 2,596
  • 26
  • 33
2

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.

murrekatt
  • 5,961
  • 5
  • 39
  • 63
  • 1
    Doesn't seem to work. Just to be sure that my code is correct: jQuery('#foo-form').submit(function () { jQuery('#foo-submit').attr("disabled", true); }); Is that what you meant? – Tolsto Feb 16 '14 at 14:34
  • When the submit button is disabled the form won't submit under at least some browsers, and that's what the OP states as well. – Dave Newton Apr 29 '14 at 18:13
0

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

Vic
  • 1,512
  • 17
  • 25
-2

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

Community
  • 1
  • 1
Tolsto
  • 1,418
  • 2
  • 17
  • 45
  • 24
    So essentially you issue was completely somewhere else and you did not provide all the code needed to debug this. Nor did you actually report the correct symptoms :) I hope this is a good lesson for you on debugging - always pinpoint your problem first and make sure the issue IS where you THINK it is. – Tanel Suurhans Feb 16 '14 at 23:09