Rails Ajax Form Disable Submit Button

Question

I am having a little trouble figuring out how to disable the submit button in rails when a form is submitted. It works fine with javascript disabled and the ':disable_with' symbol in the 'remote_form_for#submit' function but cannot figure it out when submitting via ajax. Any thoughts? Using rails 2.3.5 and ruby 1.8.7.

Answer 1

You can hide the submit button when the request is made and show a loading image while the request is running. For example in a form_remote_tag:

<% form_remote_tag :url => "/some_url", 
:loading => "$('submit_span').toggle(); $('loading_span').toggle();", 
:complete => "$('submit_span').toggle(); $('loading_span').toggle();" do %>

-- FORM CONTENTS --

  <span id="submit_span">
    <%= submit_tag "Submit" %>
  </span>
  <span id = "loading_span" style = "display: none;">
    <%= image_tag("loading.gif")%>
  </span>
<% end %>

When the request completes (Success OR Failure) you unhide the submit and hide the loading span.

More docs on the various callbacks:

http://api.rubyonrails.org/classes/ActionView/Helpers/PrototypeHelper.html#M002174