jquery禁用提交/单击表单和链接的按钮

Question

在我的 rails 应用程序中，我有向服务器提交信息的按钮。有些按钮是表单的一部分，有些则不是。我正在寻找一种方法来应用我的 jquery，它会在单击后禁用按钮。

这是我当前的 jquery：

  $('.btn-disabler').on('click', function() {
    $(this).append("<i class='fa fa-spinner fa-pulse btn-loader'>").disable(true);
    $(this).find('.btn-label').addClass('invisible');
  });

此代码添加了一个图标以禁用按钮并使文本不可见。我已经扩展了禁用功能以处理锚标签，如此处所述https://stackoverflow.com/a/16788240/4584963

示例链接：

<a class="btn btn-success btn-disabler" rel="nofollow" data-method="post" href="/approve?id=10">
  <span class="btn-label">Approve</span>
</a>

示例表单：

<form class="simple_form well" novalidate="novalidate" id="new_user" action="/" accept-charset="UTF-8" method="post">
      <div class="form-group">
        <input class="string optional form-control" placeholder="First name" type="text" name="user[first_name]" id="user_first_name">
      </div>
      <div class="form-group">
        <input class="string optional form-control" placeholder="Last name" type="text" name="user[last_name]" id="user_last_name">
      </div>
      <div class="form-group">
        <input class="string email optional form-control" placeholder="Email" type="email" name="user[email]" id="user_email">
      </div>
      <div class="form-group">
        <input class="password optional form-control" placeholder="Password" type="password" name="user[password]" id="user_password">
      </div>                
      <div class="form-groups">
        <input class="password optional form-control" placeholder="Retype password" type="password" name="user[password_confirmation]" id="user_password_confirmation">
      </div>
      <button name="button" type="submit" class="btn btn btn-primary btn-disabler">
        <span class="btn-label">Submit</span>
      </button>
</form>

我上面的jquery 不适用于表单。在单击表单中，按钮更改但没有提交。要让 jquery 为表单工作，我需要将其更改为：

  $('.signup-form').on('submit', function() {
    $(this).find('.btn-disabler').append("<i class='fa fa-spinner fa-pulse btn-loader'>").disable(true);
    $(this).find('.btn-label').addClass('invisible');
  });

如何将其合并到链接和表单提交按钮？似乎我的问题源于链接需要点击事件而表单需要提交事件。

Answer 1

您可以使用jQuery is() 来检查当前按钮对象的父对象是否为表单以提交表单：

$('.btn-disabler').on('click', function() {
    $(this).append("<i class='fa fa-spinner fa-pulse btn-loader'>").disable(true);
    $(this).find('.btn-label').addClass('invisible');
    if ($(this).parent().is("form")) $(this).parent().submit();
});

Answer 2

将提交按钮视为表单提交事件的扩展。如果禁用表单提交按钮，表单提交事件将被禁用。您可以做的是将类添加到表单中，然后在您的 jQuery 代码中分配特定的规则。像这样..

所以，使用这个 HTML：

<form class="disabler">
  <button type="submit"><span>Label</span></button>
  </form>

<a href="#" class="disabler"><span>Label</span></a>

<button class="disabler"><span>Label</span></button>

使用这个javascript：

$('.disabler').each(function(e){
 if(this.nodeName == "A"){
    // this is a hyperlink... 
    // apply css class
    $(this).on('click', function(){          
        //some action
        });

 } else if (this.nodeName == "BUTTON") {
    //this is a button outside of a form
    // disable and add css class
    $(this).on('click', function(){          
        //some action
        });

 } else if (this.nodeName == "FORM") {
    $(this).on('submit', function(){
    $(this).find('button[type="submit"]')
      .append("<i>Loading</i>")
      .disable();
       });
    }

 });

您可能可以对其进行更多重构，但我认为当您尝试对这些组件中的每一个应用不同的规则时，应该注意 nodeName。

我希望这能回答你的问题。

Answer 3

你会尝试使用像

这样的表单的 id

$('#new_user').on('submit' ...

或使用表单元素

$('form').on('submit' ...