Javascript 如何在加载下一页之前在远程窗体上保持“提交”按钮处于禁用状态

在我使用TurboLink的Rails 5.1应用程序中，我在我的提交按钮中添加了一个带有属性的

数据禁用，这样一单击按钮，按钮就会被禁用，以防止意外地多次提交数据。这在很多情况下都非常有效

问题在于，对于使用内置UJS帮助程序（
data remote=true
）通过AJAX提交的表单，当单击提交按钮时，它不会保持禁用状态。它最初是禁用的，但在加载下一页之前会很快重新启用。这就违背了使用

行为禁用

数据的观点，因为它允许意外的表单重新提交

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

表格如下：

<%= 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 %>



下面是发生的情况。
发生了什么事？
表格已提交
rails ujs禁用按钮（使用

行为禁用

数据）
表单请求成功
rails ujs重新启用该按钮
turbolinks rails向重定向位置发出请求（这可能是一个缓慢的请求，使按钮处于启用状态）
解决方案
我们需要在第4步后重新禁用该按钮。为此，我们将监听
ajax:success
事件，并使用
setTimeout
禁用它。这可以确保在Rails完成它的工作后，它将被禁用。（您可以使用
requestAnimationFrame
而不是
setTimeout
，但它没有得到广泛支持。）

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

我注意到您使用的是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)
})

请注意，这将禁用按钮，直到下一页加载所有带有
数据禁用按钮的
数据远程
表单。您可能希望更改jQuery选择器，使其仅将此行为添加到所选表单中

希望有帮助
 FYI：这是Rails的一个已知问题

有两个PRs来修复它：和

希望在不久的将来您不需要任何解决方法。
如何提交表单数据并禁用按钮

<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>


提交和禁用按钮
{%csrf_令牌%}
蒙坦特
登记员
`
$（文档）.ready（函数（）{
var计数=0；
$（“#保存”）。单击（函数（）{
var montant=$（'#montant'）.val（）；
如果（蒙塔特！=''）{
计数++；
var montant=$（'#montant'）.val（）；
//正在发送的首次单击数据
如果（计数=1）{
返回true；
}否则{
//禁用按钮
$（'msgError'）.text（'mercidepatienter…'）；
$（'msgError'）.css（'color'，'blue'）；
$（'#save'）.attr（'disabled'，'disabled'）；
}
}
});
});
我们要从动画中直观地显示您的代码吗？@jvillian@patrick ogrady在描述中指出，他正在表单上使用
data remote=true
属性，以及按钮上的
data disable with
属性，从代码的角度来看，我觉得这已经足够了。它缺少了一个明确的问题，我希望我能帮助澄清。谢谢@domcristie，我还为表单添加了代码。谢谢@domcristie！！！快速提问：如果我们不是使用jquery ujs，而是使用普通javascript的Rails 5.1中的新ujs，那么解决方案会改变吗？（我们通常仍然使用jQuery，只是不使用jQuery-ujs）@PatrickO'Grady大致相同。使用
ajax:send
而不是
submit
（这可能也适用于jquery ujs，但我没有测试它），禁用/启用方法已更改为
Rails.disableElement
/
Rails.enablelement
。我在上面添加了一个rails ujs版本。@Domcristie现在这个PR已经修复了，还需要这个解决方案吗？虽然此链接可以回答问题，但最好在此处包含答案的基本部分，并提供链接供参考。如果链接页面发生更改，仅链接的答案可能无效。-我理解并理解你的观点。但是链接只包含Turbolinks库上的代码更改，库的用户对此无能为力。也许这个答案可能只是对第一个答案的评论，但不幸的是，我还不能对堆栈溢出进行评论。这在Rails:和turbolinks Rails:中得到了修复。现在我们必须等待Rails 6和turbolinks Rails的新版本：）。