Question 179758 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – javascript : Create a suitable function for loading the button?

I have a form, I want a loading to be displayed on the button when the form button is submitted.
I created this mode but in a simple mode.
I want to create a function that I can use in all forms, please help me, I am not fluent in 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>
Tags:

2

Answers


  1. 0

    You can try the following way:

    function showLoader(){
  var btn = $('.btn-sabt');
  btn.addClass('submit-btn');
  btn.prop('disabled', true);
  btn.find('i').removeClass('hide');
}

function hideLoader(){
  var btn = $('.btn-sabt');
  btn.removeClass('submit-btn');
  btn.prop('disabled', false);
  btn.find('i').addClass('hide');
}

$(document).ready(function() {
  $('#MobileUserForm').submit(function(event) {
    event.preventDefault(); //prevent form submission
    
    showLoader();  

    //perform tasks
    //after completion, remove the loading
    
    //test
    setTimeout(() => {
       hideLoader();
    }, 3000); //remove after 3 seconds

   
  });
});
    .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>
    Login or Signup to reply.
  2. 0

    Here is a DRYer version of Mamun’s suggestion

    Not sure what the btnsabt.addClass('submit-btn'); is for, if needed uncomment it

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

    //perform tasks
    //after completion, remove the loading
    
    //test
    setTimeout(() => {
      toggleLoader(0)
    }, 3000); //remove after 3 seconds

   
  });
});
    .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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search