Prevent double submits in a Rails AJAX form

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?

Justin Tanner · Accepted Answer · 2014-11-18 11:25:43Z

20

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...", ... %>

edited Nov 18, 2014 at 11:25

Justin Tanner

14.5k18 gold badges91 silver badges103 bronze badges

answered Jul 16, 2012 at 14:20

abhas

5,2131 gold badge35 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sandeep Garg Over a year ago

Not working for me for ajax request, nothing happen when click on submit button but works well with normal request

Christoph · Accepted Answer · 2012-07-16 14:04:18Z

2

Disabling the button should work just fine.

Just disable the button in the same function where you execute your ajax-call.

$("#annotation-submit-button").click(function(event) {
  // do ajax call
  $.ajax(...);
  // disable the button
  $(this).prop("disabled", true);
  // prevent the standard action
  return false;
});

However, as of jQuery 1.6 you should use prop() instead of attr().

Edit:

In reply to your comment try omitting the return false; so you don't interrupt the execution of the formsubmit via Rails.

$("#annotation-submit-button").click(function(event) {
  // disable the button
  $(this).prop("disabled", "disabled");
  // do not return false since this stops the event propagation
});

edited Jul 16, 2012 at 14:04

answered Jul 16, 2012 at 13:57

Christoph

51.4k22 gold badges103 silver badges129 bronze badges

6 Comments

slhck Over a year ago

I am using Rails UJS — I don't specify $.ajax(...) myself.

Christoph Over a year ago

@slhck take a look at my edit and let me know if it was helpful

VisioN Over a year ago

disabled is boolean, so use $(this).prop("disabled", true) or simpler this.disabled = true.

slhck Over a year ago

Thanks for the response and the update. Interestingly, nothing happens, even when removing return false. The button is disabled, but the form is not submitted.

Christoph Over a year ago

Well, I'm sorry i can't help further then. I have not enough experience with Rails for that. Doesn't it provide some sort of eventhandler to be executed on form-submit?

|

Alaa Badran · Accepted Answer · 2012-07-16 14:01:53Z

1

By jQuery: you can do the following to handle the action you want

$.ajax({
  .....,
  beforeSend: function (){ $('#your-button').attr('disabled', 'disabled'); },
  success: function (){ 
    // Here you can enable the button
  }
});

Hope this may help you

answered Jul 16, 2012 at 14:01

Alaa Badran

1,85816 silver badges19 bronze badges

1 Comment

slhck Over a year ago

I have no custom $.ajax call as I am using Rails. See the comment on Christoph's answer above.

fantaxy025025 · Accepted Answer · 2013-11-23 11:44:20Z

all, After review your ideas and talking in my team, we got an solution:

(function ($) {
  /**
   * 使用：
   *   在jquery的ajax方法中加入参数:beforeSend
   *   例如：beforeSend: function(){return $.preventMultipleAjax(event, 5000)}
   *
   * @param event
   * @param delay_duration
   * @returns {boolean}
   */
  $.preventMultipleAjax = function (event, delay_duration) {
    delay_duration = delay_duration || 3000;
    var target = $(event.target);
    var last_click_time_stamp = target.attr("_ajax_send_time_stamp") || 0;
    var time_duration = last_click_time_stamp ? event.timeStamp - last_click_time_stamp : 0;
    //console.debug("preventMultipleAjax", last_click_time_stamp, time_duration);
    if (time_duration && time_duration < delay_duration) {
      return false;
    } else {
      //console.debug("skip preventMultipleAjax~");
      target.attr("_ajax_send_time_stamp", event.timeStamp);
      return true;
    }
  };

  /**
   * 防止按钮重复点击。
   * NOTICE: #1 需要在作用点之前调用此方法 #2 stopImmediatePropagation 会阻止后面的所有事件包括事件冒泡
   * @delay_duration 两次点击的间隔时间
   */
  $.fn.preventMultipleClick = function (delay_duration) {
    delay_duration = delay_duration || 3000;
    var last_click_time_stamp = 0;
    var time_duration = 0;
    $(this).bind('click', function (event) {
      time_duration = last_click_time_stamp ? event.timeStamp - last_click_time_stamp : 0;
      //console.debug("preventMultipleClick", last_click_time_stamp, time_duration);
      if (time_duration && time_duration < delay_duration) {
        event.stopImmediatePropagation();
      } else {
        //console.debug("skip preventMultipleClick~");
        last_click_time_stamp = event.timeStamp;
      }
    });
  };
})(jQuery);

If you like it I will added it as an little plugin~ Thanks for your suggestion~

A plugin for where? Is this specific to Rails? After all, a single property does this, no need for a lot of jQuery code.

Collectives™ on Stack Overflow

Prevent double submits in a Rails AJAX form

What I have:

What I want:

What I've tried:

4 Answers 4

1 Comment

6 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

What I have:

What I want:

What I've tried:

4 Answers 4

1 Comment

6 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related