当按钮被禁用时，在提交按钮前添加加载图标

Posted 2023-03-06

【中文标题】当按钮被禁用时，在提交按钮前添加加载图标

【英文标题】：Add Loading Icon before the submit button When Button is Disabled

【发布时间】：2021-01-17 21:57:37

【问题描述】：

在我的详细信息表单中有提交按钮 单击时我正在调用 Ajax 请求

在处理 ajax 请求时，我的提交按钮被禁用

我想要的是在按钮被禁用时显示像 fa-spinner fa-spin 这样的加载器图标

这是一个挑战

我不想在按钮内添加任何标签<button disabled>...</button> 仅使用 html、CSS、font-awesome

我也在尝试开发这个，但我想我可以在这里得到更多好的建议。

Here JsFiddle for basic start

body 
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;


#banner-message 
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;


button 
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;


#banner-message.alt 
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;


#banner-message.alt button 
  background: #fff;
  color: #000;


button:disabled
  opacity: 0.66
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id="banner-message">
  <p>Show loader on button Disabled</p>
  <button type="button" id="btnSubmit"> Submit</button> <!-- should not change anything inside button tag, you can add class or property -->
  <br />
  <label><input type="checkbox" onchange="this.checked? $('#btnSubmit').attr('disabled','disabled'): $('#btnSubmit').removeAttr('disabled')" /> Disable Button</label>
  
</div>

【问题讨论】：

请edit您的问题将小提琴中的代码直接包含在您的问题中。不鼓励使用外部链接，因为它们可能会随着时间的推移而中断或更改，并且您的问题对社区不再有用。了解如何创建Stack Snippet

【参考方案1】：

在您的 jsFiddle 中，您可以添加以下内容

.fa-spinner 
  width: 0;
  opacity: 0;


button:disabled .fa-spinner 
  width: auto;
  opacity: 1;

如果这是您要找的。​​p>

【讨论】：

不错，但我仍然需要添加 jsfiddle.net/RaviMakwana/6q2jghLy/21

【参考方案2】：

在这种情况下，您可以像以前一样使用伪元素，并将 fa 微调器的 css 添加到它：D

button:before 
  content: "\f110";
  display: inline-block;
  vertical-align: middle;
  margin: .1em .4em .2em 0;
  font-family: "Font Awesome 5 Free";
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  animation: fa-spin 2s linear infinite;
  opacity: 0;
  width: 0;


button:disabled:before 
  opacity: 1;
  width: auto;
 

【参考方案3】：

要在特定按钮上显示加载器，只需添加类disabled-on-loading

示例<button class="disabled-on-loading" />

.disabled-on-loading:disabled:before 
        opacity: 0.65;
        content: "\f110";
        font-weight: 900;
        display: inline-block;
        font: normal normal normal 14px/1;
        font-family: "Font Awesome 5 Free";
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        text-rendering: auto;
        line-height: 1;
        animation: fa-spin 1s infinite steps(9);
    

body 
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;


#banner-message 
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;


button 
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;


#banner-message.alt 
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;


#banner-message.alt button 
  background: #fff;
  color: #000;


button:disabled
  opacity: 0.65


 .disabled-on-loading:disabled:before 
        opacity: 0.65;
        content: "\f110";
        font-weight: 900;
        display: inline-block;
        font: normal normal normal 14px/1;
        font-family: "Font Awesome 5 Free";
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        text-rendering: auto;
        line-height: 1;
        animation: fa-spin 1s infinite steps(9);
    

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<div id="banner-message">
  <p>Show loader on button Disabled</p>
  <button type="button" class="disabled-on-loading" id="btnSubmit"> Submit</button> <!-- should not change anything inside button tag, you can add class or property -->
  <br />
  <label><input type="checkbox" onchange="this.checked? $('#btnSubmit').attr('disabled','disabled'): $('#btnSubmit').removeAttr('disabled')" /> Disable Button</label>
  
</div>

【参考方案4】：

我为你的情况写了一个完整的例子。

    function submitForm() 

        $('.form').submit(function(event) 
            event.preventDefault();

            var form = $(this);
            var submitButton = $('.js-submit-btn');

            $.ajax(
                type: form.attr('method'),
                url: form.attr('action'),
                beforeSend: function () 

                    // it's action will launch after you click submit button on form

                    submitButton.attr('disabled', true);

                    if($(submitButton).has('.fa-spinner').length === 0) 
                        $(submitButton).prepend('<i class="fas fa-spinner fa-spin"></i>');
                    

                ,
                complete: function () 

                    // it's action will launch after ajax request end

                    setTimeout(function () 

                        submitButton.attr('disabled', false);

                        if($(submitButton).has('.fa-spinner').length) 
                            $(submitButton).find('.fa-spinner').remove();
                        

                    , 1500);

                ,
                data: form.serialize(),
                success: function (response) 
                    console.log('Response: ', response);
                ,
                error: function () 
                    console.log('error');
                
            );

            return false;
        );

    

    submitForm();

<form method="post" action="/your_action_url" class="form" >

    <input type="text" name="client_name" placeholder="Your name">

    <input type="email" name="client_email" placeholder="Your email">

    <button type="submit" class="js-submit-btn"> <i class="far fa-envelope"></i> Send Email</button>

</form>