如何在远程表单中保持提交按钮禁用状态，直到下一页加载完成

Question

在我的 Rails 5.1 应用程序中使用 Turbolinks，我已经为我的提交按钮添加了一个 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 %>

以下是发生的情况。

- Patrick O'Grady

---

我们需要通过那个动画来直观理解你的代码吗？ - jvillian

@jvillian @patrick-ogrady在描述中指出他在表单上使用了 data-remote=true 属性，同时在按钮上使用了 data-disable-with 属性，从代码角度来看，我认为这已经足够了。只是缺少一个明确的问题，我希望我已经帮助澄清了。 - Dom Christie

谢谢@DomChristie，我也已经添加了表单的代码。 - Patrick O'Grady

Answer 1

正在发生什么？

1. 表单已经提交
2. rails-ujs禁用按钮（使用data-disable-with功能）
3. 表单请求成功
4. rails-ujs启用按钮
5. turbolinks-rails向重定向位置发出请求（可能是缓慢的请求，导致按钮处于启用状态）

解决方案

我们需要在第4步之后重新禁用按钮。为此，我们将监听ajax:success事件，并使用setTimeout禁用它。这确保了它会在Rails完成其操作后被禁用。（您可以使用requestAnimationFrame代替setTimeout，但它的支持不如后者广泛）。

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

我注意到您正在使用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-ujs / 原生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-disable-with 按钮的 data-remote 表单直到下一次页面加载。您可能希望更改 jQuery 选择器，仅将此行为添加到所选表单中。

希望对您有所帮助！

- Dom Christie

---

感谢@dom-christie!!! 快速问题：如果我们不使用jquery-ujs，而是在Rails 5.1中使用新的UJS（使用vanilla javascript），解决方案是否会改变？（我们通常仍然使用jQuery，只是不使用jquery-ujs） - Patrick O'Grady

@PatrickO'Grady 大多数情况下都一样。使用ajax:send而不是submit（这可能也适用于jquery-ujs，但我没有测试过），禁用/启用方法已更改为 Rails.disableElement / Rails.enableElement。我已经添加了一个rails-ujs版本。 - Dom Christie

@DomChristie 现在这个 PR 已经被修复了，这个解决方法还需要吗？ https://github.com/rails/rails/pull/31441 - alexventuraio

Answer 2

FYI：Rails已知问题“rails-ujs过早地启用了禁用元素，导致XHR请求重定向”（详见此处）。

现在有两个PR来修复这个问题：#1和#2。

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

- Gabril Lima

---

虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅链接的答案可能会失效。- 来自审查 - Thomas Smyth - Treliant

我理解并且明白你的观点。但是这些链接只包含了Turbolinks库的代码更改，使用该库的用户无法对此做出任何改变。也许这个回答只能作为第一个回答的评论，但不幸的是，我还不能在Stack Overflow上发表评论。 - Gabril Lima

这个问题已经在Rails中得到了修复：https://github.com/rails/rails/pull/31441，以及turbolinks-rails: https://github.com/turbolinks/turbolinks-rails/pull/28。现在我们需要等待Rails 6和turbolinks-rails的新版本发布 :)。 - head

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>

- Bouna Drame