Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Rails 4: Disable submit button after click

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?

like image 631
Albert Avatar asked Feb 16 '14 14:02

Albert


3 Answers

use

submit_tag "Submit", id: "foo-submit", data: { disable_with: "Please wait..." }
like image 81
dileep nandanam Avatar answered Nov 18 '22 17:11

dileep nandanam


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..."} %>
like image 30
Steve Avatar answered Nov 18 '22 17:11

Steve


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.

like image 23
murrekatt Avatar answered Nov 18 '22 15:11

murrekatt