Rails формы: после клика - отключить ссылку

Question

У меня есть больше форм в майских приложениях со стандартными кнопками «Сохранить» и «Обновить». Как сделать эту кнопку неактивной (отключенной) после первого нажатия на эту ссылку?

Answer 1

Вы можете использовать опцию disable_with с помощниками form_tag и form_for. В случае form_tag вы можете использовать

submit_tag "Complete sale", :disable_with => "Please wait..."

В случае form_for вы можете использовать

   f.submit 'Create', :disable_with => "Creating..."

источник: http://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html#method-i-form_tag

Answer 2

С помощью jquery вы можете сделать это действительно просто

$('form').submit(function(){
$('input[type=submit]', this).attr('disabled', 'disabled');
});

В приведенном выше примере выполняется поиск ВСЕХ форм и отключение кнопки отправки после нажатия кнопки Отправить.Это предпочтительный метод, поскольку кнопка ввода также запускает отправку.

Answer 3

Это слишком поздно, но кто-то нашел это полезным.

Иногда :disable_with не работает в рельсах. Для этого вам нужно проверить, добавлен ли jquery-rails gem в ваш gemfile или нет.

Затем используйте параметр 'data-disable-with' => "SUBMITTING".

Answer 4

Если вы хотите сделать это с помощью javascript, то почему бы не использовать делегирование событий?

$(document.body).delegate("form.active","click",function(){
    this.className = "clicked";
});

Это делегирует событие click для каждой формы на странице с классом active (в равной степени вы можете ограничить это для каждой формы в контейнере, используя другой контекст, например, $ ("# container"). Delegate (... ) или пропустите активный класс) и изменит класс с активного на нажатый

$(document.body).delegate("form.clicked","submit",function(e){
    e.preventDefault();
});

Это делегирует событие отправки каждой форме на странице с нажатием className и останавливает отправку формы.

В качестве альтернативы, вы могли бы использовать первую функцию делегата, чтобы связать событие отправки непосредственно с самой формой (поэтому замените обе вышеуказанные функции следующими). ​​

$(document.body).delegate("form","click",function(){
    $(this).submit(function(e){
        e.preventDefault();
        e.stopPropagation();
    })
});