jQuery Disable Button Until Ajax Request Complete

jQuery Disable Button Until Ajax Request Complete

Today, We want to share with you jQuery Disable Button Until Ajax Request Complete.
In this post we will show you jquery disable submit button until form complete, hear for Enable Disable Submit Button using jQuery we will give you demo and example for implement.In this post, we will learn about Disable Button Until Ajax Request Is Complete with an example.

HTML jQuery Form data is submitted to Ajax call server by btn clicking on Submit form button, always user clicks it directlt twice more than once, which some populer trigger results in multiple form Data submission to PHP server.

READ :  Creating Angular 6 Hello World Application

<!DOCTYPE html>
<html>
    <head>
        <title>jquery Disable Button Until Ajax Request Complete</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    </head>
    <body>
        <p>Enable Disable Submit Button using jQuery</p>
        <button id="infinityknow_btn">Send Ajax Request</button>
        
        <script>

            $('#infinityknow_btn').on('click', function(){
                
                //jquery ajax Disable our button
                $('#infinityknow_btn').attr("disabled", true);
                
                var url = window.location.href;
                
                $.ajax({
                    url: url,
                    success: function(data){
                        //The jquery Ajax request was a success.
                        //Do something in here.
                    },
                    complete: function(){
                        //jquery Ajax request is finished, so we can enable
                        //the button again.
                        $('#infinityknow_btn').attr("disabled", false);
                    }
                });
            });

        </script>
    </body>
</html>

E-junkie: Sell digital downloads online

E-junkie Provides a Copy-paste buy-now, and cart buttons for selling downloads, codes and tangible products on any website, blog, social media, email and messenger!

Also see:

  1. The Top 10+ Best Webinar Software Platforms For 2020-2021
  2. Build Your Future Godaddy Careers And Jobs
  3. Introduction To Web Hosting Services

Put $(“#start_ajax_req”).attr(“disabled”, false); inside the success function:

$("#start_ajax_req").click(function() {
    $("#start_ajax_req").attr("disabled", true);
    $.ajax({
        url: 'https://infinityknow.com/jQueryTest/test.json',
        data: { 
            action: 'StudentInfo'
        },
        type: 'post',
        success: function(response){
            //success process here
            $("#success+display").delay(1000).fadeOut(800);

            $("#start_ajax_req").attr("disabled", false);
        },
        error: errorhandler,
        dataType: 'json'
    });
});

We hope you get an idea about jQuery Disable Button Until Ajax Request Complete
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

READ :  Angular Autocomplete multiple Tags value

We hope This Post can help you…….Good Luck!.