如何在加载下一页之前保持远程表单上的提交按钮处于禁用状态

Question

在我使用 Turbolinks 的 Rails 5.1 应用程序中，我向我的提交按钮添加了一个 data-disable-with 属性，以便在单击时按钮将被禁用，以防止意外地多次提交数据次。这在很多情况下都很有效。

问题是，在使用内置 UJS 助手 (data-remote=true) 通过 AJAX 提交的表单上，单击提交按钮时，它不会保持禁用状态。它最初是禁用的，但随后会在下一页加载之前迅速重新启用。这违背了 data-disable-with 行为的要点，因为它允许意外重新提交表单。

有没有办法在新页面加载之前保持表单按钮处于禁用状态？

表格如下：

<%= simple_form_for(
  resource,
  as: resource_name,
  url: session_path(resource_name),
  html: { class: "large", autocomplete: "on" },
  remote: true
) do |f| %>
  <%= f.input(
    :email,
    placeholder: "Email address",
    label: false,
    autofocus: true
  ) %>
  <%= f.input(:password, placeholder: "Password", label: false) %>
  <%= f.button(
    :submit,
    "Sign in",
    class: "ui fluid large teal submit button",
    "data-disable-with": "Signing in..."
  ) %>
<% end %>

事情是这样的。

Answer 1

发生了什么事？

表单已提交
rails-ujs 禁用按钮（data-disable-with 行为）
表单请求成功
rails-ujs 重新启用按钮
turbolinks-rails 向重定向位置发出请求（这可能很慢，使按钮处于启用状态）

解决方案

我们需要在第 4 步后重新禁用该按钮。为此，我们将监听 ajax:success 事件，并使用 setTimeout 禁用它。这确保它将在 Rails 完成其工作后被禁用。（您可以使用 requestAnimationFrame 而不是 setTimeout，但它没有得到广泛支持。）

为了防止按钮在禁用状态下被缓存，我们将在它被缓存之前重新启用它。（注意使用 one 而不是 on 来防止缓存前处理程序执行多次。）

我注意到您使用的是 jQuery 和 jquery-ujs，所以我将在下面的代码中使用这些库中的函数。将其包含在主 JavaScript 文件中的某处。

jquery-ujs

;(function () {
  var $doc = $(document)

  $doc.on('submit', 'form[data-remote=true]', function () {
    var $form = $(this)
    var $button = $form.find('[data-disable-with]')
    if (!$button.length) return

    $form.on('ajax:complete', function () {
      // Use setTimeout to prevent race-condition when Rails re-enables the button
      setTimeout(function () {
        $.rails.disableFormElement($button)
      }, 0)
    })

    // Prevent button from being cached in disabled state
    $doc.one('turbolinks:before-cache', function () {
      $.rails.enableFormElement($button)
    })
  })
})()

rails-ujs / jQuery

;(function () {
  var $doc = $(document)

  $doc.on('ajax:send', 'form[data-remote=true]', function () {
    var $form = $(this)
    var $button = $form.find('[data-disable-with]')
    if (!$button.length) return

    $form.on('ajax:complete', function () {
      // Use setTimeout to prevent race-condition when Rails re-enables the button
      setTimeout(function () {
        $button.each(function () { Rails.disableElement(this) })
      }, 0)
    })

    // Prevent button from being cached in disabled state
    $doc.one('turbolinks:before-cache', function () {
      $button.each(function () { Rails.enableElement(this) })
    })
  })
})()

rails-ujs / vanilla JS

Rails.delegate(document, 'form[data-remote=true]', 'ajax:send', function (event) {
  var form = event.target
  var buttons = form.querySelectorAll('[data-disable-with]')
  if (!buttons.length) return

  function disableButtons () {
    buttons.forEach(function (button) { Rails.disableElement(button) })
  }

  function enableButtons () {
    buttons.forEach(function (button) { Rails.enableElement(button) })
  }

  function beforeCache () {
    enableButtons()
    document.removeEventListener('turbolinks:before-cache', beforeCache)
  }

  form.addEventListener('ajax:complete', function () {
    // Use setTimeout to prevent race-condition when Rails re-enables the button
    setTimeout(disableButtons, 0)
  })

  // Prevent button from being cached in disabled state
  document.addEventListener('turbolinks:before-cache', beforeCache)
})

请注意，这将禁用按钮，直到下一页加载到所有 data-remote 表单上并带有 data-disable-with 按钮。您可能想要更改 jQuery 选择器以仅将此行为添加到选定的表单。

希望对您有所帮助！

Answer 2

仅供参考：这是 Rails“rails-ujs prematurely enables disabled elements for XHR requests with redirects”的已知问题。

并且有两个 PR 可以修复它：#1 and #2。

希望在不久的将来您不需要任何解决方法。

Answer 3

如何提交表单数据和禁用按钮。

<form method="post" enctype="multipart/form-data" action="action.php">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title"> submit and disabled button </h3>
        </div>
        <div class="panel-body">
            {% csrf_token %}
            <div class="form-group">
                <label>Montant</label>
                <input type="number" name="montant" id="montant" required/>
            </div>
            <div class="form-group">
                <center><span id="msgError"></span></center>
            </div>
        </div>
    </div>
<div class="form-group">
    <button type="submit" name="save" id="save">Enregistrer</button>
</div>

</form>`

<script>

    $(document).ready(function(){
        var count = 0;
        $('#save').click(function(){
           var montant = $('#montant').val();
           if (montant!=''){
               count++;
               var montant = $('#montant').val();
               // first click data are sending
               if (count == 1){
                  return true;
               }else{
               // disable button 
                  $('#msgError').text('Merci de patienter...');
                  $('#msgError').css('color', 'blue');
                  $('#save').attr('disabled', 'disabled');
               }
           }
        });
   });
</script>

如何在加载下一页之前保持远程表单上的提交按钮处于禁用状态

How to keep submit buttons disabled on remote forms until the next page has loaded

javascript

ruby-on-rails

turbolinks

ujs

发生了什么事？

解决方案