Question

What I have:

I have a form that I submit via AJAX.

<%= form_for([@map, @annotation], :remote => true ) do |f| %>
   ...
   <%= f.submit "Save annotation", :class => "btn btn-primary", :id => "annotation-submit-button" %>
<% end %>

What I want:

I would like to prevent double submits. Since the form only disappears when the request has successfully completed, users can click the submit button as long as the database hasn’t finished writing the data. I don’t want that, obviously.

What I’ve tried:

I tried adding this to the submit button itself – but it doesn’t work. The button gets disabled, but no data is sent.

:onclick => "this.disabled = true"

I’ve also tried adding a click handler to the submit button. This has the same effect as before. No data is actually sent to the controller, but the button is disabled.

$("#annotation-submit-button").click(function(event) {
  $(this).attr("disabled", "disabled");
  return false;
});

Also tried the same without returning false. Nothing happens after the button is disabled.

$("#annotation-submit-button").click(function(event) {
  $(this).prop("disabled", "disabled");
});

I begin to think that this is something Rails-specific?

Answer 1

Try disable_with in the view like this for Rails 3 and above:

<%= f.submit "Save annotation", :data => {:disable_with => "Saving..."}, ... %>

For Rails 2:

<%= f.submit "Save annotation", :disable_with => "Saving...", ... %>