Disable Button while ProgressBar is working using jQuery in ASP.Net MVC

LoganTRK

SOLVED CLOSED ACTIVE ANSWERED
User: LoganTRK
Posted: on May 09, 2019 12:03 AM
Forum: ASP.Net MVC
Answer: 1
Views: 4927
Sample Code: Download

Hello,

how can I make the button disabled while the progress bar is working And when the progress bar is finished, the button is enabled.

Thank you.

<!DOCTYPE html>
<html lang='en' class=''>
<head>
    <link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css'>
    <link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css'>
    <style class="cp-pen-styles">
        #progressTimer {
            width: 560px;
            height: 5px;
        }
    </style>
</head>
<body>
    <div id="progressTimer"></div>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src='https://www.jqueryscript.net/demo/Easy-jQuery-Progress-Bar-Timer-Plugin-For-Bootstrap-3-progressTimer/js/jquery.progressTimer.js'></script>
    <script>
        $("#progressTimer").progressTimer({
            timeLimit: 180,
            warningThreshold: 10,
            baseStyle: 'progress-bar-warning',
            warningStyle: 'progress-bar-danger',
            completeStyle: 'progress-bar-info',
            onFinish: function () {
                console.log("I'm done");
            }
        });
    </script>
    <div>
        <table>
            @Html.ActionLink("Go", "Index", "Home", null, new { @class = "btn btn-info" })
        </table>
    </div> 
</body>
</html>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on May 09, 2019 03:47 AM
Report

Hi LoganTRK,

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Index</title>
    <style type="text/css">
        #progressTimer
        {
            width: 560px;
            height: 5px;
        }
    </style>
    <link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css' />
    <link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css' />
    <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script type="text/javascript" src='https://www.jqueryscript.net/demo/Easy-jQuery-Progress-Bar-Timer-Plugin-For-Bootstrap-3-progressTimer/js/jquery.progressTimer.js'></script>
    <script type="text/javascript">
        $(function () {
            $("#btnSave").click(function () {
                $("#btnSave").attr('disabled', 'disabled');
                $("#progressTimer").progressTimer({
                    timeLimit: $('#txtValue').val(),
                    warningThreshold: 10,
                    baseStyle: 'progress-bar-warning',
                    warningStyle: 'progress-bar-danger',
                    completeStyle: 'progress-bar-info',
                    onFinish: function () {
                        $("#btnSave").removeAttr('disabled');
                    }
                });
            });
        });
    </script>
</head>
<body>
    <input type="text" id="txtValue" value="5" />
    <input type="button" value="Save" id="btnSave" />
    <div id="progressTimer">
    </div>
</body>
</html>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Disable Button while ProgressBar is working using jQuery in ASP.Net MVC

Company

Explore

Follow us

Contact Us