jquery javascript:创建一个合适的函数来加载按钮?

ffx8fchx  于 2023-06-05  发布在  jQuery
关注(0)|答案(1)|浏览(197)

我有一个表单,我希望在提交表单按钮时在按钮上显示加载。我创建了这个模式,但在一个简单的模式。我想创建一个函数,我可以在所有形式中使用,请帮助我,我不流利的jQuery?

const btnsabt = $('.btn-sabt');
btnsabt.addClass('submit-btn');
btnsabt.prop('disabled', true);
btnsabt.find('i').prop('hidden', false);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<form id="MobileUserForm" method="post">
  <div class="form-group">
    <input asp-for="Mobile" type="number" class="form-control" />
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary btn-sabt">
       <i class="fa fa-refresh fa-spin" hidden></i>save
    </button>
  </div>
</form>
hzbexzde

hzbexzde1#

不确定btnsabt.addClass('submit-btn');的用途,如果需要,取消注解
调用toggleLoader(1);(0);停止
理想情况下,任务应该是异步的,因为接口需要更新

const toggleLoader = show => {
  $('.btn-sabt')
//  .toggleClass('submit-btn',show)
  .prop('disabled', show)
  .find('i').toggleClass('hide',!show)
};

$(function() {
  $('#MobileUserForm').on('submit', (event) => {
    event.preventDefault(); //prevent form submission
    
    toggleLoader(1);  // show the spinner and disable

    //perform tasks
    //after completion, remove the loading
    
    //test to show a delay to visualise the loader
    setTimeout(() => { // remove this line
      toggleLoader(0); // hide the spinner - call this at the end of the task
    }, 3000); //remove this line

   
  });
});
.hide{
  display: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<form id="MobileUserForm" method="post">
  <div class="form-group">
    <input asp-for="Mobile" type="number" class="form-control" />
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary btn-sabt">
       <i class="fa fa-refresh fa-spin hide"></i> save
    </button>
  </div>
</form>

相关问题